快速掌握Bootstrap布局

布局基礎

1 布局容器

Bootstrap中定義了兩個容器類，分別為.container和.container-fluid。容器是bootstrap中最基本的布局元素，在使用默認網格系統時是必需的。

Container容器和container-fluid容器最大的不同之處在於寬度的設定。
Container容器根據屏幕寬度的不同，會利用媒體查詢設定固定的寬度，當改變瀏覽器的大小時，頁面會呈現階段性變化。意味着Container容器的最大寬度在每個斷點都發生變化。

2 響應斷點

/ 超小設備（xs，小於576像素）。
// 沒有媒體查詢"xs"，因為在 Bootstrap 中是默認的。
// 小型設備 (sm，576像素及以上)
@media (min-width: 576像素) { ... }
// 中型設備（md，768像素及以上）
@media (min-width: 768像素) { ... }

// 大型設備（lg，992像素及以上）
@media (min-width: 992像素) { ... }
// 超大型設備（xl，1200像素及以上）
@media (min-width: 1200像素) { ... }

由於在Sass中編寫源CSS，因此所有的媒體查詢都可以通過Sass mixins獲得：
// xs斷點不需要媒體查詢，因為它實際上是'@media (min-width: 0){…}'
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

3 z-index

一些bootstrap4組件使用了z-index樣式屬性。z-index屬性設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。Bootstrap4利用該屬性來安排內容，幫助控制布局。
Bootstrap4中定義了相應的z-index標度，對導航、工具提示和彈出窗口、模態框等進行分層。
$zindex-dropdown:          1000 !default;
$zindex-sticky:             1020 !default;
$zindex-fixed:              1030 !default;
$zindex-modal-backdrop:     1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:            1060 !default;
$zindex-tooltip:             1070 !default;
提示：不推薦自定義z-index屬性值，如果改變了其中一個，可能需要改變所有的。

網格系統

1 網格選項

設備從小到大排序xs(小於576像素),sm(大於等於576像素)，md(大於768等於像素)，lg(大於等於992像素)，xl(大於等於1200像素)

2 自動布局列

1. 等寬列

div class="row">
    <div class="col-8 border py-1 bg-light1">二分之一</div><!--col有多少格,總共12格，col后可加數字; border容器的邊框 py-上下內邊距 背景色-->
    <div class="col border py-3 bg-light1">二分之一</div>
</div>
<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
</div>

2. 設置一個列寬

<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>

3. 可變寬度內容

<div class="row justify-content-md-center">
    <!--設備從小到大排序xs(小於576像素),sm(大於等於576像素)，md(大於768等於像素)，lg(大於等於992像素)，xl(大於等於1200像素)-->
    <div class="col col-lg-2 border py-3 bg-light">左</div>
    <!--col-md-auto border py-3 bg-light這個為什么這樣分布呢，可看下視頻，2個相同的大的布局，包含1個小的布局，有啥技巧么-->
    <div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px時，可根據內容自動調整列寬度）</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>

4. 等寬多列（可研究）

div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="w-100"></div><!--class="w-100"可把一行的元素分成2行-->
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>

3 響應類

1. 覆蓋所有設備

<div class="row">
    <div class="col-8 border py-3 bg-light">col-8</div>
    <div class="col-4 border py-3 bg-light">col-4</div>
</div>

2. 水平排列

<!--在sm（≥576px）型設備上開始水平排列-->
<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在md（≥768px）這里的px代表的是屏幕頁面的寬度，型設備上開始水平排列-->
<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>

3. 混合搭配（每一個列都進行不同的設備定義，還可以添加 sm,lg,xs等設備）

<!--在小於md型的設備上顯示為一個全寬列和一個半寬列，在大於等於md型設備上顯示為一列，分別占8份和4份-->
<div class="row">
    <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
</div>
<!--在任何類型的設備上，列的寬度都是占50%-->
<div class="row">
    <div class="col-6 border py-3 bg-light">.col-6</div>
    <div class="col-6 border py-3 bg-light">.col-6</div>
</div>

4. 刪除邊距

<div class="row no-gutters"> <!--采用 no-gutters刪除邊距；Bootstrap默認的網格和列間有間距，一般是左右-15px的margin或padding -->
    <div class="col-12 col-sm-6 col-md-8 py-3 border bg-light">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4 py-3 border bg-light">.col-6 .col-md-4</div>
    <!--很小，就是兩列直接的距離-->
