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