Bootstrap 柵格布局

chnmagnus 發(fā)布于2019-08-30 13:14 / 3177人閱讀

摘要：類似和這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。柵格系統(tǒng)組成的重要部分是使用了。必然導(dǎo)致了脫離文檔流對(duì)布局的影響。

柵格布局系統(tǒng)：

思想：一個(gè)表達(dá)式足以描述， 百分比占位 + 多媒體查詢 + float + relative

Bootstrap柵格系統(tǒng)的工作原理：

row必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。

通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。

你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。

類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。

通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。

柵格參數(shù)：

從堆疊到水平排列


  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1

流式布局容器

將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。

...

移動(dòng)設(shè)備和桌面屏幕

.col-xs-*
.col-md-*

混合使用，xs、md依次添加(權(quán)重問題)。

手機(jī)、平板、桌面

支持平板可以添加

.col-sm-*

混合使用，xs、sm、md依次添加(權(quán)重問題)。

多余的列（column）將另起一行排列

如果在一個(gè) .row 內(nèi)包含的列（column）大于12個(gè)，包含多余列（column）的元素將作為一個(gè)整體單元被另起一行排列。

column reset

柵格系統(tǒng)組成的重要部分是使用了float。必然導(dǎo)致了dom脫離文檔流對(duì)布局的影響。解決方法：添加.clearfix清除浮動(dòng)對(duì)布局的影響


  .col-xs-6 .col-sm-3
  .col-xs-6 .col-sm-3

  

  .col-xs-6 .col-sm-3
  .col-xs-6 .col-sm-3

列偏移

使用.col-md-offset-*類可以將當(dāng)前列向右側(cè)偏移，css表達(dá)式為margin-left: xx%


  .col-md-4
  .col-md-4 .col-md-offset-4


  .col-md-3 .col-md-offset-3
  .col-md-3 .col-md-offset-3


  .col-md-6 .col-md-offset-3

嵌套列

為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過添加一個(gè)新的 .row 元素和一系列 .col-sm- 元素到已經(jīng)存在的 .col-sm- 元素內(nèi)。被嵌套的行（row）所包含的列（column）的個(gè)數(shù)不能超過12（其實(shí)，沒有要求你必須占滿12列）。

列排序

通過使用 .col-md-push-和.col-md-pull-類就可以很容易的改變列（column）的順序。
原理：利用relative，可以理解為

.col-md-push-3 => 當(dāng)前位置 向右移動(dòng)
left = 100/12*3 % => 效果為：
left : 25%

.col-md-pull-9=> 當(dāng)前位置 向左移動(dòng)
right = 100/12*9 % => 效果為：
right : 75%