前端入門24-響應式佈局（BootStrap）

来源:https://www.cnblogs.com/dasusu/archive/2018/12/13/10116533.html
-Advertisement-
Play Games

聲明 本篇內容摘抄自以下兩個來源： "BootStrap中文網" 感謝大佬們的分享。 正文 響應式佈局（BootStrap） 這次想來講講一個前端開發框架：BootStrap BootStrap 目前已經出了 4 個版本，每個版本都有對應的官網教程，先來看看不同版本里的宣傳語： 簡潔、直觀、強悍的前 ...


聲明

本篇內容摘抄自以下兩個來源：

感謝大佬們的分享。

正文-響應式佈局（BootStrap）

這次想來講講一個前端開發框架：BootStrap

BootStrap 目前已經出了 4 個版本，每個版本都有對應的官網教程，先來看看不同版本里的宣傳語：

簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。--- BootStrap 2.x.x 版本

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。 --- BootStrap 3.x.x 版本

Bootstrap 是全球最受歡迎的前端組件庫，用於開發響應式佈局、移動設備優先的 WEB 項目。

Bootstrap 是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變數和大量 mixin、響應式柵格系統、可擴展的預製組件、基於 jQuery 的強大的插件系統，能夠快速為你的想法開發出原型或者構建整個 app 。 --- BootStrap 4.x.x 版本

那麼，什麼是響應式佈局呢？

通俗的理解，就是在不同的屏幕規格上能夠有不同的佈局效果，比如在大尺寸屏幕上呈現多列的佈局，在小尺寸屏幕上呈現不了這麼多，可能就只剩下一列佈局了。

那麼，當屏幕尺寸發生變化時，在不同屏幕規格上，應該呈現怎樣的佈局，一般是通過媒體查詢 @Media 來實現，但自己在 CSS 中書寫的話，需要處理較多工作。

所以，也可以選擇一些熱門的框架，由它來幫忙處理這些響應式佈局的工作，就像 BootStrap，但 BootStrap 功能不僅只有響應式功能，它還內置了很多預製組件等等，總之，很強大，雖然我還沒用過。

使用

那就來學學如何使用，首先第一步肯定是安裝，我直接選擇最新版 4.x.x 系列的來作為入手了，舊版本沒去瞭解，有機會再說。

將 BootStrap 引入項目中使用有兩種方式：

  • 直接使用網上資源
  • 將相關資源下載至本地使用

使用網上資源

第一種方式最簡單，直接在 HTML 文檔中聲明 css 和 js 文件來源即可，如：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

使用 BootStrap，上面的 HTML 文檔模板是必須的，帶有註釋的都是在所有使用了 BootStrap 的頁面中需要引入的，需要註意的是，由於 BootStrap 一些組件依賴於 jQuery 和 Popper，所以需要引入這兩份 js，而且順序是 jQuery 先，Popper 後，最後再引入 BootStrap 提供的 bootstrap.min.js。

這是第一種方式，也是最省力的。

將資源下載至本地使用

這種方式就比較折騰了，好處就在於資源文件都可以放在自己伺服器上，無需依賴他人。下載資源到本地也有兩種方式，一是手動到官網下載，下麵三個地址：

下載 BootStrap

下載 jQuery

下載 popper

二是利用一些工具來下載，如 node.js 的 npm 命令來下載，打開終端，進入項目的根目錄：

  1. npm init -y

  2. npm install bootstrap

  3. npm install jquery

  4. npm install popper.js --save

如果執行命令過程中報錯了，自行去搜索解決吧，我是一次性成功，沒出啥問題，都下載結束後，項目里的結構如下，node_modules 文件夾里會有下載好的資源：

package.json 配置項如下：

這是我下載使用的版本。

好，不管是手動去下載，還是接著 npm 下載，最後都需要將下載的資源放進項目中，那麼，下載下來的這麼多東西，該怎麼用，哪些是有用的？

可借鑒上面第一種方式里的 HTML 文檔，總共需要的其實就四份文件：

  • bootstrap.min.css
  • jquery.slim.min.js
  • popper.min.js
  • bootstrap.min.js

分別找下四份文件在哪，我的是在這幾個路徑下：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

官方教程說了，上面這是使用 BootStrap 的 HTML 模板，當然也有進行瞭解釋，下麵稍微說說：

<!DOCTYPE html>

這是 h5 的 HTML 文檔的聲明，不加這句的話，可能會出現一些奇怪的樣式；

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

這行代碼表示的意思是，讓網頁可以自動適應當前移動設備的屏幕。

所以，使用 BootStrap 除了需要在 HTML 文檔中引入所需的資源文件外，別忘了加上上面兩個處理。

官方示例

BootStrap 4.x.x 版本，官方還沒有中文教程，3.x.x 的中文教程倒是很齊全了。但 4.x.x 版本和 3.x.x 版本差別還是蠻大的，首先，4.x.x 選用 Sass 來作為預處理器，選擇 flex 來實現它的柵格佈局系統等等。

