用 Bootstrap4 製作響應式網頁一(安裝框架)

2020-09-24 chinshiro

bootstrap 是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 javascript 插件。基於 Bootstrap 提供的強大功能，能夠讓你快速設計並自定義你的網站。截止本文，Bootstrap 最新版本 V4.5.0。

本文將以教程文檔的方式演示一下如何用 Bootstrap 前端框架製作響應式網頁(適用pc、平板、手機一體式訪問)。

此部分是引用必須的框架文件

我們在文檔head部分必須先引用框架的核心文件，包括js和css兩部分。

加載框架文件

1， CDN加載方式，需聯網運行

<!-- CSS only --><link rel=&34; href=&34; integrity=&34; crossorigin=&34;><!-- JS, Popper.js, and jQuery --><script src=&34; integrity=&34; crossorigin=&34;></script><script src=&34; integrity=&34; crossorigin=&34;></script><script src=&34; integrity=&34; crossorigin=&34;></script>

2，本地引用方式，無需聯網運行，但需要先下載所需的文件

<!DOCTYPE html><html><head> <meta charset=&34;> <meta name=&34; content=&34;> <title>用Bootstrap4製作電腦手機響應式網頁</title> <link rel=&34; type=&34; href=&34;> <script defer type=&34; src=&34;></script> <script defer type=&34; src=&34;></script></head><body> </body></html>

再看下初始的目錄結構：


目錄結構

後文將繼續講解導航的製作。

