首頁 >web前端 >Bootstrap教程 >Bootstrap學習之詳解網格系統
Bootstrap學習之詳解網格系統
- 青灯夜游轉載
- 2021-03-04 10:24:222316瀏覽
這篇文章跟大家介紹一下Bootstrap中的網格系統。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《bootstrap教程》
bootstrap框架中的網格系統就是將容器平分成12份，在使用的時候可以根據實際情況重新編譯LESS/SASS原始碼來修改12這個數值。 bootstrap框架的網格系統工作原理：
1、資料行（.row）必須包含在容器（.container）中，以便其賦予合適的對齊方式和內距（padding）
<div class="container"> <div class="row"></div> </div>
2、在行（.row）中可以新增列（.column），但列數總和不能超過平分的總列數（如：12）
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> </div
3、具體內容應當放在列容器（.column）之內，而且只有列(.column)才可以作為行容器（.row）的直接子元素
4、透過設定內距（padding）從而建立列與列之間的間距，然後透過為第一列和最後一疊設定負值的外距（margin）來抵消內距（padding）的影響
在bootstrap網格系統中帶有響應式效果，其帶有四種類型的瀏覽器，（超小屏，小屏，中屏和大屏），其斷點是768px,992px,1220px
容器（.container），針對不同的瀏覽器分辨率，其寬度也不一樣：自動,760px,970px,1170px;
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}行容器（.row），將容器的行平分了12等份，也就是列。每個欄位都有一個padding-left:15px和padding-right:15px；這也導致了第一列的padding-left和最後一列的paading-right佔據了中寬度的30px
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}行容器(.row)定義了margin-left和margin-right值為-15px，用來抵消第一列的左內距和最後一列的右內距，以便第一列和最後一列與容器（.container）之間就沒有間距了
.row {
margin-right: -15px;
margin-left: -15px;
}
基本用法
#由於bootstrap框架在不同螢幕尺寸上使用了不同的網格樣式，下面就以中屏（970px）為例。
1、列組合
列組合就是要更改數字來合併列（總數不能超過12），有點類似表格的colspan屬性；列組合方式只涉及兩個特性：浮動於寬度百分比
<div> <div> <div>col-md-4</div> <div>col-md-8</div> </div> <div> <div>col-md-4</div> <div>col-md-4</div> <div>col-md-4</div> </div> <div> <div>col-md-3</div> <div>col-md-6</div> <div>col-md-3</div> </div> </div>
效果如下：
#確保所有列左浮動
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
定義每個列組合的寬度
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
2、列偏移
有時候，我們不希望相鄰的兩個列緊靠在一起，但又不想用margin或者其他技術手段，這是可以用列偏移（offset）來實現。使用列偏移只需在列元素上新增類別名稱.col-md-offset-*(星號代表要偏移的列組合數)，具有這個類別名稱的列就會偏移，如：在列元素上新增.col-md-offset-4，表示該列向右偏移4個列的寬度
<div> <div> <div>1111</div> <div>111</div> <div>333</div> </div> <div> <div>列偏移</div> <div>col-md-2</div> <div>col-md-2</div> </div> </div>
效果如下：
實作原理：
利用十二分之一的margin-left，有多少個offset，就有多少個margin-left
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
需要注意的是，使用col-md-offset-*對列進行右偏移時，要確保列與偏移列的總數不超過12，不然會導致列斷行顯示
4、列排序
列排序就是改變列的方向，並且設定浮動的距離。在bootstrap網格系統中是透過新增類別名稱。 col-md-push-*和col-md-pull-*
<div> <div> <div>col-md-4</div> <div>col-md-8</div> </div> </div>
效果如下：
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}
5、列巢狀
列巢狀可以在一個列中新增一個或做個行（row）容器，然後在這個行容器中插入列，在列容器中的行容器（row），寬度為100%時，就是目前外部列的寬度<div> <div> <div> 我在里面嵌套了一个网格 <div> <div>col-md-6</div> <div>col-md-6</div> </div> </div> <div>col-md-4</div> </div> <div> <div>col-md-4</div> <div> 我在里面嵌套了一个网格 <div> <div>col-md-4</div> <div>col-md-4</div> <div>col-md-4</div> </div> </div> </div> </div>
更多编程相关知识，请访问：编程入门！！
以上是Bootstrap學習之詳解網格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！