bootstrap4之柵格系統
柵格系統
雖然原先一直用bootstrap3，可是也只是表面上瞭解的使用。隨着現代瀏覽器的普及，以及大型應用頁面的交互功能和需求愈來愈複雜，清楚的瞭解bootstrap的工做原理十分有必要。css
彈性盒子系統的出現，使的前端人員紛紛趨之若鶩。他是那麼的簡潔與快速。而後出現了bootstrap4以及bulma這樣的css項目，極大的方便了頁面佈局和樣式。html
今此，從網上查閱相關信息，沒查到專門的中文版本，即便官網也只是部分翻譯。因而專門翻譯了bootstrap4的柵格系統部分，供本身學習查閱之用，也分享與有須要的人。（輸入法問題錯別字不免）前端
點擊查看原文bootstrap
得益於12列的系統，五個默認的自適應等級，sass的變量和mixins，以及一些列預約義的classes，加上強大的移動優先的彈性盒子柵格，來建立全部形狀和尺寸的佈局。瀏覽器
如何工做（實現）
bootstrap柵格系統使用一系列的的containers，rows以及columns來呈現內容以及設置內容的邊距。它基於彈性盒子而且徹底是自適應的。下面是一個能夠說明他們是如何組織的比較深刻的例子。sass
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
上述例子使用咱們的預約義類能夠在small,medium,large,extra large設備上建立三個寬度相等的columns。（注：咱們固然能夠設置不一樣的界點——breakpoint，可是這個例子使用的sm，因此凡是大於sm的界點均可以實現寬度相等的效果。）這些columns在父級的.container中間。app
細拆一下，看它是如何工做的。ide
- 容器的做用是居中和水平話你的網站內容。請使用
.container來自適應物理的像素寬度，或者.container-fluid的width:00%到全部的寬度的硬件。 - Rows用來包裹columns。每一個column都有水平的
padding（乘坐槽——gutter），用來控制他們之間的距離。這個水平padding抵消了row的負margins。這樣一來，全部的columns中的內容看起來在左邊是有距離的。 - 在柵格系統中全部的內容必須在columns中，而且columns必須是row的直系子孫。
- 得益於彈性盒子，柵格系統的columns在沒有指定寬度的狀況下會自動均分寬度。例如，例子中的
.col-sm將會在breakpoint在什麼sm已經更高時寬度爲25%。 - column使用每行12列中的數字作一個符號。若是你想使三個列寬度相等，你可使用
.col-4。 - columns的寬度使用的是百分比，所以他們永遠是流動的而且相對於父級取值。
- 每一個column都有本身的水平方向的
.padding，可是，你可使用在row中使用.no-gutters來去除row的margin，以及其下columns的padding。 - 爲了使柵格系統可以自適應，bootstrap提供了五個界點——breakpoints。他們是:xs(適應全部的),sm,md,lg,xlg。
- 柵格系統的界點的媒體查詢基於屏幕的最小寬度值。其效果是應用於當前的breakpoint或者高於他的寬度。（例如，
.col-sm-4會應用於small，medium，large以及extra large的設備。可是不適用xs的breakpoint）。 - 你可使用預約義的柵格class（例如
.col-4）或者sass mixins來設置更多類。
要留意使用彈性盒子的限制和bugs，好比哪些不能使用彈性盒子的html元素。佈局
柵格設置 Grid options
boostrap使用em或者來時定義大多數的尺寸，px用來定義柵格系統breakpoint或者容器的寬度。這是爲視口的寬度是基於px而且不會隨font size變化。學習
經過下面表格看下bootstrap柵格系統在各個方面是如何工做的。
自動佈局列 Auto-layout columns
使用特殊的組合columns類能夠很容易設置column的尺寸而不用明確的設置column的寬度的數字，例如.col-sm-6。
同等寬度
例如這裏有兩個柵格佈局，用來適應從xs到xl的設備或者視口。你須要每一個缺乏數字的界點（breakpoint）組合類的列column都將是同樣的寬度。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
寬度相等的column能夠斷爲多行，可是這裏又一個safari彈性盒子bug，該bug在沒有明確flex-basis或者border的狀況下會組織這種效果的實現。這個bug只存在於叫老舊的瀏覽器版本中，若是你升級到高一點的版本，那麼徹底不用擔憂。
設置一個列的寬度 Setting one column width
自動適應寬度auto-layout的彈性盒子柵格系統也意味着你能夠設置其中一個column的寬度，而且他的相鄰的columns將會自動調整本身的寬度。你也可使用預約義的柵格類，混合柵格，或者直接設置元素的寬度。然而其餘的columns永遠都會自動調整本身的寬度，不管中間的column寬度爲多少。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
根據內容可變的寬度 Variable widht content
經過使用col-{breakpoint}-auto類來設設置column的寬度爲其內容的寬度。
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
多行寬度相等 Equal-width mutil-row
在你想要斷開列column的地方插入一個.w-100，你將得到列寬想的多行效果。
若是想要斷開的地方可以實現自適應的效果，你須要摻入一些自適應的組合類。
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="w-100"></div> <div class="col">col</div> <div class="col">col</div> </div>
自適應類 Responsive classes
bootstrap柵格系統包括五個預約義的等級來創建複雜的自適應佈局。定製的列的尺寸用來適應xs、sm、md、lg、xl這樣的設備。
全部的斷點（breakpoints）
若是想要從xs到xl都是同樣的效果可使用.col和.col-*類。
若是你須要一個特別的尺寸，你能夠給類添加一個數值；此外，能夠隨意的使用.col。
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> <div class="row"> <div class="col-8">col-8</div> <div class="col-4">col-4</div> </div>
水平堆放 Stacked to horizontal
使用一組.col-sm-*類你可建立一個在sm斷點（breakpoint）以前一直是水平堆放的基本柵格系統。
（注：水平堆放，即水平方向一個挨着一個，若是大於行寬則自動換行。）
<div class="row"> <div class="col-sm-8">col-sm-8</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
混合和匹配
混合：不一樣的斷點混合。匹配：當設備不一樣時，匹配不一樣的斷點效果。
不想讓你的columns在一些柵格下只是簡單的堆放。那就使用在不一樣等級斷電下顯示不一樣效果的斷點類的組合吧。看下面的例子，一個顯示效果更好的方法。
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-12 col-md-8">.col-12 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div>
對齊 Alignment
使用彈性盒子方式來對列進行水平和垂直防線的對齊設置。
垂直對齊 Vertical alignment
- align-items-start
- align-items-center
- align-items-end
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
- align-self-start
- align-self-center
- align-self-end
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
水平對齊 Horizontal alignment
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-around
- justify-content-between
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
無間隙 No gutters
列columns之間的間隙是經過柵格系統的類來定義的，能夠經過使用.no-gutters來移除。移除的包括.row的負的margins以及其直系子columns的水平的padding。
下面是建立這些樣式的源碼。注意：列column的覆蓋只是在直系子級，而且經過屬性選擇的範圍內。若是定義了更詳細的選擇器，你仍然能夠經過一些控件組合（spacing utilities）來再定義column的padding。
須要一個邊緣相挨着的設計?你能夠去掉父級的.container或者.container-fluid。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
看看實際上他們的代碼樣子。注意：你能夠繼續用這個和全部其餘的預先定義的柵格類一塊使用。
（包括columns的寬度，自適應等級，reorder，更多）
<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>
列的包裹 columns wrapping
若是超過12columns被放在一個單獨的row中，那麼超過的columns將被做爲一個單元，而後換行爲新的一行。
<div class="row"> <div class="col-9">.col-9</div> <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div> </div>
列的折斷 columns breaks
斷開columns到一個新的一行須要一點小技巧：添加一個寬度爲width:100%的元素到你想要斷開的地方局。正常狀況下這會變成一個多行效果，可是這個不是實現這個效果的最終方法。
<div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- Force next columns to break to new line --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div>
你也可使用這種在某個界點斷塊columns的方法。
<div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <!-- Force next columns to break to new line at md breakpoint and up --> <div class="w-100 d-none d-md-block"></div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div>
從新排序 Reordering
排序類 order classes
使用.order-類來控制你的內容的視覺順序。這些類也是能夠自適應的，因此你能夠經過breakpoint設置order（例如，.order-1.order-md-2)。支持從1到12的全部的柵格層級斷點。
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
這裏也有自適應的.order-first和.order-last類，經過設置樣式order:-1以及order:13(order:$columns+1)來自適應。這些類也能夠在內部添加寬度數字來達到想要的效果。
位移列 Offsetting columns
你能夠經過兩種方法來位移列。咱們的自適應.offset-柵格類以及margin組合。柵格類是對應的列的寬度，然而margin能夠在寬度更靈活的時候快速佈局。
位移類
向右位移使用.offset-md-*類。這些類會以column寬度爲單位增長右邊的margin爲*個。例如，.offset-md-4會向右位移4個column寬度的位置。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div>
除了在某些界點column的清除以外，你也許須要從新設置位移，看下面的例子。
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> </div>
與margin配合 Margin utilities
隨着v4轉移到了彈性盒子，你可使用margin組合類，例如.mr-auto去強制相鄰column彼此分開。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>
嵌套 Nesting
爲了使用默認的柵格系統嵌套組合你的內容。你可在.col-sm-*類column中添加.row而且包裹.col-sm-*。嵌套的rows須要包含一組columns，最多12個或者少一些。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
- 1. bootstrap4柵格系統佈局
- 2. 柵格系統
- 3. Bootstrap----------柵格系統
- 4. bootstrap 柵格系統
- 5. Bootstrap柵格系統
- 6. Bootstrap 柵格系統
- 7. 柵格系統Bootstrap
- 8. （四）柵格系統
- 9. Bootstrap 柵格系統的精妙之處
- 10. less 實現柵格系統
- 更多相關文章...
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • 系統定義的TypeHandler - MyBatis教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IntelliJ IDEA代碼格式化設置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. bootstrap4柵格系統佈局
- 2. 柵格系統
- 3. Bootstrap----------柵格系統
- 4. bootstrap 柵格系統
- 5. Bootstrap柵格系統
- 6. Bootstrap 柵格系統
- 7. 柵格系統Bootstrap
- 8. （四）柵格系統
- 9. Bootstrap 柵格系統的精妙之處
- 10. less 實現柵格系統