相關焦點

  • 用 Bootstrap4 製作響應式網頁二(導航菜單)
    上文已經介紹安裝框架的過程，本文接下來製作一個導航菜單。導航菜單設計左右結構，左邊放logo,右邊放菜單連結。DOCTYPE html><html><head> <meta charset=&34;> <meta name=&34; content=&34;> <title>用bootstrap4製作電腦手機響應式網頁</title&
  • Bootstrap4.4.1網格實現響應式布局,只需要掌握這一點就行
    實現前端網頁實現響應式布局如果是自己寫代碼來實現真的挺困難的，但是使用bootstrap框架就非常容易了，即使不懂前端開發也可以很好地駕馭。當前最新版本是bootstrap4.4.1，和之前的老舊版本相比較在細節方面做了很多的優化和升級，其中網格系統是實現網頁響應式的核心組成部分。
  • 如何使用框架Bootstrap 4框架來實現易於查看的UI
    一個框架，可以輕鬆查看易於閱讀的設計BootstrapBootstrap（bootstrap）是 一個有用的框架，可以輕鬆地在自己的網頁上準備易於使用且易於使用的設計和功能。如下所示，您可以使用導航欄，側欄，菜單項，按鈕類型連結，列布局等輕鬆地為PC和行動裝置創建頁面。
  • 響應式網站製作之Bootstrap框架的使用
    在響應式網站中使用bootstrap的使用率是極大的，很多開發者都在使用它。那boosttrap的優勢是什麼了？Bootstrap的核心是柵格系統，Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類。
  • 前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架，沒有之一，當前的最新版本是bootstrap4.4.1，和之前的3.X版本相比較有較大的變化，不過都是屬於各種標籤的分離，方法還是一樣的，在網上各種教程雖多，但是對於入門還不是不夠，很多入門教程講得雲裡霧裡，看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。
  • Twitter BootStrap:前端框架利器
    Twitter要求前端工程師完全依靠這一單一框架進行前端開發。Twitter 在2011年8月將其開源，並在2012年2月3日發布了2.0版。在GitHub上，這個項目已有擁超過2萬位關注者和4000個分支。
  • 用Bootstrap4製作響應式網頁三(Banner動畫)
    上文製作了導航菜單，本文製作一個 Banner動畫區域。手機端banner切換的效果在上文的代碼中 添加一個 section<section class=&34;></section>我們用
  • bootstrap響應式布局
    -- 新 Bootstrap 核心 CSS 文件 --》 　　《link rel=「stylesheet」 href=「http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css」》 　　《！
  • 從Bootstrap小白的角度，為Bootstrap初學者的學習建議與感悟
    包括各種各樣的網頁設計方法，包括幽靈按鈕、更強調字體、視頻背景、卡片式設計、扁平化以及響應式設計，為了更加便於開發前端頁面，前端框架應運而生，其中Bootstrap是最有名的一個。 一開始學習這個框架的時候，說實話（誰還不是一個菜鳥）。開始接觸這個布局框架的時候就是感覺到無力。學過框架的人都說簡單，覺得肯定是騙人的。你看首先要用這個框架必須搭建環境，這就難倒很多人。
  • Bootstrap Studio Mac(網站設計製作工具)
    Mac哪款網站設計製作工具好用呢？Bootstrap Studio for Mac是一款網站設計製作工具，它帶有大量內置組件，您可以拖放以組裝響應式網頁，功能實用！使用Bootstrap Studio Mac版，幫助你快速地創建一個外觀漂亮且運行良好的網站。
  • bootstrap前端開發框架到底應該怎麼用?從整體看bootstrap
    對於很多個人開發者來說，前後端都要自己寫，就需要有一個高效率的開發框架，說白了就是怎麼省事、省力，就怎麼辦。想要快速開發出前臺的靜態頁面，bootstrap是很好的選擇，它是主流的前端開發框架，能夠快速構架前端頁面，如果你理解了它的架構，開發一個靜態的博客首頁，兩個小時就能搞定。好了，進入正題，說說bootstrap。
  • 推薦10 款基於 Bootstrap 框架的擴展
    4.5. android-bootstrapandroid-bootstrap 是一個模板/引導/樣板文件的應用程式,包括大量的優秀的開放源碼工具和框架8.9.10. bootstrap-wysihtml5bootstrap-wysihtml5 是一個基於 Bootstrap 框架實現的所見即所得的 HTML 編輯器。
  • 入門bootstrap,簡潔清新的前端框架
    最近 寫項目用到bootstrap確實使用起來很方便，而且風格簡潔，很適合自己做項目時用來當作前端框架。下面是bootstrap介紹：2011年，twitter的「一小撮」工程師為了提高他們內部的分析和管理能力，用業餘時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。
  • 前端框架bootstrap和layui有什麼區別
    做前端的小夥伴肯定都用過或聽過Bootstrap和LayUi，小編我雖然不是專業的前端程式設計師，但是對於前端還是頗有研究，閒暇事情會經常研究各種前端框架的源碼，一來可以借鑑優秀框架的思想，二來可以順便學習可以提高自己，好了，不廢話了。
  • 響應式布局 bootstrap案例
    而典型的響應式布局框架，Bootstrap是怎麼進行分割的呢？答：如果想讓內容居中顯示就用container（相當於版心），如果想佔據整個屏幕寬度就使用container-fluid。比如父元素font-size:12px;子素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對父元素字體大小）;但是子元素同時也設置：width:2em,那麼自身元素用px表示就是24px（相對自身字體大小）；
  • 17 款常用響應式 web UI 框架
    官方網站: http://twitter.github.com/bootstrap/ github: https://github.com/twitter/bootstrap Foundation Foundation 是一個易用、強大而且靈活的框架，用於構建基於任何設備上的 Web 應用。提供多種 Web 上的 UI 組件，如表單、按鈕、Tabs 等等。 官方網站: http://foundation.zurb.com/ github: https://github.com/zurb/foundation
  • kuapingUI 2.0 版本發布,Bootstrap 4+ 大組件 UI 框架
    kuapingUI 2.0 版本發布，更新了基於bootstrap 4+的組件版本，增加了文本、巨幕、新聞、產品、聯繫、團隊、特徵等數幾十種常用
  • kuapingUI 1.8 版本發布,跨屏 UI-bootstrap4+ 大組件 ui 框架
    kuapingUI 1.8 版本發布，發布了新的基於bootstrap 4+的組件版本，因為我們收到了用戶反饋，其中較多的是什麼時候出基於bootstrap 4的大組件版本？
  • bootstrap容器container響應式布局,各種使用方法詳解
    container是bootstrap頂層布局容器，這是一個必須使用的標籤，在每一個頁面上都會用到，是實現響應式布局的核心組成部分，在bootstrap4.4和老舊版本上有著細微的差異，在4.4.1版本中進行了升級，使得container標籤更加靈活方便。
  • 前端框架 Bootstrap 4.4.0 發布
    前端框架 Bootstrap 4.4.0 發布了，以下是更新內容： 新的響應式 .row-cols 類，用於快速指定跨斷點的列數 新的 escape-svg() 函數，可簡化用於表單等的嵌入式背景圖像