快速入門示例

需要一些快速模板嗎？查看我們匯總的這些基本示例：

默認網格

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

示例網格標記

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

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

嵌套列

如果必須通過.row在現有列中創建一個來嵌套您的內容。

嵌套列示例

<div類= “行” > 
  <div類= "span12" > 
    列的第 1 層
    <div類= “行” > 
      <div類= "span6" > 
        2級
      </div>
      <div類= "span6" > 
        2級
      </div>
    </div>
  </div>
</div>

滾動你自己的網格

Bootstrap 內置了一些用於自定義默認 940 像素網格系統的變量。通過一些自定義，您可以修改列的大小、它們的間距以及它們所在的容器。

網格內

目前修改網格系統所需的變量都駐留在variables.less.

現在來定制

修改網格意味著更改三個@grid-*變量並重新編譯 Less 文件。

Bootstrap 配備處理多達 24 列的網格系統；默認值僅為 16。這是您的網格變量如何自定義為 24 列網格。

@gridColumns ：24 ；       
@gridColumnWidth ：20px ；   
@gridGutterWidth ：20px ；   

重新編譯後，您將被設置！

固定佈局

默認且簡單的 940 像素寬、居中佈局，適用於單個<div.container>.

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

流體佈局

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

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

標題和副本

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

整個排版網格基於 variables.less 文件中的兩個 Less 變量：@basefont和@baseline. 第一個是始終使用的基本字體大小，第二個是基線高度。

我們使用這些變量和一些數學運算來創建我們所有類型的邊距、填充和行高等等。

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> <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。

注意：在 HTML5中使用<b>和<i>標記仍然可以，它們不必分別設置為粗體和斜體樣式（儘管如果有更多語義元素，請使用它）。<b>旨在突出單詞或短語而不傳達額外的重要性，而<i>主要用於語音、技術術語等。

地址

該<address>元素用於其最近的祖先或整個工作主體的聯繫信息。以下是如何使用它的兩個示例：

注意： an 中的每一行都<address>必須以換行符 ( <br />) 結尾或包裹在塊級標籤中（例如，<p>）以正確構造內容。

縮寫

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

塊引用

<blockquote> <p> <small>

如何報價

要包含塊引用，請環繞<blockquote>和<p>標記<small>。使用該<small>元素引用您的來源，您將在它之前獲得一個破折號—。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。

朱利葉斯·希伯特博士

<塊引用>
  <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。</p>
  <small>朱利葉斯·希伯特博士</small>
</blockquote>

無序<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• 馬薩的整數 molestie lorem
• pretium nisl aliquet 的促進作用
• Nulla volutpat aliquam velit
  • 菜豆
  • Purus sodales ultricies
  • 前庭前庭端口掃描儀
  • Ac tristique libero volutpat 在
• Faucibus porta lacus fringilla vel
• Aenean sat amet erat nunc
• Eget porttitor lorem

無樣式<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• 馬薩的整數 molestie lorem
• pretium nisl aliquet 的促進作用
• Nulla volutpat aliquam velit
  • 菜豆
  • Purus sodales ultricies
  • 前庭前庭端口掃描儀
  • Ac tristique libero volutpat 在
• Faucibus porta lacus fringilla vel
• Aenean sat amet erat nunc
• Eget porttitor lorem

已訂購<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. 馬薩的整數 molestie lorem
4. pretium nisl aliquet 的促進作用
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sat amet erat nunc
8. Eget porttitor lorem

描述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。

代碼

<code> <pre>

用兩個簡單的標籤來風格化你的代碼。要通過 javascript 獲得更多精彩，請放入 Google 的代碼美化庫，然後就可以了。

呈現代碼

代碼、塊或只是內聯代碼片段，可以通過包裝在正確的標籤中以樣式顯示。對於跨越多行的代碼塊，請使用<pre>元素。對於內聯代碼，請使用<code>元素。

<div>
  <h1>標題</h1>
  <p>這裡有東西……</p>
</div>

<div> <h1>標題</h1> <p>這裡有東西... </p> </div>
  
  

內聯標籤

<span class="label">

提請注意或標記正文中的任何短語。

標記任何東西

曾經需要那些花哨的新品之一！或編寫代碼時的重要標誌？好吧，現在你有了它們。以下是默認包含的內容：

媒體網格