反正，BootStrap 本質就就是一個框架，封裝了一系列的屬性樣式、組件給開發者使用，開發者只要瞭解有哪些屬性樣式可以用、有哪些組件可以用、效果怎麼樣、怎麼用就可以了，至於這些，就只能是一步步在實際開發中，一邊寫一邊查文檔來慢慢積累了。

所以，本篇也就不會去列舉各個組件效果、屬性樣式效果、還一個個去說明怎麼用。

接下去的內容，就是想著，能夠讀懂官方某個示例項目的代碼就足夠了。

選擇了官方的這個示例：Album

一步步來讀懂它的 HTML 代碼吧：

  • 第一步就是 HTML 的模板了，就上一小節中介紹的，需要進行 H5 聲明、meta 聲明、引入四個資源文件的那份模板；
  • 第二步，來看看 <body> 內的 <header> 代碼：
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>
<body>
<!--header 部分-->
<header>
    <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">About</h4>
                    <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <h4 class="text-white">Contact</h4>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">Follow on Twitter</a></li>
                        <li><a href="#" class="text-white">Like on Facebook</a></li>
                        <li><a href="#" class="text-white">Email me</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
            <a href="#" class="navbar-brand d-flex align-items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                <strong>Album</strong>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</header>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

看看效果：

目前的代碼里，我們完全沒有寫過 CSS，只在 HTML 文檔中，添加了 <header> 標簽內容，就能夠達到這樣的頁面效果了，所以，其實，BootStrap 已經封裝好了一大堆屬性樣式，我們只要在標簽上通過 class 將這些屬性樣式應用起來就可以了。

示例中使用的 class 很多，基本都是 BootStrap 封裝好的，我也沒想把所有用到的都搞清楚具體作用，只是想瞭解個大概，後續在使用中慢慢積累學習吧。

對於這個 <header> 的效果，我主要想理清楚兩點：

  • 展開和摺疊是怎麼實現的？
  • 展開時那些列表是如何實現的？

回過頭看上面的動圖，<header> 部分是作為導航欄，並且存在兩種狀態，摺疊和展開，所以兩種狀態對應著兩個 <div>，<header> 兒子標簽里剛好兩個 <div>；

看第一個 <div> 的 class：collapse bg-dark，collapse 是摺疊的意思，所以第一個 <div> 就是一開始被摺疊的容器，而控制這個 <div> 摺疊起來，也就是 BootStrap 提供的 collapse 起的作用了；

同層次的第二個 <div> 的 class：navbar navbar-dark bg-dark box-shadow，兩個 <div> 都有同一個 bg-dark，那麼這個其實就是用來設置背景的，因為展開後，其實 <header> 區域是由兩個 <div> 拼接起來的，只是背景色剛好一樣，看不出來而已。

所以，頁面渲染後，其實有個 <div> 被 collapse 摺疊起來了，此時頁面上只呈現第二個 <div> 內容而已，這個 <div> 的高度等樣式由 navbar、navbar-dark、bg-dark 這些決定。

那麼，點擊完按鈕後，第一個 <div> 為什麼會被展開了呢？

看一下那個按鈕：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

<button> 的子標簽 <span> 里的那個 navbar-toggler-icon 就是按鈕的 icon，而之所以點擊了後可以展開第一個 <div> 就是由其他屬性來控制。

首先，需要對當前這個按鈕添加 navbar-toggler 的 class，然後需要通過 data-target 指明控制展開的區域，這也是為什麼第一個 <div> 中會有一個 id 屬性，就是用來給這個按鈕控制它的。

所以，梳理一下，通過給 <div> 添加 collapse 的 class 可以讓這個區域摺疊隱藏起來，然後給它設置一個 id；然後給控制這個摺疊區域的按鈕添加 data-toggle 和 data-target 屬性，通過 id 來控制指定區域的摺疊和展開。

至於其他 class 則是各種樣式效果。

那麼，展開之後的區域里的列表控制項上，出現了一些例如：row，col-sm-8 之類的 class，這些又是什麼意思呢？

首先，container 來設定區域的大小，row 用來設置這個容器作為 flex 佈局，而彈性佈局中，一行會被劃分成 12 列，看張圖：

所以 col-sm-8 表示當顯示區域 >= 576px 時，該控制項占據 8 列，所以，同一個控制項里會出現諸如：col-sm-8 col-md-7 其實就是響應式佈局處理，在不同顯示區域大小時，呈現不同的大小。

而 py-4 是 pading-top 的意思，-4 表示不同的大小。

offset 表示在一個 12 列的一行里，前面需要空出幾列。

總之，官方教程里有對柵格系統 Grid 做了詳細的介紹，雖然是英文的，慢慢啃吧。

只有理清楚了這篇文章中介紹的 Grid，才能夠理解，怎麼寫可以達到響應式的效果。

我們再來看導航欄的一個效果，我再來分析下：

當顯示區域逐漸變小時，佈局從一行變成了兩行，這就是響應式佈局，來解釋下為什麼會有這個行為：

