默認網格

作為 Bootstrap 的一部分提供的默認網格系統是 940 像素寬的 16 列網格。這是流行的 960 網格系統的一種風格，但在左右兩側沒有額外的邊距/填充。

示例網格標記

如此處所示，可以使用兩個“列”創建基本佈局，每個“列”跨越我們定義為網格系統一部分的 16 個基礎列中的一些。有關更多變體，請參見下面的示例。

<div 類="行"> 類= “行” >
  <div類= "span6 列" > 
    ...
  </div>
  <div類= "span10 列" > 
    ...
  </div>
</div>

固定佈局

一個基本的 940 像素寬、居中的容器佈局，幾乎適用於任何網站或頁面。

<正文>
  <div類= “容器” > 
    ...
  </div>
</正文>

流體佈局

具有最小和最大寬度以及左側邊欄的靈活的流體或液體頁面結構。非常適合應用程序。

<正文>
  <div class = "容器流體" > 
    <div類= “側邊欄” > 
      ...
    </div>
    <div類= “內容” > 
      ...
    </div>
  </div>
</正文>

標題和副本

用於構建網頁的標準排版層次結構。

h1。標題 1

h2。標題 2

h3。標題 3

h4。標題 4

h5。標題 5

h6. 標題 6

示例段落

Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Nullam id dolor id nibh ultricies vehicula ut id elit。

示例標題有子標題...

您還可以使用<strong>和添加副標題<em>

雜項。元素

使用強調、地址和縮寫

<strong> <em> <address> <abbr>

何時使用

強調標籤（<strong>和<em>）應該用於增加單詞或短語與其周圍副本之間的視覺區別。用於<strong>普通的舊注意和光滑<em>的注意和標題。

強調段落

Fusce dapibus，tellus ac cursus commodo，tortor mauris condimentum nibh，ut balloonum massa justo sit amet risus。Maecenas faucibus mollis interdum。Nulla vitae elit libero，一個 pharetra augue。

地址

該address元素用於——你猜對了！——地址。這是它的外觀：

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
： (123) 456-7890

注意：每一行都address必須以換行符 ( <br />) 結尾，以便在沒有應用任何樣式的情況下正確地構造內容。

縮寫

對於縮寫詞和首字母縮略詞，請使用abbr標記（在HTML5acronym中已棄用）。將簡寫形式放在標籤中，並為完整名稱設置標題。

塊引用

<blockquote> <p> <cite>

一定要把你的blockquote周圍paragraph和cite標籤包裹起來。引用來源時，請使用該cite元素。CSS 將自動在名稱前加上破折號 (—)。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

朱利葉斯·希伯特博士

無序<ul>

• 傑里米·比克斯比
• 羅伯特·德祖爾
• 喬什·華盛頓
• 安東·卡普雷西
• 我的隊友
  • 喬治卡斯坦薩
  • 傑瑞·宋飛
  • 科斯莫克萊默
  • 伊萊恩·本尼斯
  • 新人
• 約翰·雅各布
• 保羅皮爾斯
• 凱文加內特

無樣式<ul.unstyled>

• 傑里米·比克斯比
• 羅伯特·德祖爾
• 喬什·華盛頓
• 安東·卡普雷西
• 我的隊友
  • 喬治卡斯坦薩
  • 傑瑞·宋飛
  • 科斯莫克萊默
  • 伊萊恩·本尼斯
  • 新人
• 約翰·雅各布
• 保羅皮爾斯
• 凱文加內特

已訂購<ol>

1. 傑里米·比克斯比
2. 羅伯特·德祖爾
3. 喬什·華盛頓
4. 安東·卡普雷西
5. 我的隊友
   1. 喬治卡斯坦薩
   2. 傑瑞·宋飛
   3. 科斯莫克萊默
   4. 伊萊恩·本尼斯
   5. 新人
6. 約翰·雅各布
7. 保羅皮爾斯
8. 凱文加內特

描述dl

描述列表

描述列表非常適合定義術語。

歐伊斯莫德

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。

Donec id elit non mi porta gravida 在 eget metus。

馬勒蘇阿達門

Etiam porta sem malesuada magna mollis euismod。

建築表

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

桌子很棒——可以做很多事情。然而，偉大的表格需要一點標記才能變得有用、可擴展和可讀（在代碼級別）。這裡有一些提示可以提供幫助。

