柵格系統
下面這張圖是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 或者 mr-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>
