「行(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-* 柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 , 並且針對小螢幕裝置覆蓋柵格類。 因此,在元素上應用任何 .col-lg-* 不存在, 也影響大螢幕裝置。
柵格引數bootstrap3
超小螢幕 手機(<768px)
小螢幕 平板(>=768px)
中等螢幕 桌面顯示器(>=992px)
大螢幕 大桌面顯示器(>=1200px)
柵格系統行為
總是水平排列
開始是堆疊在一起的,當大於這些閾值時將變為水平排列
開始是堆疊在一起的,當大於這些閾值時將變為水平排列
開始是堆疊在一起的,當大於這些閾值時將變為水平排列
.container最大寬度
none(自動)
750px
970px
1170px
類字首.col-xs-
.col-sm-
.col-md-
.col-lg-
列(column)數
1212
1212
柵格引數bootstrap4
超小螢幕<576px
小螢幕 次小屏》=576px
中等螢幕 窄屏》=768px
大螢幕 桌面顯示器》=992px
超大螢幕 大桌面顯示器 >=1200px
.container最大寬度
none(自動)
540px
720px
960px
1140px
類字首.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
列數(column)
1212
1212
12為任意
標籤新增 .table 類可以為其賦予基本的樣式 — 少量的內補(padding)和水平方向的分隔線。
**:
aabb
cc aa
aaaa
bbbbbb
cccccc
例項:
通過 .table-striped 類可以給 之內的每一行增加斑馬條紋樣式。
**:
...
例項:
新增 .table-bordered 類為**和其中的每個單元格增加邊框。
**:
...
例項:
**:
...
例項:
通過新增 .table-condensed 類可以讓**更加緊湊,單元格中的內補(padding)均會減半。
**:
...
例項:
單獨的表單控制項會被自動賦予一些全域性樣式。所有設定了 .form-control 類的 、 和 元素都將被預設設定寬度屬性為 width: 100%;。 將 label 元素和前面提到的控制項包裹在 .form-group 中可以獲得最好的排列。
例項:
(預設樣式)default
(首選項)primary
(成功)success
(一般資訊)info
(警告)warning
(危險)danger
(鏈結)link
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕。
bootstrap3 全域性控制總結
在自己需要寫乙個 的時候,發現就需要一些常用的基礎樣式,對全域性起到作用的,不然對每個空間去做設定,會很麻煩。自己想了一下,我們一般是使用bootstrap樣式 就能控制全域性,適配mobile和pc端的樣式,而基本上不用去管全域性的樣式,因此從bootstrap原始碼中摘錄了一些控制全域性的樣式,...
Touch 驅動部分理解
在touch 初識的基礎上,今天主要是理解touch的驅動。1.丟log 在kernel drivers input touchscreen synaptics dsx下的檔案中的一些函式中加入一句printk cassie s n func 重新編譯bootimage,然後燒入到手機。重新開機,使...
Touch 驅動部分理解
在touch 初識的基礎上,今天主要是理解touch的驅動。1.丟log 在kernel drivers input touchscreen synaptics dsx下的檔案中的一些函式中加入一句printk cassie s n func 重新編譯bootimage,然後燒入到手機。重新開機,使...