Bootstrap基礎知識

 

網格選項

下表總結了 Bootstrap 網格系統如何跨多個設備工做：

偏移列

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。

爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1 到 11。

列排序

Bootstrap 網格系統另外一個完美的特性，就是您能夠很容易地以一種順序編寫列，而後以另外一種順序顯示列。

您能夠很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。

在下面的實例中，咱們有兩列布局，左列很窄，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

默認狀況下，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。讀者可能會問，爲何不能用左右浮動呢？這是由於全部的列默認狀況下都是左浮動，若是要使用左右浮動，那就不知道得修改多少列的左右浮動樣式了。因此，做者在統一左浮動的基礎上，經過設置left和right的值來實現定位顯示。代碼以下所示：

.col-md-pull-12 {  right: 100%;}

.col-md-pull-11 {  right: 91.66666666666666%;}

.col-md-pull-10 {  right: 83.33333333333334%;}

.col-md-pull-9 {  right: 75%;}

.col-md-pull-8 {  right: 66.66666666666666%;}

.col-md-pull-7 {  right: 58.333333333333336%;}

.col-md-pull-6 {  right: 50%;}

.col-md-pull-5 {  right: 41.66666666666667%;}

.col-md-pull-4 {  right: 33.33333333333333%;}

.col-md-pull-3 {  right: 25%;}

.col-md-pull-2 {  right: 16.666666666666664%;}

.col-md-pull-1 {  right: 8.333333333333332%;}

.col-md-pull-0 {  right: 0;}

排版

可查找列表樣式、縮寫、引用、地址、標題、文本對齊資本用法

small>本行內容是在標籤內</small><br>

<strong>本行內容是在標籤內</strong><br>

<em>本行內容是在標籤內，並呈現爲斜體</em><br>

<p class="text-left">向左對齊文本</p>

<p class="text-center">居中對齊文本</p>

<p class="text-right">向右對齊文本</p>

<p class="text-muted">本行內容是減弱的</p>

<p class="text-primary">本行內容帶有一個 primary class</p>

<p class="text-success">本行內容帶有一個 success class</p>

<p class="text-info">本行內容帶有一個 info class</p>

<p class="text-warning">本行內容帶有一個 warning class</p>

<p class="text-danger">本行內容帶有一個 danger class</p>

縮寫

<abbr></abbr>

地址

<address></address>

Bootstrap 代碼

Bootstrap 容許您以兩種方式顯示代碼：

• 第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
• 第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。

請確保當您使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： &lt; 和 &gt;。

<pre class="pre-scrollable">多行代碼帶有滾動條

響應式表格

經過把任意的 .table 包在 .table-responsive class 內，您可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

Bootstrap 表單

基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：

• 向父 <form> 元素添加 role="form"。
• 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
• 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。相似於一個block

複選框（Checkbox）和單選框（Radio）

複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。

• 當建立表單時，若是您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。若是您限制用戶只能選擇一個選項，請使用 radio。
• 對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

選擇框（Select）

當您想讓用戶從多個選項中進行選擇，可是默認狀況下只能選擇一個選項時，則使用選擇框。

• 使用 <select> 展現列表選項，一般是那些用戶很熟悉的選擇列表，好比州或者數字。
• 使用 multiple="multiple" 容許用戶選擇多個選項。

靜態控件

當您須要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class .form-control-static。

表單控件大小

您能夠分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度。

input控件大小：input-lg，input-sm

表單幫助文本

Bootstrap 表單控件能夠在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。

Bootstrap 按鈕

Bootstrap 提供了一些選項來定義按鈕的樣式，具體以下表所示：

如下樣式可用於<a>, <button>, 或 <input> 元素上：

按鈕狀態

Bootstrap 提供了激活、禁用等按鈕狀態的 class，下面將進行詳細講解。

激活狀態

按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態的 class：

禁用狀態

當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：

按鈕標籤

您能夠在 <a>、<button> 或 <input> 元素上使用按鈕 class。可是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

<img> 類

如下類可用於任何圖片中。

響應式圖片

經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。

.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：

Bootstrap 輔助類

文本

如下不一樣的類展現了不一樣的文本顏色。若是文本是個連接鼠標移動到文本上會變暗：

背景

如下不一樣的類展現了不一樣的背景顏色。 若是文本是個連接鼠標移動到文本上會變暗：

其餘