Bootstrap4柵格佈局
Bootstrap架構內置了一套響應式網格的佈局系統，網格佈局實際上就是把網頁分成一定數量的欄數或者叫做網格，Bootstrap4的網格系統就是把網頁分成12欄，如果你想讓網頁中的某一元素佔用一定數量的欄數的寬度，你可以在該元素上添加一個類似於.col-
*特定的類。
1 柵格容器
容器是Bootstrap中最基本的佈局元素，在使用我們的默認網格系統時，容器是必需的。Bootstrap4提供瞭如下容器：
.container：任意視窗下，添加補丁，固定尺寸容器
.container-fulid：任意視窗下，100%寬度容器
.container-[sm | md | lg | xl] ：100%顯示到指定視窗時，固定尺寸容器
2 柵格佈局的步驟
步驟1：聲明柵格佈局容器
<div class="container"></div>
步驟2：在容器中聲明行
<div class="container">
<div class="row"></div>
</div>
步驟3：在行中聲明列
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
3 關於列
3.1 設置列寬
3.1.1 平均分配柵格
.col :在所有視窗下平均分配柵格數
.col-[sm | md | lg | xl]：指定視窗及以上，平均分配柵格。
請編輯以下代碼，在不同視窗下顯示頁面效果，然後修改.col類名爲.col-sm，.col-md，.col-lg，.col-xl類名，理解Bootstrap架構的視窗斷點。
<div class="container">
<div class="row">
<div class="col border">第1列</div>
<div class="col border">第2列</div>
<div class="col border">第3列</div>
</div>
</div>
在Bootsrap4中，當我們平均分配柵格數的時候，可以在行標籤添加如下類，可以指定該行所顯示的列數。
.row-cols-*：任意視窗，該行所顯示的列數。*代表的是1 – 6這六個數字。
.row-cols-[ sm | md | lg | xl ]-*：指定視窗及以上，該行所顯示的列數
請編輯以下代碼，在不同視窗下顯示頁面效果，然後修改`.row-cols-*`類名爲`.row-cols-sm-*`，`.row-cols-md-*`，`.row-cols-lg-*`，`.row-cols-xl-*`類名，在不同視窗下顯示頁面的效果。
<div class="container">
<div class="row row-cols-2">
<div class="col border">第1列</div>
<div class="col border">第2列</div>
<div class="col border">第3列</div>
<div class="col border">第4列</div>
</div>
</div>
3.2.2 指定列寬
.col-[n] 在任何尺寸下，佔用指定的列數
.col-[sm | md | lg | xs]-[n] 在指定的視窗及以上，佔用指定的列數
請編輯以下代碼，在不同視窗下顯示頁面效果，然後修改.col-*類名爲.col-sm-*，.col-md-*，.col-lg-*，.col-xl-*類名，再在不同視窗下顯示頁面效果。
<div class="container">
<div class="row">
<div class="col-4 border">第1列</div>
<div class="col-8 border">第2列</div>
</div>
</div>
3.2.3 可變的列寬
根據內容的自然寬度調整列的大小。
.col-auto 在任何尺寸下，都根據內容來調整列的大小
.col-[ sm | md | lg | xl ]-auto 在指定尺寸及以上，根據內容來調整列的大小
請編輯以下代碼，在不同視窗下顯示頁面效果，然後修改.col-auto類名爲.col-sm-*auto，.col-md-auto，.col-lg-auto，.col-xl-auto類名，再在不同視窗下顯示頁面效果。
<div class="container">
<div class="row">
<div class="col border">1</div>
<div class="col border col-auto">bootstrap v4.0版本</div>
<div class="col border">3</div>
</div>
</div>
3.3 列拆分
3.3.1 自動拆分
在Bootstrap中，如果在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將作爲一個整體單元被另起一行排列。編輯如下代碼，體會自動拆分。
<div class="container">
<div class="row">
<div class="col-6 border">1</div>
<div class="col-6 border">2</div>
<div class="col-6 border">3</div>
</div>
</div>
3.3.2 手動拆分
在Bootstrap4中，提供了.w-100類，在需要拆分的位置，添加類名爲.w-100，則可以自動換行，拆分列。編輯一下代碼，體會.w-100的作用。
<div class="container">
<div class="row">
<div class="col-3 border">1</div>
<div class="col-3 border">2</div>
<div class="w-100"></div>
<div class="col-3 border">3</div>
<div class="col-3 border">4</div>
</div>
</div>
3.3.3 響應式拆分
爲類名爲.w-100拆分列的div添加.d-none和.d-[sm | md | lg | xl ]-block，我們可以進行指定視窗及以上的進行響應式拆分
<div class="container">
<div class="row">
<div class="col-3 border">1</div>
<div class="col-3 border">2</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-3 border">3</div>
<div class="col-3 border">4</div>
</div>
</div>
3.4 列排序
爲所在列添加.order 類可以爲該列排序，在Bootstrap4中有以下相關的類名。
.order-[n]：n爲0 - 12，數字越小越優先。在任何視窗下，都遵循這個順序
.order-[sm | md | lg |xl ]-[n]: 在指定視窗及以上，遵循這個順序
.order-first 在任何視窗下，都放在第一列
.order-[ sm | md | lg | xl ]-first：在指定視窗及以上，放在第一列
.order-last :在任何視窗下，都放在最後一列
.order-[ sm | md | lg | xl ]-last：在指定視窗及以上，放在最後一列
編寫以下代碼，體會爲其中一列添加.order類時，列是如何排序的。
<div class="container">
<div class="row">
<div class="col-3 border">1</div>
<div class="col-3 border order-1">2</div>
<div class="col-3 border">3</div>
<div class="col-3 border">4</div>
</div>
</div>
編寫以下代碼，體會order-[n]中，數字越小越優先的原則，並修改指定視窗下排序。
<div class="container">
<div class="row">
<div class="col-3 border order-4">1</div>
<div class="col-3 border order-8">2</div>
<div class="col-3 border order-2">3</div>
<div class="col-3 border order-0">4</div>
</div>
</div>
編寫以下代碼，體會.order-first和.order-[n]的權重，並修改指定視窗下的排序。
<div class="container">
<div class="row">
<div class="col-3 border order-4">1</div>
<div class="col-3 border order-0">2</div>
<div class="col-3 border order-first">3</div>
<div class="col-3 border order-1">4</div>
</div>
</div>
編寫以下代碼，體會.order-last和.order-[n]的權重，並修改指定視窗下的排序。
<div class="container">
<div class="row">
<div class="col-3 border order-0">1</div>
<div class="col-3 border order-12">2</div>
<div class="col-3 border order-last">3</div>
<div class="col-3 border order-1">4</div>
</div>
</div>
3.5 列偏移
在Bootstrap4中，可以使用以下類將列向右側偏移：
.offset-*：任意視窗下，向右偏移*號列
.offset-[sm | md | lg | xl ]- * ：在指定視窗及以上，向右偏移*號列
編寫以下代碼，在不同視窗下顯示頁面效果，並體會偏移原則：
<div class="container">
<div class="row">
<div class="col-3 border">1</div>
<div class="col-3 border offset-3">2</div>
<div class="col-3 border">3</div>
<div class="col-3 border offset-lg-3">4</div>
</div>
</div>
3.6 列對齊
3.6.1 水平對齊
在Bootstrap4中，爲.row類所在的行標籤設置以下類，可以設置該行所在的列進行對齊方式的設置
.justify-content-start,.justify-content-[sm | md | lg | xl ]-start：左對齊
.justify-content-end,.justify-content-[sm | md | lg |xl ]-end：右對齊
.justify-content-center,.justify-content-[sm | md | lg |xl ]-center：居中對齊
.justify-content-around,.justify-content-[sm | md | lg |xl ]-around：分散對齊
.justify-content-between,.justify-content-[sm | md | lg |xl ]-between：兩端對齊
編輯如下代碼，並在不同的視窗下顯示頁面的效果，並修改對齊方式，完成所有對齊方式的設置。
<div class="container">
<div class="row justify-content-start">
<div class="col-2 border">1</div>
<div class="col-2 border">2</div>
<div class="col-2 border">3</div>
</div>
</div>
3.6.2 垂直對齊
在Bootstrap4中，爲.row類所在的標籤設置如下類，可以設置列所在行垂直方向的對齊方式。
.align-items-start,.align-items-[sm | md | lg |xl ]-start：垂直方向靠上對齊
.align-items-end,.align-items-[sm | md | lg |xl ]-end：垂直方向靠下對齊
.align-items-center,.align-items-[sm | md | lg |xl ]-center：垂直方向居中對齊
編輯如下代碼，並在不同的視窗下顯示頁面的效果，並修改對齊方式，完成所有對齊方式的設置。
<div class="container">
<div class="row border align-items-center" style="height: 100px;">
<div class="col-4 border">1</div>
<div class="col-4 border">2</div>
<div class="col-4 border">3</div>
</div>
</div>
3.6.3 單個元素對齊
在Bootstrap4中，爲列標籤設置如下類，可以設置該列在所在行垂直方向的對齊方式。
.align-self-start，.align-self-[sm | md | lg |xl ]-start:垂直方向靠上對齊
.align-self-end，.align-self-[sm | md | lg |xl ]-end：垂直方向靠下對齊
.align-self-center，.align-self-[sm | md | lg |xl ]-center：垂直方向居中對齊
編輯如下代碼，並在不同的視窗下顯示頁面的效果，並修改對齊方式，完成所有對齊方式的設置。
<div class="container">
<div class="row" style="height: 300px;">
<div class="col-4 border align-self-start">1</div>
<div class="col-4 border align-self-center">2</div>
<div class="col-4 border align-self-end">3</div>
</div>
</div>