Bootstrap3部分理解

2021-10-10 20:08:41 字數 2778 閱讀 6274

「行(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,然後燒入到手機。重新開機,使...