始終將列標題包裝在thead這樣的層次結構中thead> tr> th。

與列標題類似，表的所有正文內容都應包含在 a 中tbody，因此您的層次結構為tbody> tr> td。

示例：默認表格樣式

所有表格都將自動設置樣式，僅使用基本邊框，以確保可讀性並保持結構。無需添加額外的類或屬性。

#	名	姓	語
1	一些	一	英語
2	喬	六包	英語
3	斯圖	凹痕	代碼

<table class="common-table"> 類= “公用表” >
  ...
</table>

示例：斑馬條紋

通過添加斑馬條紋來對您的表格進行一些花哨 - 只需添加.zebra-striped類。

#	名	姓	語
1	一些	一	英語
2	喬	六包	英語
3	斯圖	凹痕	代碼

<table class = "common-table zebra-striped" > 
...
</table>

示例：帶有 TableSorter.js 的斑馬條紋

以前面的例子為例，我們通過jQuery和Tablesorter插件提供排序功能來提高表格的實用性。單擊任何列的標題以更改排序。

#	名	姓	語
1	您的	一	英語
2	喬	六包	英語
3	斯圖	凹痕	代碼

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<腳本類型= “文本/javascript” > 
  $ （文件）。準備好（函數（）{ 
    $ （“表#sortTableExample” ）。表排序器( { sortList : [[ 1 , 0 ]]} );   
  });
</腳本>
<table class = "common-table zebra-striped" > 
  ...
</table>

默認樣式

所有表單都具有默認樣式，以便以可讀和可擴展的方式呈現它們。為文本輸入、選擇列表、文本區域、單選按鈕和復選框以及按鈕提供了樣式。

示例表單圖例

超大輸入

選擇

1 2 3 4 5

選擇

1 2 3 4 5

不可編輯的輸入

這裡有一些價值

禁用輸入

超大輸入

一小段幫助文本

示例表單圖例

前置文本

@

前置複選框

附加複選框

文件輸入

示例表單圖例

選項列表

• 選項一是這樣那樣——一定要包括為什麼它很棒
• 選項二也可以檢查並包含在表單結果中
• 選項三可以——是的，你猜對了——也可以檢查並包含在表單結果中
• 選項四不能被選中，因為它被禁用了。

注意：標籤圍繞更大的點擊區域和更可用的表單的所有選項。

日期範圍

至 所有時間均顯示為太平洋標準時間 (GMT -08:00)。

文本區域

如果需要，幫助文本塊來描述上述字段。

選項列表

• 選項一是這樣那樣——一定要包括為什麼它很棒
• 選項二也可以檢查並包含在表單結果中

保存更改 取消

堆疊形式

添加.form-stacked到表單的 HTML 中，您將在其字段頂部而不是左側有標籤。如果您的表單很短，或者您有兩列輸入較重的表單，這將非常有用。

示例表單圖例

超大輸入

選擇

1 2 3 4 5

示例表單圖例

選項列表

• 選項一是這樣那樣——一定要包括為什麼它很棒
• 選項二也可以檢查並包含在表單結果中

注意：標籤圍繞更大的點擊區域和更可用的表單的所有選項。

保存更改 取消

鈕扣

按照慣例，按鈕用於操作，而鏈接用​​於對象。例如，“下載”可以是一個按鈕，“最近的活動”可以是一個鏈接。

所有按鈕默認為淺灰色樣式，但可以使用藍色.primary類。另外，滾動你自己的風格很容易。

示例按鈕

按鈕樣式可以應用到任何已應用的東西.btn。通常，您只想將這些應用於a、button和 selectinput元素。這是它的外觀：

替代尺寸

喜歡更大或更小的按鈕？有它！

禁用狀態

對於未激活或由於某種原因被應用程序禁用的按鈕，請使用禁用狀態。這適用.disabled於鏈接和元素。:disabledbutton

鏈接

鈕扣

它是什麼

我們的頂部欄是一個固定欄，其中包含網站的徽標或名稱、主要導航和搜索表單。

可定制

其中的所有元素以及整個頂欄都是可選的。您可以選擇包含徽標/名稱、導航、搜索和輔助導航——或它們的任意組合。

包括下拉菜單

作為主導航的一部分，我們為您提供了嚮導航添加下拉菜單的功能。查看上面的二級導航（右對齊），看看它是如何完成的。

