2 Bootstrap4的基本架構
2.1 響應開發技術
1、響應式開發的概念
響應式網站是指可以兼容不同的終端，如筆記本電腦、安卓手機、蘋果手機和iPad等，不用爲每一個分辨率的設備做一個特定版本的網站。這種網站的開發方式就稱爲響應式開發。
2、響應式開發的流程
步驟1：將下載好並完成解壓縮的Bootstrap源碼文件中的CSS和JS文件夾拷貝到新建的項目中。
步驟2：添加標籤，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
</html>
步驟3：在HTML中引用bootstrap.min.css文件，代碼如下：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
步驟4：在引用Bootstrap中的JavaScript文件時，需要將jQuery文件也一同引入,代碼如下：
<!-- jQuery文件，務必在bootstrap.min.js之前引入 -->
<link rel="stylesheet" type="text/css" href="js/jquery-3.4.1.slim.min.js">
<!-- 再引入Bootstrap.min.js文件 -->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.js">
步驟5：解決IE9以下瀏覽器兼容的問題，可以通過在標籤的前面添加以下代碼來解決
<!--[if it IE 9]<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script><!endif]-->
3、響應式佈局結構
簡單來說，響應式佈局就是爲了能夠兼容多個平臺或不同的終端，從而避免開發人員進行重複的工作，所以響應式佈局結構的主要任務就是解決這個問題。在Bootstrap中最重要的屬性就是viewport，這個屬性可以控制網頁在不同終端顯示的效果。viewport相關屬性描述：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
width：設置viewport的寬度，爲一個正整數或“width-device”（表示整個屏幕的寬度）。
initial-scale：設置頁面的初始縮放值，爲一個浮點數
minimum-scale：允許用戶設置的最小縮放值，爲一個浮點數
maximum-scale：允許用戶設置的最大縮放值，爲一個浮點數
height：設置viewport的高度，很少使用
user-scalable：是否允許用戶進行縮放，值爲“no”或“yes”，“no”代表不允許，“yes”則代表允許
-->
4、設計響應式網站
頁面可以根據不同的終端進行自適應的網站叫作響應式網站。
（1）不同終端的頁面寬度
在進行開發響應式網站之前，我們需先對當前各種終端的頁面寬度（邏輯像素）進行一些簡單的瞭解。
◆ 移動端：320px，375px，414px……
◆ ipad端：768px，834px，1024px……
◆ PC端：1280px，1440px，1920px……
根據上面的數據，雖然還有其他頁面斯賓諾莎的終端，但是我們仍然可以將終端類型進行大致的劃分，比如，移動端是320px768px，ipad是768px1280px，PC端是1280px以上.
（2）media媒體查詢
media媒體查詢可以讓我們根據設備顯示器的特性爲其設定CSS樣式，由媒體類型和一個或多個檢測媒體特性的條件表達式組成。使用media媒體查詢可以在不改變頁面內容的情況下，爲特定的一些輸出設備定製顯示效果。
media媒體查詢的使用方法分爲兩種，既作爲CSS外鏈引入和直接在CSS中使用。
（a）作爲CSS外鏈引入，代碼如下：
<link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/style.css">
（b）直接在CSS中使用，代碼如下：
@media screen and (min-width: 768px) and (max-width: 1280px){
/*CSS屬性：CSS屬性值*/
}
media媒體查詢的擴展用法有如下幾種：
方法一：
@media only/not screen and (min-width: 768px) and (max-width: 1280px){ }
only screen代表只在彩色屏幕上生效，但是實際上網頁的運行肯定是在彩色屏幕上的，所以該屬性一般來說可以省略。
not的意思是屏幕寬度不在768px~1280px範圍內時生效。
方法二：
@media screen and (width: 768px),(width: 1280px){}
兩個寬度使用逗號隔開，代表"或者"的意思。
下面是一些常用的media媒體查詢會使用到的屬性，用法與前面的講解一樣。如下表所示。
| 屬性 | 全理屬性值 | 是否支持max/min說明 | |
|---|---|---|---|
| –width | 帶單位的寬度值 | 是 | 匹配瀏覽器的寬度 |
| height | 帶單位的 | 長度值 | 是 |
| aspect-radio | 比例值，如16/9 | 是 | 匹配瀏覽器的寬度和高度的比例值 |
| device-width | 帶單位的寬度值 | 是 | 匹配設備分辨率的寬度值 |
| device-height | 帶單位的長度值 | 是 | 匹配設備分辨率的高度值 |
| device-aspect-radio | 比例值，如16/9 | 是 | 匹配設備分辨率的寬度和高度的比例 |
2.2 Bootstrap的柵格佈局
Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口尺寸的增加，系統會自動分爲最多12列。
柵格實際上就是風格，所以頁面的佈局實際上是通過一系列的行和列來組合創建的，那麼在這裏需要學習以下兩個概念。
容器：“行（row）”，必須包含在"container（固定寬度）"或"container-fluid（100%寬度）"中，以便爲其賦予合適的排列（alignment）和內補（padding）。
rem：實際上是設置列的高度的屬性，rem的值是整數，代表的高度是rem值 *字體像素大小。
2.2.1 佈局原理
1、佈局容器
容器是窗口布局的最基本元素，我們推薦所有樣式都定義在.container或.container-fluid容器之中-- 這是啓用整個柵格系統必不可少的前置條件，它們分別對應選擇一個響應式的、固定寬度的容器，或者選擇一個流式自適應瀏覽器或容器最大合法寬度的窗口（意味着任何時候它的寬度總是100%）。
.container類用於固定寬度並支持響應式佈局的容器，容器可以被嵌套，但是大多數佈局並不需要這麼做（最少層次的嵌套構建出的網頁更優雅-譯者注）
.container-fluid 類，可以使div寬度擴展到整個寬度（如果沒有被其它CSS容器包含，則應是瀏覽器運行時的寬度，否則應是父容器中允許的最大寬度，一般視爲100%寬度）。
2、Bootstrap4柵格機制原理
Bootstrap的網格系統使用一系列div容器的行、列來佈局和對齊內容，不同於舊版3.0，4.0是完全基於flexbox流式佈局構建的，完全支持響應式標準。下面的示例，可以讓我們深入瞭解網格如何組合在一起。
代碼：
<div class="container">
<div class="row">
<div class="col-sm">
三分之一空間佔位
</div>
<div class="col-sm">
三分之一空間佔位
</div>
<div class="col-sm">
三分之一空間佔位
</div>
</div>
</div>
上面的例子使用BootStrap預定義的柵格系統，演示了在.container容器內建立了三個等寬的列，並且分別兼容在small(極窄寬度網頁)、medium(中等寬度網頁)、large(寬網頁)、extra large(超寬網頁)四種設備類型-即無論網頁寬度如何，這三個列都是橫着呈現的。
工作原理：
◆ 柵格系統提供了集中內容居中、水平填充網頁內容的方法，.container實現固定的寬度並居中呈現，.container-fluid實現全寬度，並和其它網格實現對齊(譯者注)。
◆ 行(.row)是列(.col-)的橫向組合和父容器(它們有效組織在.row下)，每列都有水平的padding值，用於控制它們之間的間隔，同時在負邊距的行上抵消，從而實現列中的所有內容在視覺上是左側對齊的體驗。
◆ 網頁開發者的呈現內容必須放置在列(.col-中，而且只有列可以是行的直接子元素，否則都是違法的(不可以在.col-以上添加呈現內容。
◆ 這一切都要感謝flexbox流式佈局，從而使我們不需要指定列的寬度(舊版Bootsrap3是採用嚴格寬度定義來實現的)就能實現網頁自動等寬排列，比如我們在.container中置入初始化的四個.col-sm就能實現各自25%寬度並左對齊形成一行的排列。
◆ .col-後面有不同的數字，如.col-sm-4或.col-xl-12，這些css類後面的數字用於表明定義div空間想要佔用列的數量，每行最多有12列。如果你想用三個等寬的列，則取12的三分之一，即.col-sm-4就是正確的(後文會有詳細的介紹)。
◆ .col-的width屬性(即列寬)是用百分比來表現和定義的，所以它們總是流式的，其尺寸大小受父元素的定義影響(這正是flexbox佈局的特徵，子元素的寬比和排列受父元素定義)。
◆ 列具有水平padding定義，用於創建列與列之的間隙。
◆ .row上帶有margin-left: -15px;margin-right: -15px;屬性，你可以在.row上上定義.no-gutters屬性，從而消除這個屬性，使頁面不會額外寬出30px，即:
<div class="row no-gutters"></div>
◆ 總共有五個柵格等級，每個響應式分界點隔出一個等級：特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大（大、特大也可以稱爲寬、超寬）.col-xl-。
◆ 柵格斷點的媒體查詢基於寬度的最小值，意味着它們應用到某一等級以及這一等級之上的所有（如.col-sm-4的的定義可以在小型、中型、寬、超寬設備上呈現，但不適用於能在超小型.col-sx上呈現）。
◆ 用戶不需要自行定義網格，可以直接使用系統預定義的柵格類（如.col-4）或採用Sass mixins來進行更多的語義標記滿足開發需要。
3、柵格選項
Bootstrap使用ems或rems來定義大多數屬性的規格大小、px用於全局層面網格斷點和容器寬度（因爲瀏覽器和設備的寬度是以像素px爲單位，且不會隨字體大小而變化）。其柵格選項如下表所示：
2.2.2 自動佈局列
利用柵格斷點特性進行排版，可以簡化列的大小，而不需要批定顯式的列寬，如強制寫爲：.col-sm-6。
1、等寬佈局 （.col）
效果：
代碼：
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
以上代碼，展示了一行兩列與一行三列的佈局，從xs（如上表如見，實際上並不存在xs這個空間命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有設備上都是等寬並佔滿一行，只要簡單的應用.col就可以完成。
2、等寬多行 (.w-100)
創建跨多個行的等寬列，方法是插入.w-100要將列拆分爲新行。.w100似乎與.clearfix有時可以達到同樣的網頁效果。
效果：
代碼：
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
3、設置一列寬度
Flexbox網格列的自動佈局還意味着您可以設置一列的寬度，並使同級列在其周圍自動調整大小。您可以使用預定義的網格類，網格混合或內聯寬度。請注意，無論中間列的寬度如何，其他列都會調整大小。
效果：
代碼：
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (更寬-12格中佔6格，其它6格另外兩列平分)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (更寬-12格中佔5格,其它7格另外兩列平分-不論奇偶都能達成)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
4、可變寬度的彈性空間
使用 col-{breakpoint}-auto 斷點方法，可以實現根據其內容的自然寬度來對列進行大小調整。
效果：
代碼：
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
2.2.3 佈局對齊
1、水平對齊
水平對齊是通過在行的
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
左對齊
</div>
<div class="col-4">
左對齊
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
居中對齊
</div>
<div class="col-4">
居中對齊
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
右對齊
</div>
<div class="col-4">
右對齊
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
間隔相等對齊
</div>
<div class="col-4">
間隔相等對齊
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
兩端對齊
</div>
<div class="col-4">
兩端對齊
</div>
</div>
</div>
2、垂直對齊
和水平對齊類似，垂直對齊是通過添加".align-items-類型"類實現的，但是在垂直佈局中只有start、center和end三種類型。代碼如下：
<div class="container">
<div class="row align-items-start">
<div class="col">
靠上對齊
</div>
<div class="col">
靠上對齊
</div>
<div class="col">
靠上對齊
</div>
</div>
<div class="row align-items-center">
<div class="col">
上下居中對齊
</div>
<div class="col">
上下居中對齊
</div>
<div class="col">
上下居中對齊
</div>
</div>
<div class="row align-items-end">
<div class="col">
靠下對齊
</div>
<div class="col">
靠下對齊
</div>
<div class="col">
靠下對齊
</div>
</div>
</div>
2.2.4排序和偏移
1、排序
在進行Bootstrap的柵格佈局時，我們可以通過添加".order-數值"這個類進行柵格排序，提供了.order-1到.order-12個級別的順序，還可以使用.order-first，快速更改一個順序到最前面，代碼如下：
<div class="container">
<div class="row">
<div class="col">
第1列-未定義序號，位置不變。
</div>
<div class="col order-12">
第2列，定義order-12序號，排最後。
</div>
<div class="col order-1">
第3列，定義order-1序號，排在第1列，但受第1列位置不變影響，排到第2列
</div>
<div class="col order-first">第4列，快速更改順序到最前面</div>
</div>
2、偏移
可以使用兩種方式進行列偏應：
（1）使用響應式的.offset-*柵格偏移方法。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
（2）使用邊界處理實用程序，它內置了諸如.ml-、.p-、.pt-*等實用排工具。
在BootStrap V4中，你可以使用.ml-auto與.mr-auto來強制隔離兩邊的距離，實現類水平隔離的效果。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4
">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3
">.col-md-3 .ml-md-auto</div>
<div class="col-md-3
">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto
">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>