看看這兩個區域的代碼：

<div class="col-sm-8 col-md-7 py-4">
...
</div>

<div class="col-sm-4 offset-md-1 py-4">
...
</div>

上面說過，BootStrap 里的 Grid 將每一行劃分成 12 列，所以當顯示區域大小在 md 範圍，即 >= 768px 情況下，第一個 <div> 的 col-md-7 生效，它占據 7 列的寬度，第二個 <div> 的 offset-md-1 和 col-sm-4 都生效，所以它前面空著 1 列的寬度，然後它占據著 4 列的寬度，這加起來是不是剛好 12 列，所以在 >= 768 時，一行可以放下這兩個 <div>。

但當顯示區域逐漸縮小，當進入 sm 範圍，即 >= 576px 時，此時，第一個 <div> 的 col-sm-8 生效，所以它占據 8 列，而第二個 <div> 仍舊是 offset-md-1 和 col-sm-4 生效，那麼此時加起來一共 13 列，超過了 12 列，一行里已經不足夠放這兩個 <div> 了，根據 flex 的彈性佈局，此時超過的會自動換行。

以上，就是我對 Grid 的理解，也許有誤，如果是錯的，等後續用熟悉了再回來改，大伙看的時候，就當個借鑒看一看就好了。

分析到這裡，大概清楚了 Grid 還有導航欄的一些用法了，也大體清楚 BootStrap 的響應式原理好像是基於它的柵格系統，通過為不同控制項設置諸如 col-(sm/md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) 來達到在不同顯示區域下，不一樣的佈局效果，實現響應式佈局。

所以，剩餘的代碼不想看了，頭有點懵了，我對 BootStrap 唯一的感覺就是，學習成本好高，它提供太多東西了，封裝了太多的樣式、控制項，反而不知道從哪看。

也許，本來就不需要特意去看，學習 BootStrap 應該是當需要時，再來查閱文檔，然後逐步，慢慢積累對 BootStrap 的熟悉程度，而不是一開始就來看細看文檔，文檔當然要看，但快速過一遍，大概清楚提供了哪些東西就好了。

大家好，我是 dasu，歡迎關註我的公眾號（dasuAndroidTv），公眾號中有我的聯繫方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內容有幫助到你，可以轉載但記得要關註，要標明原文哦，謝謝支持~
dasuAndroidTv2.png


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ios開髮網絡篇—Get請求和Post請求 - 轉
    簡單說明：建議提交用戶的隱私數據一定要使用Post請求 相對Post請求而言，Get請求的所有參數都直接暴露在URL中，請求的URL一般會記錄在伺服器的訪問日誌中，而伺服器的訪問日誌是黑客攻擊的重點對象之一 用戶的隱私數據如登錄密碼，銀行帳號等 示例代碼 ...
  • iOS url出現特殊字元處理 -- stringByAddingPercentEncodingWithAllowedCharacters
    stringByAddingPercentEscapesUsingEncoding(只對 `#%^{}[]|\"<> 加空格共14個字元編碼，不包括”&?”等符號), ios9將淘汰，建議用 stringByAddingPercentEncodingWithAllowedCharacters 方法 ...
  • iOS 倒計時的一種實現
    1、view ...
  • ios開髮網絡篇—HTTP協議 - 轉
    一.URL 1.基本介紹 URL的全稱是Uniform Resource Locator(統一資源定位符) ，通過1個URL，能找到互聯網唯一的1個資源 ，URL就是資源的地址，位置，互聯網上的每個資源都有一個唯一的URL 2.URL中常見的協議 (1)HTTP： 超文本傳輸協議，訪問的是遠程的網路 ...
  • ios應用數據存儲方式(XML屬性列表-plist) - 轉
    一.ios應用常用的數據存儲方式 1.plist(XML屬性列表歸檔) 2.偏好設置 3.NSKeydeArchiver歸檔(存儲自定義對象) 4.SQLite3(資料庫,關係型資料庫,不能直接存儲對象,要編寫一些資料庫的語句,將對象拆分存儲) 5.Core Data(對象型的資料庫,把內部環節屏蔽 ...
  • 前端（七）之動畫與陰影
    動畫及陰影 一.拼接網頁 二.過渡 三.陰影 四.偽類實現邊框 ...
  • html常用標簽整理
    html文檔結構 1.<!doctype html>聲明為html5文件，必須是html文檔的第一行，在<html>標簽之前; 2.<html>、</html>是文檔開始和結束的標記,是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body); 3.<head>、</head>定義 ...
  • JaveScript 中使用 XSLT轉換XML文檔
    我們經常將數據存儲在XML 中，在展示的時候需要轉換為其它的形式，這裡介紹使用XSLT 對XML數據進行轉換。 要學習XSLT對XML的轉換，需要先瞭解三個文件。 第一個是存儲數據的XML文件:employees.xml 第二個是存儲XSLT的文件：employees.xslt 第三個是我們進行轉換 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類