柵格系統

下面這張圖是Bootstrap對柵格系統有關係數的規定

什麼是柵格體統?

柵格系統是Bootstrap提供的移動優先的網格系統, 各個分界點如上: 576px 720px 992px 1200px

一行最多盛放12列, 從上圖中也能看出一共是5種響應尺寸(分別對應不同的尺寸的螢幕)

其實大白話講 : 就是當我們用滑鼠拖動瀏覽器左右移動時, 瀏覽器的可視區域就會隨之放大和縮小, 這時瀏覽器可視區域就會在Bootstrap規定的分界點中移動, 這時Bootstrap會捕獲當前瀏覽器可視區域的大小, 然後加持上不同的顯示效果

比如: html如下

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-xl-3 col-lg-6" style="background: #ff6262">熾焰</div>
        <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰藍</div>
        <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div>
        <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江戶</div>
    </div>
</div>
 

• class=row 表示一行
• class=col 表示一個單元格

col 放置在 row下面

效果圖

解釋一下: class=col-xl-3 時, 對應著上圖中的 Extra Large 翻譯成人話就是: 當瀏覽器可視區域的大小, 大於1200px時就按照 class = col-xl-3 佈局, 上面我把瀏覽器的可視區域調整到1201px, 所以我就說, 我的瀏覽器的可視域在Extra Large 區間裡面, 那麼.col-xl 就會生效 ; 那具體怎麼生效呢? Bootstrap規定每行12列, 上面四個div , ,每個都有class = col-xl-3 也就是3*4整好等於12 , 因此整好平鋪開

縮小一點呢?

我把瀏覽器的可視區域調整到 1198px , 現在小於了1200px, 但是 1198px 大於992px , 所以我就說, 當前狀態落在了 Large 區間, 於是 .col-lg生效, 上面我們配置是 col-lg-6 經過計算每個兩個div可以佔滿一行, 多餘的被擠到下一行

比992px再小呢?

其實類比這 col-xl 看就行, 用大白話將就是說, 當瀏覽器的可視區域大於1200px時, 按照 col-xl 佈局, 如果比1200px小了, 卻大於992px, 就按照比較小的 col-lg 佈局, 如果比992px還小了, 類退就按照更小的col-md 佈局, 如果我們沒寫的話, 就按照最小的佈局, 此時, 單個col 會佔滿一行, 各個col會相互往下擠

確實會存在往下擠的情況, 不信你看

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-xl-3 col-lg-8" style="background: #ff6262">熾焰</div>
        <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰藍</div>
        <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div>
        <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江戶</div>
    </div>
</div>

效果:

如果不寫 中間的sm md lg 或者xl呢?

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col-3 " style="background: #ff6262">熾焰</div>
        <div class="col-3 " style="background: #5b9df9">冰藍</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
    </div>
</div>

效果就像下面這樣, 既然不限制任何分界點, 那麼無論瀏覽器的可視區間多大, 始終佔4個格 , 當然每行最多仍然是12, 多出來的依然會被擠下去

等寬佈局 col

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
        <div class="col" style="background: #2c7d59">青草</div>
    </div>
</div>

就像上面程式碼這樣, 每行class=col 可實現等寬佈局, 怎麼個等寬法呢? 其實還是12列, 只不過是所有的 col 平分12列, 看看下面的效果圖, 自然就明白了 , 而且此時無論多少個col , 全部等寬分佈在一個row裡面

單獨設定一列的寬度: col-6

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col-6" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

效果圖

設定可變寬度:col-auto

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col-auto" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

可變寬度就是說, 這個單元格里面的內容多大, 它就多大, 就像下面這樣

可變寬度+斷點

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col-xl-auto" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

css樣式如下可以對比下面的方便理解:

class = col-xl-auto
# 相當於下面的累加
class = col  # 等寬佈局
class = col-xl # 當瀏覽器的可視區域大於1200px時生效
class = col-auto # 可變寬度

用白話解析一下, 就是說, 當瀏覽器的可視區域大於1200px時, class=col-xl-auto就會生效, 此時的效果就像下面這樣, 冰藍處於可變長度大小

但是, 當我的瀏覽器的可視區域的長度小於 1200px時, 就會像下面這樣: 用大白話解釋下: 當我瀏覽器的可視區域小於1200px時, class=col-xl-auto 就會失效, 其實並不是真的失效了, 而是按照比它小的那個分界區間重新劃分佈局, 可以看上面的第一個圖, 比如sm lg 都比他小, 但是我沒有新增這些屬性 , 於是它就按照最小的 樣式來佈局, 於是讓冰藍佔滿一行, 然後赤焰就被擠下去了, 下面的青草和江戶兩者都是 class=col , 平分12個格

垂直對齊:

對齊: 在row上新增 align-items-start / center / end

    <!--.row限制一行-->
    <div class="row align-items-start" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>

頂部對齊: align-items-start

居中對齊: align-items-center

同理 底部對齊應該能想出來了

