Bootstrap 柵格布局

chnmagnus 發布于2019-08-30 13:14 / 3185人閱讀

摘要：類似和這種預定義的類，可以用來快速創建柵格布局。柵格系統組成的重要部分是使用了。必然導致了脫離文檔流對布局的影響。

柵格布局系統：

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

Bootstrap柵格系統的工作原理：

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

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

你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。

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

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

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

柵格參數：

從堆疊到水平排列


  .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，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

...

移動設備和桌面屏幕

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

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

手機、平板、桌面

支持平板可以添加

.col-sm-*

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

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

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

column reset

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


  .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-*類可以將當前列向右側偏移，css表達式為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

嵌套列

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

列排序

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

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

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

GPU云服務器云服務器 bootstrap柵格 bootstrap柵格系統柵格插值柵格圖像

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115408.html

Bootstrap4響應式布局之柵格系統

摘要：前面說了的下載和簡單使用，現在我們接著往下學習，的響應式布局主要依靠柵格系統來實現的。好了，柵格系統暫時先介紹到這了，有什么不懂的可以給老留言哦。前面說了Bootstrap4的下載和簡單使用，現在我們接著往下學習，Bootstrap4的響應式布局主要依靠柵格系統來實現的。面老K先來講解一下Bootstrap4的柵格系統，讓你能夠更快的了解Bootstrap4.（PS：更詳細的介紹請訪問原K先...

Donald 2019-04-23 13:11 評論0 收藏0
如何使用 Bootstrap 搭建更合理的 HTML 結構

摘要：本文的目的就是介紹如何使用搭建常用的布局，并保證布局具有合理的結構。所以，上面例子的正確結構如下這是我工作過程中見過的最多的一種錯誤，必須格外注意。 showImg(http://images2017.cnblogs.com/blog/999445/201802/999445-20180212224801781-748317715.jpg); 前言 Bootstrap 的成功不僅在于其...

gclove 2019-08-01 18:37 評論0 收藏0
Bootstrap網格系統

摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。什么是Bootstrap Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格...

ISherry 2019-08-30 13:07 評論0 收藏0
100行less實現bootstrap的12柵格布局

摘要：實現的柵格布局，其實代碼不止行，大概多行吧使用過的都知道，的強大的柵格系統在響應式布局中這柵格布局是非常有用的。 less實現bootstrap的12柵格布局，其實代碼不止100行，大概100多行吧使用過bootstrap的都知道，bootstrap的強大的12柵格系統；在響應式布局中這12柵格布局是非常有用的。有時候做個簡單的頁面并不想把所有整個bootstrap引入到頁面中，于是...

jiekechoo 2019-08-29 12:53 評論0 收藏0