標籤和藥丸

使用ul. 通過添加適當的類在選項卡或藥丸之間交換。

非常適合內容的子部分，例如我們的帳戶設置頁面和用於在類似內容頁面之間切換的用戶時間線。提供標籤或藥丸樣式。

• 家
• 輪廓
• 留言
• 設置
• 接觸

<ul類= “標籤” > 
  <li class = "active" ><a href = "" >主頁</a></li>  
  <li><a href = "" >個人資料</a></li> 
  <li><a href = "" >消息</a></li> 
  <li><a href = "" >設置</a></li> 
  <li><a href = "" >聯繫方式</a></li> 
</ul>

• 家
• 輪廓
• 留言
• 設置
• 接觸

<ul類= “藥丸” > 
  <li class = "active" ><a href = "" >主頁</a></li>  
  <li><a href = "" >個人資料</a></li> 
  <li><a href = "" >消息</a></li> 
  <li><a href = "" >設置</a></li> 
  <li><a href = "" >聯繫方式</a></li> 
</ul>

分頁

受 Rdio 啟發的超簡單和極簡風格的分頁。大塊很難錯過，易於擴展，並提供大點擊區域。

<div類= “分頁” > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← 上一頁</a></li>  
    <li class = "active" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4​​ </a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > Next → </a></li>  
  </ul>
</div>

基本警報

用於突出顯示操作的失敗、可能失敗或成功的單行消息。對錶格特別有用。

阻止消息

對於需要一些解釋的消息，我們有段落樣式警報。這些非常適合冒泡更長的錯誤消息，警告用戶待處理的操作，或者只是呈現信息以更加強調頁面。

模態

模態（對話框或燈箱）非常適合在需要維護背景上下文的情況下進行上下文操作。

約夏克布丁

使用彈出框在不影響佈局的情況下向頁面提供潛台詞信息。

Bootstrap 是用Preboot構建的，Preboot是一個開源的 mixins 和變量包，可與 Less 結合使用，Less是一個 CSS 預處理器，用於更快、更輕鬆地進行 Web 開發。

查看我們如何在 Bootstrap 中使用 Preboot，以及如果您選擇在下一個項目中運行 Less，您可以如何使用它。

如何使用它

使用此選項可在瀏覽器中通過 javascript 充分利用 Bootstrap 的 Less 變量、mixin 和 CSS 嵌套。

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

感覺不到 .js 解決方案？在部署代碼時嘗試使用 Less Mac 應用程序或使用 Node.js進行編譯。

包括什麼

以下是作為 Bootstrap 的一部分包含在 Twitter Bootstrap 中的一些亮點。前往 Bootstrap 網站或 Github 項目頁面下載並了解更多信息。

顏色變量

Less 中的變量非常適合免費維護和更新您的 CSS。當您想要更改顏色值或常用值時，只需在一處更新即可。

// 鏈接
@linkColor ：#8b59c2；         
@linkColorHover ：    變暗（@linkColor ，10 ）； 
 
// 灰色
@黑色：#000；             
@grayDark ：          變亮（@black ，25 %）； 
@gray ：              變亮（@black ，50 %）； 
@grayLight ：         變亮（@black ，70 %）； 
@grayLighter ：       變亮（@black ，90 %）； 
@白：#fff ；             
 
// 強調色
@藍色：#08b5fb ；              
@綠色：#46a546 ；             
@紅色：#9d261d ；               
@黃色：#ffc40d ；            
@橙色：#f89406 ；            
@粉紅色：#c3325f ；              
@紫色：#7a43b6 ；            
 
// 基線
@基線：20px ；          

評論

除了 CSS 的正常/* ... */語法之外，Less 還提供了另一種樣式的註釋。

// 這是一條評論
/* 這也是註釋 */

混音

Mixin 基本上是 CSS 的 include 或 partials，允許您將一段代碼組合成一個。它們非常適合供應商前綴屬性box-shadow，如跨瀏覽器漸變、字體堆棧等。下面是 Bootstrap 中包含的 mixin 示例。

字體堆棧