同樣可以新增上斷點:

如下的例項: align-items-xl-center 新增上了xl斷點,

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row align-items-xl-center" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

用大白話講一下就是說, 當我的瀏覽器的可視介面大於1200px時, row中的四個div會居中對齊

如果我的瀏覽器的可是介面長度小於1200px了, 那麼 class=align-items-xl-center 也就失效了, 於是 row裡面的四個div按照自己預設的樣式進行佈局如下:

給某個col 單獨新增對齊的樣式:

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row align-items-xl-center" style="border:3px solid;height: 100px">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col align-self-end" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

如上給第二列新增底部對齊的樣式

水平對齊:

新增樣式 justify-content-start (左對齊)/ center (居中對齊) / end (右對齊) / around (等距對齊) / between (兩邊對齊)

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-end" style="border:3px solid;height: 100px">
        <div class="col-3" style="background: #ff6262">熾焰</div>
        <div class="col-3" style="background: #5b9df9">冰藍</div>
        <div class="col-3" style="background: #2c7d59">青草</div>
    </div>
</div>

注意點, 就是說, 如果想看到水平對齊的效果的話, 前提是, 當前row裡面的 col 不要把12列佔滿, 試想一下 ,如果他把12列全部佔滿了, 肯定是看不看水平移動的效果的, 因此我上面的row裡三個div的 col都為3

右對齊的效果如下:

同樣可以配合斷點使用

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-xl-end" style="border:3px solid;height: 100px">
        <div class="col-3" style="background: #ff6262">熾焰</div>
        <div class="col-3" style="background: #5b9df9">冰藍</div>
        <div class="col-3" style="background: #2c7d59">青草</div>
    </div>
</div>

配置斷點使用, 還是那個套路, 就是我們在上面新增的斷點很明顯就是 xl , 意思就是說只有當我的瀏覽器的可視長度大於1200px時,class= justify-content-xl-end 水平右對齊生效 , 效果如下:

但是當我的瀏覽器的可視長度小於1200px時, class= justify-content-xl-end 失效, 於是row裡面的四個div按照積極預設的屬性佈局, 就成了下面的樣子

換行

<div class="container-fluid">
    <!--.row限制一行-->
    <div class="row">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="w-100"></div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
        <div class="col" style="background: #2c7d59">青草</div>
    </div>
</div>

可以使用 class = w-100實現換行

效果圖

間距溝槽的清除

還是下面的這段html

<div class="container">
    <!--.row限制一行-->
    <div class="row justify-content-end">
        <div class="col" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="col" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

效果如下: 漢字和div兩邊是存在一個間距的

通過屬性 .no-gutters 去除這個間距

    <div class="row no-gutters">

重排列

新增 order-number 可以實現重排序

還是這段html

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col order-0" style="background: #ff6262">熾焰</div>
        <div class="col" style="background: #5b9df9">冰藍</div>
        <div class="col order-2" style="background: #2c7d59">青草</div>
        <div class="col" style="background: #8E2DE2">江戶</div>
    </div>
</div>

order的預設是0 , order-number number越大, 整體就越往後排, 上面我 設定赤焰的order-0 它的順序沒變, 將青草設定為 order-2 它就排在了最後一位上, 效果如下

此外, 如果想直接排在最前面, 可以設定 order-first

偏移

.offset-number ; number是偏移的格子數

還是這段html

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col order-0" style="background: #ff6262">熾焰</div>
        <div class="col offset-3" style="background: #5b9df9">冰藍</div>
        <div class="col " style="background: #2c7d59">青草</div>
    </div>
</div>

我設定冰藍的偏移量是3個單位

效果如下:

同樣, 偏移可以配合斷點使用,

佈局

可以使用 ml-auto 或者 ar-auto 進行佈局

還是這段html

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col-3 " style="background: #ff6262">熾焰</div>
        <div class="col-3 ml-auto" style="background: #5b9df9">冰藍</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
    </div>
</div>

當我們設定ml-auto 其實就是 margin-left-auto , 格子的左邊自動對齊, 格子被擠到了右邊

效果如下:

列巢狀

<div class="container">
    <!--.row限制一行-->
    <div class="row no-gutters">
        <div class="col-3 " style="background: #ff6262">熾焰</div>
        <div class="col-3 " style="background: #5b9df9">冰藍</div>
        <div class="col-3 " style="background: #2c7d59">青草</div>
        <div class="col-3 " style="background: #2c7d59">
            <div class="row" >
                <div class="col-xl-8" style="background: #8E2DE2">江戶</div>
                <div class="col-xl-4" style="background: #5b9df9">冰藍</div>
            </div>
        </div>
    </div>
</div>

我們在一個row裡面的 col中, 可以巢狀row , 同樣可以結合 斷點使用

效果圖:

並且, 當我的瀏覽器的寬度小於1200px時, xl 失效, 每個col都單獨佔行, 最外面的row的高度也會被撐開. 如下

