Boostrap中柵格布局的實現(xiàn)
添加bootstrap核心樣式文件：
<!-- Bootstrap核心css文件-->
<link rel="stylesheet" >
一、等寬列
1、“.container”是一個響應式的、固定寬度的容器。在如下示例中可以看出，整個div盒子是居中的，并且距屏幕兩邊有一定寬度的空白。
2、“.mb-4”中的m指的是margin（外邊距），同理，"pb-4"中的p指的是padding（內(nèi)邊距）；其中的b指的是：b - 用來設置margin-bottom或者padding-bottom的距離；"py-3"中的y指的是：用來設置*-top和*-bottom的距離。
內(nèi)/外邊距：
m-1或p-1：padding: .25rem!important;
m-2或p-2 ： padding: .5rem!important;
m-3或p-3 ： padding: 1rem!important;
m-4或p-4 ： padding: 1.5rem!important;
m-5或p-5 ： padding: 3rem!important;
所以，mb-4 指的設置該div的margin-bottom：1.5rem!important；py-3 指的是設置該div的padding-top和padding-bottom：1rem!important;
<div class="container"> <h3 class="mb-4">等寬列</h3> <div class="row"> <div class="col border py-3 bg-light">二分之一</div> <div class="col border py-3 bg-light">二分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">三分之一</div> <div class="col border py-3 bg-light">三分之一</div> <div class="col border py-3 bg-light">三分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> </div> <div class="row"> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> <div class="col border py-3 bg-light">十二分之一</div> </div>
運行示例：
二、可變寬度的內(nèi)容
1、來說說justify-content-md-center，它用于在中等屏幕尺寸（md）上設置容器內(nèi)的子元素水平居中。這個類是用于flexbox布局的一部分，justify-content-md-center 會設置 justify-content 屬性為 center，這會使得子元素在主軸方向上居中。
2、那justify-content又是個什么東東呢，它是Bootstrap中用于控制元素在容器中水平對齊方式的類，justify-content屬性可以應用于具有display: flex或display: inline-flex的容器元素上。它有以下幾個取值：
| 取值 | 含意 |
|---|---|
| start | 默認值，元素在容器的起始位置對齊。 |
| end | 元素在容器的末尾位置對齊 |
| center | 元素在容器的中間位置對齊 |
| between | 元素在容器中均勻分布，首個元素在起始位置，末尾元素在末尾位置 |
| around | 元素在容器中均勻分布，兩側(cè)留有相等的空間 |
| evenly | 元素在容器中均勻分布，包括首個元素和末尾元素 |
justify-content屬性可以用于創(chuàng)建各種布局，例如居中對齊、兩端對齊、等間距對齊等。它在響應式網(wǎng)頁設計和移動應用程序開發(fā)中非常有用。
3、在class="col col-lg-2"和class="col-md-auto"中都是什么意思呢？
| 名稱 | 含意 |
|---|---|
| .col- | 針對所有設備 |
| .col-sm- | 平板 - 屏幕寬度等于或大于 576px |
| .col-md- | 桌面顯示器 - 屏幕寬度等于或大于 768px |
| .col-lg- | 大桌面顯示器 - 屏幕寬度等于或大于 992px |
| .col-xl- | 超大桌面顯示器 - 屏幕寬度等于或大于 1200px |
在每個列與列間隔30px。
4、如下圖，定義了幾個類型的布局容器，會在相應設備上進行響應。舉個例子，如.container-md，在屏寬<=576px時會滿屏不留margin和panding，在屏寬大于576px小于768px時，則（div盒子）顯示為最小的寬度為576px，以此類推，當屏寬大于或等于768px時，小于992px時，則（div盒子）顯示為最小寬度為768px。
<div class="container"> <h3 class="mb-4">可變寬度的內(nèi)容</h3> <div class="row justify-content-md-center"> <div class="col col-lg-2 border py-3 bg-light">左</div> <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768時，可根據(jù)內(nèi)容自動調(diào)整列寬)</div> <div class="col col-lg-2 border py-3 bg-light">右</div> </div> <div class="row"> <div class="col border py-3 bg-light">左</div> <div class="col-md-auto border py-3 bg-light">中(在屏幕>=768時，可根據(jù)內(nèi)容自動調(diào)整列寬)</div> <div class="col col-lg-2 border py-3 bg-light">右</div> </div> </div>
三、多列等寬
行的分割（w-100類）
這里利用的是w-100類，意思是width：100%，強制把一行分成了兩行
<div class="container"> <h3 class="mb-4">等寬多列</h3> <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> <div class="col border py-3 bg-light">四分之一</div> <div class="col border py-3 bg-light">四分之一</div> </div> </div>
四、混合排列
混合搭配，在小于md型的設備上顯示為一個全寬列和一個半寬列，在大于等于md型設備上顯示為一列，分別占八份和一份
<div class="container"> <h3 class="mb-4"> 混合搭配，在小于md型的設備上顯示為一個全寬列和一個半寬列， 在大于等于md型設備上顯示為一列，分別占八份和一份 </h3> <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> <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> </div>
五、刪除邊距
通過使用.no-gutters類，沒有溝槽
<div class="container"> <h3 class="mb-4">刪除邊距</h3> <div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8 border py-3 bg-light">.col-12 col-sm-6 .col-md-8</div> <div class="col-12 col-md-4 border py-3 bg-light">.col-12 .col-md-4</div> </div> </div>
六、排列順序
通過使用order- 類來實現(xiàn)排序。
注：order-first和order-last順序設置時候不會出現(xiàn)上面那種問題，設置第一個就是第一個，設置最后就是最后，且優(yōu)先級比設置數(shù)字要高
<div class="container"> <h3 class="mb-4">排列順序</h3> <div class="row no-gutters"> <div class="col order-12 border py-3 bg-light">order-12</div> <div class="col order-1 border py-3 bg-light">order-1</div> <div class="col order-6 border py-3 bg-light">order-6</div> <div class="col order-2 border py-3 bg-light">order-2</div> <div class="col border py-3 bg-light">col</div> </div> </div>
結(jié)果如下：
七、偏移類示例
網(wǎng)格列偏移是通過類名offset- * - * 來設置的
第一個號是表示屏幕設備類型例如sm，md，lg等等
第二個號是表示偏移度可以設置1-11的數(shù)字
如：offset-md-3,是代表向右偏移3個格
<div class="container"> <h3 class="mb-4">偏移類示例</h3> <div class="row"> <div class="col-md-6 offset-md-3 border py-3 bg-light">.col-md-6 .offset-md-3</div> </div> <div class="row"> <div class="col-md-4 offset-md-1 border py-3 bg-light">.col-md-4 .offset-md-1</div> <div class="col-md-4 offset-md-2 border py-3 bg-light">.col-md-4 .offset-md-2</div> </div> <div class="row"> <div class="col-md-4 border py-3 bg-light">.col-md-4</div> <div class="col-md-4 offset-md-4 border py-3 bg-light">.col-md-4 .offset-md-4</div> </div> </div>
八、使用margin類實現(xiàn)列偏移
ml-* 類用于實現(xiàn)列（column）的左側(cè)偏移。具體來說，ml-* 中的 m 表示 margin（外邊距），l 表示 left（左側(cè)），* 則表示偏移的列數(shù)。通過添加 ml-* 類，可以讓列在網(wǎng)格系統(tǒng)中向右偏移指定數(shù)量的列，從而實現(xiàn)靈活的布局設計。
例如，ml-2 表示向右偏移 2 列，即讓列向右移動 2 個網(wǎng)格列的寬度。這樣可以在設計網(wǎng)頁布局時，調(diào)整元素之間的空隙或位置，使布局更加靈活美觀。
Bootstrap 實現(xiàn)列偏移的原理是通過設置列元素的外邊距（margin）來實現(xiàn)偏移效果。通過為列元素添加相應的 ml-* 類，Bootstrap 在內(nèi)部處理了這些類，并應用了對應的 CSS 樣式，使得列元素在頁面中向右偏移指定數(shù)量的列。
在 Bootstrap 的 CSS 文件中，類似于以下的樣式會被應用到具有 ml-* 類的列元素上，實現(xiàn)列偏移的效果，這些樣式會根據(jù)列數(shù)的不同，將適當?shù)耐膺吘鄳玫搅性厣?，實現(xiàn)列偏移的效果。這樣，開發(fā)者可以通過簡單地為列元素添加相應的 ml-* 類，實現(xiàn)頁面布局中元素的位置調(diào)整，從而實現(xiàn)更加靈活和多樣化的布局設計。
<div class="container"> <h3 class="mb-4">使用margin類實現(xiàn)列偏移</h3> <div class="row"> <div class="col-md-4 border py-3 bg-light">.col-md-4</div> <div class="col-md-4 ml-auto border py-3 bg-light">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-12 border py-3 bg-light">.col-md-12</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto border py-3 bg-light">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto border py-3 bg-light">.col-auto mr-auto</div> <div class="col-auto border py-3 bg-light">.col-auto</div> </div> </div>
九、嵌套示例
在 Bootstrap 中，嵌套是一種常見的布局技術(shù)，可以用來創(chuàng)建復雜的網(wǎng)頁布局結(jié)構(gòu)。嵌套的原理是通過在一個列（column）中再嵌套一個行（row）和列的結(jié)構(gòu)，從而實現(xiàn)多層次的布局。
Bootstrap 的網(wǎng)格系統(tǒng)是基于12列的布局系統(tǒng)構(gòu)建的，通過將頁面分割為等分的12列，開發(fā)者可以自由地組合和嵌套這些列，實現(xiàn)靈活的布局設計。在實現(xiàn)嵌套布局時，開發(fā)者可以在一個列中再創(chuàng)建一個新的行，然后在這個新的行中繼續(xù)添加列，以此類推，實現(xiàn)多層次的嵌套結(jié)構(gòu)。
<div class="container"> <h3 class="mb-4">嵌套</h3> <div class="row"> <div class="col-12 col-lg-6"> <div class="row border no-gutters"> <div class="col-12 col-sm-3 border bg-light">123</div> <div class="col-12 col-sm-9 pl-3">李白詩歌的語言，有的清新如同口語，有的豪放，不拘聲律，近于散文，但都統(tǒng)一在清水</div> </div> </div> <div class="col-12 col-lg-6"> <div class="row border no-gutters"> <div class="col-12 col-sm-3 border bg-light">321</div> <div class="col-12 col-sm-9 pl-3">1李白詩歌的語言，有的清新如同口語，有的豪放，不拘聲律，近于散文，但都統(tǒng)一在清水</div> </div> </div> </div> </div>
到此這篇關(guān)于Boostrap中柵格布局的實現(xiàn)的文章就介紹到這了,更多相關(guān)Boostrap 柵格布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了如何使用pdfmake第三方庫在項目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了JS異步代碼單元測試之神奇的Promise，對異步感興趣的同學，可以參考下2021-05-05
本文為大家詳細介紹下js中自動清除ie緩存的幾種方法，大家可以根據(jù)自己的需求自由選擇適合自己的，希望對大家學習js有所幫助2013-07-07
拼圖游戲是我們大家都玩過的一款小游戲，下面這篇文章主要給大家介紹了關(guān)于如何利用原生的JavaScript實現(xiàn)簡單拼圖游戲的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時間函數(shù)控制頁面元素樣式動態(tài)變換的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js簡單實現(xiàn)圖片延遲加載的方法,涉及javascript針對頁面元素的遍歷與動態(tài)設置技巧,需要的朋友可以參考下2016-07-07
比較詳細的實例分析了dom的一些常用方法2008-09-09
快捷留言功能，就是您現(xiàn)在看到在右側(cè)浮動的那個小玩意，通過它可以直接提交留言并推薦，您想在博客里加上這個功能嗎？2010-04-04
這篇文章主要介紹了js中settimeout方法加參數(shù)的使用,需要的朋友可以參考下2014-02-02
JS解決?Array.fill()參數(shù)為對象指向同一個引用地址的問題
這篇文章主要介紹了JS解決?Array.fill()參數(shù)為對象指向同一個引用地址問題，解決方案使用map返回出不同的引用的地址，fill參數(shù)可隨意填寫（不為空），主要是map函數(shù)中返回的數(shù)據(jù),需要的朋友可以參考下2023-02-02