Bootstrap之3 柵格系統

2021-07-09 04:03:34 字數 693 閱讀 7379

bootstrap的柵格系統:

行(row)必須包含在.container中,以便為其賦予合適的排列(aligment)和內補(padding)。

使用行(row)在水平方向建立一組列(column)。

你的內容應當放置於列(column)內,而且,只有列(column)可以作為行(row)的直接子元素。

col-md-4的意思是:中型 佔4個列。例如,三個等寬的列可以使用三個.col-xs-4來建立。

乙個row總共有12列。

col又分為 col-xs-*,col-sm-*, col-md-*, col-lg-*,。分別對應手機,平板,桌面,大桌面。

而col的主要屬性有列偏移和列排序以及巢狀列。

列偏移:通過.col-md-offset-*可以將列偏移到右側。(當你嫌2個列直接距離太小時可以使用)。

列排序:通過使用.col-md-push-*(右) 和 .col-md-pull-*(左)。(當2個列

預設情況下,col-md-9在左邊,col-md-3在右邊,如果要互換位置,需要將col-md-9列向右移動3個列的距離,也就是推3個列的offset,樣式用col-md-push-3;而col-md-3則需要向左移動,也就是拉9個列的offset,樣式用col-md-pull-9。

Bootstrap 柵格系統

目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕裝置或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義classe,還有強大的mixin用於生成更具語義的布局。2...

Bootstrap柵格系統

bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的布局。頁面中的一行,比例可以自己定義,但必須保證是12列,如果缺少...

bootstrap 柵格系統

cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...