</div>

5. 列包裝
   如果一行放置超過12列，則每組額外列將作為一個單元包裹到新行

<div class="row">
    <div class="col-9 py-3 border bg-light">.col-9</div>
    <!--如果一行放置超過12列，則每組額外列將作為一個單元包裹到新行上-->
    <div class="col-4 py-3 border bg-light">.col-4<br>因為9 + 4 = 13 >12，4列寬的div被包裝到一個新行上，作為一個連續的單元。</div>
    <div class="col-6 py-3 border bg-light">.col-6<br>后續的列沿着新行繼續排列。</div>
</div>

4 重排序

1. 排列順序
   .order-1到.order-12等12個級別的順序;還有order-first更改順序到最前面；order-last更改順序到最后面

<div class="row">
    <!--order-*類選擇符可對空間進行可視化排序 ，沒有定義order類的元素，將默認排在前面-->
    <div class="col order-12 py-3 border bg-light">
        order-12
    </div>
    <div class="col order-1 py-3 border bg-light">
        order-1
    </div>
    <div class="col order-6 py-3 border bg-light">
        order-6
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
</div>

2. 列偏移
   在bootstrap中可以使用兩種方式進行列偏移：
   使用響應式的.offset-類偏移方法。
   使用邊距通用樣式處理，它內置了諸如.ml-、.p-、.pt-等實用工具。
   .offset-*類偏移方法

<div class="row">
    <div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
    <div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
</div>

3. 使用邊距通用樣式處理，它內置了諸如.ml-、.p-、.pt-*

<div class="row">
    <!--ml* p-* pt-* -->
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>

5 列嵌套（不懂）

如果想在網格系統中將內容再次嵌套，可以通過添加一個新的.row元素和一系列.col-sm-元素到已經存在的.col-sm-元素內。被嵌套的行（row）所包含的列（column）數量推薦不要超過12個。

<div class="row">
    <div class="col-12 col-lg-6"> <!--col-12 col-lg-6使用了這個嵌套，固定了下面的div在一定像素下就是一行-->
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/b.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3"><!--pl-3是文字離圖片的邊據-->
                李白詩歌的語言，有的清新如同口語，有的豪放，不拘聲律，近於散文，但都統一在“清水出芙蓉，天然去雕飾”的自然美之中。
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/c.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">
                在杜甫中年因其詩風沉郁頓挫，憂國憂民，杜甫的詩被稱為“詩史”。他的詩詞以古體、律詩見長，風格多樣，以“沉郁頓挫”四字准確概括出他自己的作品風格，而以沉郁為主。
            </div>
        </div>
    </div>
</div>

布局工具類

1 display塊屬性定義

使用bootstrap的實用程序來響應地切換display屬性的值，將其與網格系統、內容或組件混合使用，以便在特定的視圖中顯示或隱藏它們

2 Flexbox選項

Bootstrap 4是基於Flexbox流式布局，大多數組件都支持Flex流式布局，但不是所有元素的display都是默認就啟用display:flex屬性的(因為那樣會增加很多不必要的DIV層疊，並會影響到瀏覽器的渲染)。
如果需要將display: flex添加到元素中，可以使用.d-flex或響應式變體(例如.d-sm-flex)。需要這個類或display值來允許使用額外的flexbox實用程序來調整大小、對齊、間距等。

3 外邊距和內邊距

使用外邊距和內邊距實用程序來控制元素和組件的間距和大小。Bootstrap 4包含一個用於間隔實用程序的5級刻度，基於1rem值默認$spacer變量。為所有視圖選擇值(例如，.mr-3用於右邊框:1rem)，或為目標特定視圖選擇響應變量(例如，.mr-md-3用於右邊框:1rem，從md斷點開始)。

4 切換顯示和隱藏

如果不使用display對元素進行隱藏（或無法使用時），可以使用visibility這個BootStrap 可見性工具來對網頁上的元素進行隱藏，使用它后網頁元素對於正常用戶是不可見的，但元素的寬高占位依然有效。

記錄閱讀
《Bootstrap從入門到項目實戰》的筆記