響應式的分界點

  <!--.row限制一行-->
    <div class="row no-gutters">
        <div id="myP">Bootstrap</div>
    </div>

可以通過 @media設定響應式的分界點

        /*當min-width大於768px時生效*/
        @media (min-width: 768px) {
            #myP{
                font-size: 32px;
                color: #ffc107;
            }
        }

更多的使用方式:

        @media all {  }
        @media (min-width: 576px)and(max-width: 767px) {  }
        @media (min-width: 768px)and(max-width: 991px) {  }
        @media (min-width: 992px)and(max-width: 1199px) { }
        @media (min-width: 1200px) { }

排版

Bootstrap提供了 .h1 ~ .h6 六種class屬性可以使p標籤看起來像h1, 這種標題標籤效果一樣

<div class="container">
    <!--.row限制一行-->
    <div class="no-gutters">
        <div class="h1">Bootstrap</div>
        <h1>Bootstrap</h1>
    </div>
</div>

效果圖:

• 自定義標題和副標題

使用 <small> </small> 小號字型

<div class="container">
    <!--.row限制一行-->
    <div class="no-gutters">
        <div class="h1">
            Bootstrap
            <small class="text-muted">Bootstrap</small>
        </div>
    </div>
</div>

效果:

更大的標題

    <div class="no-gutters">
        <div class="h1">Bootstrap</div>
        <div class="h2">Bootstrap</div>
        <div class="h3">Bootstrap</div>
        <div class="h4">Bootstrap</div>
        <div class="display-1">Bootstrap</div>
        <div class="display-2">Bootstrap</div>
        <div class="display-3">Bootstrap</div>
        <div class="display-4">Bootstrap</div>
    </div>

突出顯示某一段

    <div class="no-gutters">
        <div>Bootstrap</div>
        <div class="lead">Bootstrap</div>
        <div>Bootstrap</div>
        <div>Bootstrap</div>
    </div>

文字內聯元素

  <div class="no-gutters">
        <p><mark>Bootstrap</mark></p>
        <p class="mark">Bootstrap</p>
        <p><small>小號字型</small></p>
        <p><del>刪除線</del></p>
        <p><s>刪除線</s></p>
        <p><ins>下劃線</ins></p>
        <p><u>下劃線</u></p>
        <p><strong>加粗</strong></p>
        <p><b>加粗</b></p>
        <p><em>斜體</em></p>
        <p><i>斜體</i></p>
    </div>

效果:

縮略語

abbr 標籤可以實現縮略語的功能 (abbreviation)

    <div class="no-gutters">
        <p><abbr title="this is Bootstrap"></abbr>Bootstrap</p>
    </div>

引用型別

主要有下面的幾個樣式 .blockquote .blockquote-footer

cite標籤用於引用和文獻

<div class="no-gutters">
<blockquote  class="blockquote text-right">
    <p class="mb-0"> 自己不能勝任的事情，切莫輕易答應別人，一旦答應了別人，就必須實踐自己的諾言。</p>
    <footer class="blockquote-footer">某出版社 <cite title="Source Title">華盛頓</cite></footer>
</blockquote>
</div>

效果如下:

列表

可以使用 .list-unstyled ul li列表上預設的 list-style樣式, 但是不會影響到 li中 巢狀的ul li

     <ul class="list-unstyled">
         <li>Bootstrap</li>
         <li>Bootstrap</li>
         <li>Bootstrap</li>
     </ul>

列表的分行和多行並排

混合使用 .list-inline 和 .list-inline-item

<ul class="list-inline">
    <li class="list-inline-item">Bootstrap</li>
    <li class="list-inline-item">Bootstrap</li>
    <li class="list-inline-item">Bootstrap</li>
</ul>

水平表格

    <dl class="row">
        <dt class="col-sm-4">標題</dt>
        <dd class="col-sm-8">內容</dd>

        <dt class="col-sm-4 text-truncate">我的標題我的標題我的標題我的標題我的標題我的標題我的標題</dt>
        <dd class="col-sm-8">內容</dd>

        <dd class="col-sm-8">
            <dl class="row">
                <dt class="col-sm-4">姓名</dt>
                <dd class="col-sm-8">張三</dd>
            </dl>
        </dd>
    </dl>

.dl 定義一個水平表格

.dt 定義水平表格的標題

.dd 定義水平表格的內容

.text-truncate 當文字過長時, 可以階段, 用 ... 顯示

效果圖:

程式碼塊

code 標籤中有什麼內容, 就會在瀏覽器上顯示什麼內容, 包括換行, 空格等等

    <div class="row">
        <pre>
            <code>
                Hello
                ...
                world
            </code>
        </pre>
    </div>

Var變數

var標籤會讓表示式看起來更加優雅

 y= mx+b <br>
<var>y</var> = <var>mx</var> + <var>b</var>

標識鍵盤輸入事件

      <kbd>cd</kbd>
      <kbd>ctrl</kbd>

相關推薦