排版比例

整個排版網格基於 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。

使用強調

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>標籤的兩個示例：

示例縮寫

縮寫的樣式採用大寫文本和淺色點底邊框。他們在懸停時還有一個幫助光標，因此用戶有額外的指示將在懸停時顯示某些內容。

HTML是自切片麵包以來最好的東西。

單詞屬性的縮寫是attr。

要包含塊引用，請將<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>

• 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 class="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>。

例如，<code>部分< / code >應該被包裝為內聯。  

基本塊

用於<pre>多行代碼。確保將任何插入符號轉換為它們的 unicode 字符以進行正確渲染。

<p>此處為示例文本...</p>

<上一頁>
  <p>此處為示例文本...</p>
</pre>

注意：請確保將標籤內的<pre>代碼盡可能靠近左側；它將呈現所有選項卡。

谷歌美化

採用相同的<pre>元素並添加兩個可選類以增強渲染。

<p>此處為示例文本... </p>

<pre class = “漂亮的印刷品 
     線數" >
  <p>此處為示例文本...</p>
</pre>

下載 google-code-prettify並查看自述文件以了解如何使用。

<表格>
  <頭>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

表格會自動設置樣式，只有幾個邊框，以確保可讀性和保持結構。對於 2.0，.table該類是必需的。

<表類= “表” > 
  …
</table>

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

注意：精靈表使用:nth-childCSS 選擇器，在 IE7-IE8 中不可用。

<table class = "table table-striped" > 
  …
</table>

為美觀目的在整個桌子周圍添加邊框和圓角。

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

.table-condensed通過添加將表格單元格填充減半（從 8 像素到 4 像素）的類，使您的表格更緊湊。

<table class = "table table-condensed" > 
  …
</table>

隨意組合任何表格類，以利用任何可用的類來實現不同的外觀。

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

靈活的 HTML 和 CSS

Bootstrap 中表單最好的部分是，無論您如何在標記中構建它們，您的所有輸入和控件看起來都很棒。不需要多餘的 HTML，但我們為需要它的人提供了模式。

更複雜的佈局帶有簡潔和可擴展的類，便於樣式和事件綁定，因此您可以在每一步中得到覆蓋。

包括四種佈局

Bootstrap 支持四種類型的表單佈局：

• 垂直（默認）
• 搜索
• 排隊
• 水平的

不同類型的表單佈局需要對標記進行一些更改，但控件本身保持不變並且行為相同。

控制狀態等

Bootstrap 的表單包括所有基本表單控件的樣式，如您期望的輸入、文本區域和選擇。但它也帶有許多自定義組件，例如附加和前置輸入以及對複選框列表的支持。

每種類型的表單控件都包含錯誤、警告和成功等狀態。還包括禁用控件的樣式。

在 v2.0 中，我們為表單樣式提供了更輕、更智能的默認設置。沒有額外的標記，只是表單控件。

反映默認的 WebKit 樣式，只需添加.form-search額外的圓形搜索字段。

輸入是塊級開始。對於.form-inlineand .form-horizontal，我們使用 inline-block。

包括什麼

左側顯示的是我們支持的所有默認表單控件。這是項目符號列表：

• 文本輸入（文本、密碼、電子郵件等）
• 複選框
• 收音機
• 選擇
• 多選
• 文件輸入
• 文本區域

v2.0 的新默認值

在 v1.4 之前，Bootstrap 的默認表單樣式使用水平佈局。在 Bootstrap 2 中，我們刪除了該約束，以便為任何形式提供更智能、更具可擴展性的默認值。

重新設計的瀏覽器狀態

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

操作按鈕

按照慣例，按鈕只能用於操作，而超鏈接用於對象。例如，“下載”應該是一個按鈕，而“最近的活動”應該是一個鏈接。

用於錨點和表格

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

注意：所有按鈕都必須包含.btn類。應將按鈕樣式應用於<button>和<a>元素以保持一致性。

多種尺寸

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

主要行動 行動

主要行動 行動

禁用狀態

對於禁用的按鈕，用於.btn-disabled鏈接和元素。:disabled<button>

主要行動 行動

主要行動 行動

跨瀏覽器兼容性

在 IE9 中，我們放棄了所有按鈕上的漸變以支持圓角，因為 IE9 不會將背景漸變裁剪到角落。

相關的，IE9 使禁用button的元素卡頓，將文本呈現為灰色並帶有令人討厭的文本陰影——不幸的是我們無法解決這個問題。

構建為精靈

我們沒有讓每個圖標都成為一個額外的請求，而是將它們編譯成一個精靈——一個文件中的一堆圖像，使用 CSS 來定位圖像background-position。這與我們在 Twitter.com 上使用的方法相同，並且對我們來說效果很好。

所有圖標類都以.icon-正確的命名空間和範圍為前綴，就像我們的其他組件一樣。這將有助於避免與其他工具發生衝突。

只要我們在文檔中提供鏈接和信用，Glyphicons就允許我們使用我們的開源工具包中的 Halflings 集。請考慮在您的項目中做同樣的事情。

如何使用

在 v2.0.0 中，我們選擇<i>為所有圖標使用標籤，但它們沒有大小寫類——只有一個共享前綴。要使用，請將以下代碼放在幾乎任何地方：

<i class = "圖標搜索" ></i> 

還有一些樣式可用於倒置（白色）圖標，並準備好一個額外的類：

<i class = "icon-search icon-white" ></i> 

您的圖標有 120 個類別可供選擇。只需添加一個<i>帶有正確類的標籤，就可以了。您可以在sprites.less或本文檔中的此處找到完整列表。

用例

圖標很棒，但人們會在哪裡使用它們呢？這裡有一些想法：

• 作為側邊欄導航的視覺效果
• 對於純圖標驅動的導航
• 用於幫助傳達動作含義的按鈕
• 帶有在用戶目的地共享上下文的鏈接

本質上，在任何可以放置<i>標籤的地方，都可以放置圖標。

刷新 查看 刪除

評論 設置 更多信息