在腳手架之上，基本的 HTML 元素通過可擴展類進行樣式化和增強，以提供新鮮、一致的外觀和感覺。
整個排版網格基於 variables.less 文件中的兩個 Less 變量：@baseFontSize和@baseLineHeight. 第一個是始終使用的基本字體大小，第二個是基線高度。
我們使用這些變量和一些數學運算來創建我們所有類型的邊距、填充和行高等等。
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。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Donec sed odio dui。
| 元素 | 用法 | 可選的 |
|---|---|---|
<strong> |
用於強調具有重要意義的文本片段 | 沒有任何 |
<em> |
用於強調一段有壓力的文本 | 沒有任何 |
<abbr> |
包裝縮寫詞和首字母縮略詞以在懸停時顯示擴展版本 |
.initialism大寫縮寫類。 |
<address> |
有關其最近祖先或整個工作的聯繫信息 | 通過結束所有行來保留格式<br> |
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>標籤的兩個示例：
帶有屬性的縮寫title有一個淺點的底部邊框和懸停時的幫助光標。這為用戶提供了額外的指示，將在懸停時顯示某些內容。
將initialism類添加到縮寫詞中，通過賦予其稍小的文本大小來增加排版的和諧度。
HTML是自切片麵包以來最好的東西。
單詞屬性的縮寫是attr。
| 元素 | 用法 | 可選的 |
|---|---|---|
<blockquote> |
用於引用其他來源內容的塊級元素 | 為源 URL添加 .pull-left和.pull-right類 |
<small> |
用於添加面向用戶的引文的可選元素，通常是具有作品標題的作者 | <cite>在標題或來源名稱周圍放置 |
要包含塊引用，請將<blockquote>任何HTML環繞作為引用。對於直接報價，我們建議使用<p>.
包括一個可選<small>元素來引用您的來源，並且您將在它之前獲得一個破折號—用於樣式目的。
- <塊引用>
- <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer posuere erat a ante venenatis。</p>
- <small>名人</small>
- </blockquote>
默認塊引用的樣式如下：
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。
工作中的名人
要將您的塊引用浮動到右側，請添加class="pull-right"：
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。
工作中的名人
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
小心！水平描述列表將截斷太長而無法放入左列修復的術語text-overflow。在較窄的視口中，它們將更改為默認的堆疊佈局。
用 .包裹內聯代碼片段<code>。
- 例如，<code>部分< / code >應該被包裝為內聯。
用於<pre>多行代碼。請務必轉義代碼中的任何尖括號以進行正確渲染。
<p>此處為示例文本...</p>
- <上一頁>
- <p>此處為示例文本...</p>
- </pre>
注意：請確保將標籤內的<pre>代碼盡可能靠近左側；它將呈現所有選項卡。
您可以選擇添加.pre-scrollable將最大高度設置為 350 像素並提供 y 軸滾動條的類。
採用相同的<pre>元素並添加兩個可選類以增強渲染。
- <p>此處為示例文本... </p>
- <pre class = “漂亮的印刷品
- 線數" >
- <p>此處為示例文本...</p>
- </pre>
下載 google-code-prettify並查看自述文件以了解如何使用。
| 標籤 | 描述 |
|---|---|
<table> |
用於以表格格式顯示數據的包裝元素 |
<thead> |
表格標題行 ( ) 的容器元素，用於<tr>標記表格列 |
<tbody> |
<tr>表格主體中表格行 ( ) 的容器元素 |
<tr> |
出現在單行上的一組表格單元格 (<td>或)的容器元素<th> |
<td> |
默認表格單元格 |
<th> |
列（或行，取決於範圍和位置）標籤的特殊表格單元格 必須在 <thead> |
<caption> |
表格內容的描述或摘要，對屏幕閱讀器特別有用 |
- <表格>
- <頭>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| 姓名 | 班級 | 描述 |
|---|---|---|
| 默認 | 沒有任何 | 沒有樣式，只有列和行 |
| 基本的 | .table |
只有行之間的水平線 |
| 有邊框的 | .table-bordered |
圓角並添加外邊框 |
| 斑馬條紋 | .table-striped |
將淺灰色背景顏色添加到奇數行（1、3、5 等） |
| 濃縮的 | .table-condensed |
在所有元素中將垂直填充減半td，從 8px 到 4pxth |
表格會自動設置樣式，只有幾個邊框，以確保可讀性和保持結構。對於 2.0，.table該類是必需的。
- <表類= “表” >
- …
- </table>
| # | 名 | 姓 | 用戶名 |
|---|---|---|---|
| 1 | 標記 | 奧托 | @mdo |
| 2 | 雅各布 | 桑頓 | @胖的 |
| 3 | 拉里 | 鳥 | @推特 |
通過添加斑馬條紋來對您的表格進行一些花哨 - 只需添加.table-striped類。
注意：條紋表使用:nth-childCSS 選擇器，在 IE7-IE8 中不可用。
- <table class = "table table-striped" >
- …
- </table>
| # | 名 | 姓 | 用戶名 |
|---|---|---|---|
| 1 | 標記 | 奧托 | @mdo |
| 2 | 雅各布 | 桑頓 | @胖的 |
| 3 | 拉里 | 鳥 | @推特 |
為美觀目的在整個桌子周圍添加邊框和圓角。
- <table class = "table table-bordered" >
- …
- </table>
| # | 名 | 姓 | 用戶名 |
|---|---|---|---|
| 1 | 標記 | 奧托 | @mdo |
| 標記 | 奧托 | @getbootstrap | |
| 2 | 雅各布 | 桑頓 | @胖的 |
| 3 | 拉里小鳥 | @推特 | |
.table-condensed通過添加將表格單元格填充減半（從 8 像素到 4 像素）的類，使您的表格更緊湊。
- <table class = "table table-condensed" >
- …
- </table>
| # | 名 | 姓 | 用戶名 |
|---|---|---|---|
| 1 | 標記 | 奧托 | @mdo |
| 2 | 雅各布 | 桑頓 | @胖的 |
| 3 | 拉里小鳥 | @推特 | |
隨意組合任何表格類，以利用任何可用的類來實現不同的外觀。
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| 全名 | |||
|---|---|---|---|
| # | 名 | 姓 | 用戶名 |
| 1 | 標記 | 奧托 | @mdo |
| 2 | 雅各布 | 桑頓 | @胖的 |
| 3 | 拉里小鳥 | @推特 | |
Bootstrap 中表單最好的部分是，無論您如何在標記中構建它們，您的所有輸入和控件看起來都很棒。不需要多餘的 HTML，但我們為需要它的人提供了模式。
更複雜的佈局帶有簡潔和可擴展的類，便於樣式和事件綁定，因此您可以在每一步中得到覆蓋。
Bootstrap 支持四種類型的表單佈局：
不同類型的表單佈局需要對標記進行一些更改，但控件本身保持不變並且行為相同。
Bootstrap 的表單包括所有基本表單控件的樣式，如您期望的輸入、文本區域和選擇。但它也帶有許多自定義組件，例如附加和前置輸入以及對複選框列表的支持。
每種類型的表單控件都包含錯誤、警告和成功等狀態。還包括禁用控件的樣式。
Bootstrap 為四種常見的 Web 表單樣式提供了簡單的標記和样式。
| 姓名 | 班級 | 描述 |
|---|---|---|
| 垂直（默認） | .form-vertical （不需要） |
控件上堆疊的左對齊標籤 |
| 排隊 | .form-inline |
用於緊湊樣式的左對齊標籤和內聯塊控件 |
| 搜索 | .form-search |
用於典型搜索美學的額外圓形文本輸入 |
| 水平的 | .form-horizontal |
在與控件相同的行上浮動左、右對齊的標籤 |
無需額外標記的智能和輕量級默認設置。
- <form class = "well" >
- <label>標籤名稱</label>
- <input type = "text" class = "span3" placeholder = "Type something..." >
- <span class = "help-block" >此處的示例塊級幫助文本。</span>
- <標籤類= “複選框” >
- <input type = "checkbox" >檢查我
- </標籤>
- <button type = "submit" class = "btn" >提交</button>
- </form>
添加.form-search到表單.search-query和input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" >搜索</button>
- </form>
添加.form-inline以微調表單控件的垂直對齊和間距。
- <form class = "well form-inline" >
- <輸入類型= “文本”類= “輸入小”佔位符= “電子郵件” >
- <輸入類型= “密碼”類= “輸入小”佔位符= “密碼” >
- <標籤類= “複選框” >
- <input type = "checkbox" >記住我
- </標籤>
- <button type = "submit" class = "btn" >登錄</button>
- </form>
右側顯示的是我們支持的所有默認表單控件。這是項目符號列表：
鑑於上述示例表單佈局，這裡是與第一個輸入和控制組相關聯的標記。、.control-group和.control-label類.controls都是樣式所必需的。
- <form class = "form-horizontal" >
- <字段集>
- <legend>圖例文本</legend>
- <div類= “控制組” >
- <label class = "control-label" for = "input01" >文本輸入</label>
- <div類= “控件” >
- <輸入類型= “文本”類= “輸入-xlarge” id = “input01” >
- <p class = "help-block" >支持幫助文本</p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap 具有瀏覽器支持的焦點和disabled狀態的樣式。我們刪除默認的 Webkitoutline並box-shadow在其位置應用:focus.
它還包括錯誤、警告和成功的驗證樣式。要使用，請將錯誤類添加到周圍的.control-group.
- <字段集
- 類= “控制組錯誤” >
- …
- </fieldset>
輸入組（帶有附加或前置文本）提供了一種簡單的方法來為您的輸入提供更多上下文。很好的例子包括 Twitter 用戶名的 @ 符號或財務的 $。
在 v1.4 之前，Bootstrap 需要在復選框和單選框周圍添加額外的標記來堆疊它們。現在，重複<label class="checkbox">包裝<input type="checkbox">.
還支持內聯複選框和收音機。只需添加.inline到任何.checkbox或.radio，您就完成了。
要在內聯表單中使用前置或附加輸入，請確保將.add-onandinput放在同一行，不帶空格。
要為表單輸入添加幫助文本，請在輸入元素之後包含內聯幫助文本<span class="help-inline">或幫助文本塊。<p class="help-block">
我們沒有讓每個圖標都成為一個額外的請求，而是將它們編譯成一個精靈——一個文件中的一堆圖像，使用 CSS 來定位圖像background-position。這與我們在 Twitter.com 上使用的方法相同，並且對我們來說效果很好。
所有圖標類都以.icon-正確的命名空間和範圍為前綴，就像我們的其他組件一樣。這將有助於避免與其他工具發生衝突。
只要我們在文檔中提供鏈接和信用，Glyphicons就允許我們使用我們的開源工具包中的 Halflings 集。請考慮在您的項目中做同樣的事情。
Bootstrap 對所有圖標都使用<i>標籤，但它們沒有大小寫類——只有一個共享前綴。要使用，請將以下代碼放在幾乎任何地方：
- <i class = "圖標搜索" ></i>
還有一些樣式可用於倒置（白色）圖標，並準備好一個額外的類：
- <i class = "icon-search icon-white" ></i>
您的圖標有 120 個類別可供選擇。只需添加一個<i>帶有正確類的標籤，就可以了。您可以在sprites.less或本文檔中的此處找到完整列表。
小心！在文本字符串旁邊使用時，例如在按鈕或導航鏈接中，請務必在<i>標籤後留一個空格以保持適當的間距。
圖標很棒，但人們會在哪裡使用它們呢？這裡有一些想法：
本質上，在任何可以放置<i>標籤的地方，都可以放置圖標。
在按鈕、工具欄按鈕組、導航或前置表單輸入中使用它們。