在具有低 HTML 佔用空間和最少樣式的頁面上顯示不同大小的縮略圖。

示例縮略圖

中的縮略圖.media-grid可以是任意大小，但直接映射到內置的 Bootstrap 網格系統時效果最好。像 90、210 和 330 這樣的圖像寬度與一些填充像素相結合以等於.span2、.span4和.span6列大小。

大的

中等的

小的

編碼它們

媒體網格易於使用，並且在標記方面相當簡單。它們的尺寸完全基於所包含圖像的大小。

<ul類= “媒體網格” > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

建築表

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

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

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

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

示例：默認表格樣式

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

<表格>
  ...
</table>

示例：精簡表

對於需要在更緊湊的空間中使用更多數據的表，請使用將填充減半的壓縮風格。它也可以與邊框和斑馬條紋一起使用，就像默認的表格樣式一樣。

示例：帶邊框的表格

通過圓角並在所有側面添加邊框，讓您的桌子看起來更時尚。

<table class = "bordered-table" > 
  ...
</table>

示例：斑馬條紋

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

注意：斑馬條紋是一種漸進式增強功能，不適用於 IE8 及更低版本的舊瀏覽器。

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

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

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

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

默認樣式

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

堆疊形式

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

表單域大小

通過向您的標記添加幾個類來自定義任何形式input、select或寬度。textarea

從 v1.3.0 開始，我們為表單元素添加了基於網格的大小調整類。請在現有的.mini,.small等類上使用這些。

鈕扣

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

所有按鈕默認為淺灰色樣式，但可以為不同的顏色樣式應用許多功能類。這些等級包括藍色.primary等級、淺藍色.info等級、綠色.success等級和紅色.danger等級。

示例按鈕

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

替代尺寸

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

禁用狀態

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

鏈接

鈕扣

它是什麼

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

可定制

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

包括下拉菜單

作為主導航的一部分，我們為您提供了嚮導航添加下拉菜單的功能。查看上面的二級導航（右對齊），看看它是如何完成的。Dropdownsli標籤還支持.active顯示當前頁面選擇。

標籤和藥丸

使用<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>

麵包屑

麵包屑導航用於向用戶顯示他們在應用程序或網站中的位置，但不適用於主導航。

• 家

• 主頁 /
• 中間頁

• 主頁 /
• 中頁 /
• 另一個

• 主頁 /
• 中頁 /
• 另一個 /
• 你在這裡

<ul類= “麵包屑” > 
  <li><a href = "#" >主頁</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >中間頁</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >另一個</a> <span class = "divider" > / </span></li>   
  <li class = "active" >你在這裡</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>

基本警報

.alert-message

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

獲取 JavaScript »

示例代碼

<div class = "警報消息警告" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong>神聖的鱷梨醬！</strong>最好檢查一下自己，你看起來不太好。</p>
</div>

阻止消息

.alert-message.block-message

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

獲取 JavaScript »

示例代碼

<div class = "alert-message block-message 警告" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong>神聖的鱷梨醬！這是一個警告！</strong>最好檢查一下自己，你看起來不太好。Nulla vitae elit libero，一個 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。</p>
  <div class = "警報操作" > 
    <a class = "btn small" href = "#" >採取這個行動</a> <a class = "btn small" href = "#" >或者這樣做</a>     
  </div>
</div>

模態

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

獲取 JavaScript »

工具提示

Twipsies 對於幫助困惑的用戶並將他們指向正確的方向非常有用。

獲取 JavaScript »

約夏克布丁

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

獲取 JavaScript »

入門

將 javascript 與 Bootstrap 庫集成非常簡單。下面我們將介紹基礎知識並為您提供一些很棒的插件來幫助您入門！

查看 javascript 文檔 »

包括什麼

使用可與jQuery和Ender一起使用的新自定義插件，使 Bootstrap 的一些主要組件栩栩如生。我們鼓勵您擴展和修改它們以滿足您的特定開發需求。

需要javascript嗎？

沒有！Bootstrap 首先被設計為一個 CSS 庫。這個 javascript 在包含的樣式之上提供了一個基本的交互層。

但是，對於那些確實需要 javascript 的人，我們提供了上面的插件來幫助您了解如何將 Bootstrap 與 javascript 集成，並立即為您提供一個快速、輕量級的基本功能選項。

有關更多信息並查看一些現場演示，請參閱我們的插件文檔頁面。