#字體{
  . 速記（@weight ：正常，@size ：14px ，@lineHeight ：20px ）{     
    字體大小：@size ；_ 
    字體-重量：@weight ； 
    線高：@lineHeight ；_ 
  }
  . 無襯線（@weight ：正常，@ size ：14px ，@lineHeight ：20px ）{     
    字體系列：“ Helvetica Neue” 、Helvetica 、Arial 、sans - serif ；   
    字體大小：@size ；_ 
    字體-重量：@weight ； 
    線高：@lineHeight ；_ 
  }
  . 襯線（@weight ：正常，@size ：14px ，@lineHeight ：20px ）{     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    字體大小：@size ；_ 
    字體-重量：@weight ； 
    線高：@lineHeight ；_ 
  }
  . 等寬（@weight ：正常，@size ：12px ，@lineHeight ：20px ）{     
    font - family : "Monaco" , Courier New , monospace ;   
    字體大小：@size ；_ 
    字體-重量：@weight ； 
    線高：@lineHeight ；_ 
  }
}

漸變

＃坡度 {
  . 水平（@startColor ：#555，@endColor：#333）{ 
    背景顏色：@endColor ；_ 
    背景-重複：重複-x ；_
    背景-圖像：-khtml-漸變（線性，左上，右上，_ _  從）到（@endColor ））；// 征服者 
    背景-圖像：- moz -線性-漸變 （左，@startColor ，@endColor ）；// FF 3.6+   
    背景-圖像：-毫秒-線性-漸變（ 左，@startColor ，@endColor ）；// IE10   
    背景-圖像：-webkit-漸變（線性，左上，右上，顏色-停止（0 ％，@startColor ），顏色-停止（100 ％，@ endColor ））；// Safari 4+，Chrome 2+    
    背景-圖片：- webkit -線性-漸變（左，@startColor ，@endColor ）；// Safari 5.1+，Chrome 10+    
    背景-圖像：- o -線性-漸變（左  -o- @ endColor ）；// 歌劇 11.10   
    -毫秒-過濾器：  %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+ 
    過濾器：e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 和 IE7 
    背景-圖像：線性-漸變（左，@startColor ，@endColor ）；// 樂標準   
  }
  . 垂直（@startColor ：#555，@endColor：#333）{ 
    背景顏色：@endColor ；_ 
    背景-重複：重複-x ；_
    背景-圖像：-khtml-漸變（線性，左上，左下，來自（@startColor _ _  ）到））；// 征服者 
    背景-圖像：- moz -線性-漸變（  @startColor endColor ）；// FF 3.6+  
    背景-圖像：-毫秒-線性-漸變（  @startColor ，@endColor ）；// IE10  
    背景-圖像：-webkit-漸變（線性，左上，左下，顏色-停止（0 ％，@startColor ），顏色-停止（100 ％，@ endColor ））；// Safari 4+，Chrome 2+    
    背景-圖片：- webkit -線性-漸變（@startColor ，@endColor ）；// Safari 5.1+，Chrome 10+   
    背景-圖像：-o-線性-漸變（ @ startColor ，@ endColor ）；// 歌劇 11.10   
    - ms -過濾器：%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    過濾器：e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 和 IE7 
    背景-圖像：線性-漸變（@startColor ，@endColor ）；// 標準  
  }
  . 定向（@startColor ：#555，@endColor：#333，@deg：45deg）{ 
    ...
  }
  . 垂直-三色（@startColor ：#00b3ee，@midColor：#7a43b6，@colorStop：0.5，@endColor：#c3325f）{ 
    ...
  }
}

運營和網格系統

看中並執行一些數學運算以生成靈活而強大的 mixin，如下所示。

// 網格
@gridColumns ：16 ；       
@gridColumnWidth ：40px ；   
@gridGutterWidth ：20px ；   
 
// 網格系統
. 容器{
  寬度：@siteWidth ； 
  邊距：0自動；  
  . 清除修復（）；
}
. 列（@columnSpan ：1 ）   {
  顯示：內聯； 
  浮動：左；
  寬度：（@gridColumnWidth * @columnSpan ）+ （@gridGutterWidth * （@columnSpan - 1 ））；         
  邊距-左：@gridGutterWidth ； 
  &：第一個-孩子{
    邊距-左：0 ； 
  }
}
. 偏移量（@columnOffset ：1 ）{  
  邊距-左：（@gridColumnWidth * @columnOffset ）+ （@gridGutterWidth * （@columnOffset - 1 ））！重要的；          
}