基礎 CSS

在腳手架之上,基本的 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 車輛。

鉛正文副本

通過添加使段落脫穎而出.lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

h1。標題 1

h2。標題 2

h3。標題 3

h4。標題 4

h5。標題 5
h6. 標題 6

重點、地址和縮寫

元素 用法 可選的
<strong> 用於強調具有重要意義的文本片段 沒有任何
<em> 用於強調一段有壓力的文本 沒有任何
<abbr> 包裝縮寫和首字母縮略詞以在懸停時顯示擴展版本

title包括擴展文本的可選屬性

使用.initialism大寫縮寫類。
<address> 獲取其最近的祖先或整個工作的聯繫信息 通過結束所有行來保留格式<br>

使用強調

Fusce dapibustellus ac cursus commodotortor 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>標籤的兩個示例:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
(123) 456-7890
全名
[email protected]

示例縮寫

帶有屬性的縮寫title有一個淺點的底部邊框和懸停時的幫助光標。這為用戶提供了額外的指示,將在懸停時顯示某些內容。

initialism類添加到縮寫詞中,通過賦予其稍小的文本大小來增加排版的和諧度。

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

單詞屬性的縮寫是attr

塊引用

元素 用法 可選的
<blockquote> 用於引用其他來源內容的塊級元素

為源 URL添加cite屬性

浮動選項的使用.pull-left.pull-right
<small> 用於添加面向用戶的引文的可選元素,通常是具有作品標題的作者 <cite>在標題或來源名稱周圍放置

要包含塊引用,請將<blockquote>任何HTML環繞作為引用。對於直接報價,我們建議使用<p>.

包括一個可選<small>元素來引用您的來源,並且您將在它之前獲得一個破折號&mdash;用於樣式目的。

  1. <塊引用>
  2. <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit。Integer posuere erat a ante venenatis。</p>
  3. <small>名人</small>
  4. </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。

橫向描述

<dl class="dl-horizontal">

描述列表
描述列表非常適合定義術語。
歐伊斯莫德
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。
Felis euismod semper eget lacinia
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。

小心!水平描述列表將截斷太長而無法放入左列修復的術語text-overflow。在較窄的視口中,它們將更改為默認的堆疊佈局。

排隊

用 .包裹內聯代碼片段<code>

  1. 例如<code>部分< / code >應該被包裝內聯

基本塊

用於<pre>多行代碼。請務必轉義代碼中的任何尖括號以進行正確渲染。

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

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

您可以選擇添加.pre-scrollable將最大高度設置為 350px 並提供 y 軸滾動條的類。

谷歌美化

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

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

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

表格標記

標籤 描述
<table> 用於以表格格式顯示數據的包裝元素
<thead> 表格標題行 ( ) 的容器元素,用於<tr>標記表格列
<tbody> <tr>表格主體中表格行 ( ) 的容器元素
<tr> 出現在單行上的一組表格單元格 (<td>或)的容器元素<th>
<td> 默認表格單元格
<th> 列(或行,取決於範圍和位置)標籤的特殊表格單元格
必須在<thead>
<caption> 表格內容的描述或摘要,對屏幕閱讀器特別有用
  1. <表格>
  2. <頭>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

表選項

姓名 班級 描述
默認 沒有任何 沒有樣式,只有列和行
基本的 .table 只有行之間的水平線
有邊框的 .table-bordered 圓角並添加外邊框
斑馬條紋 .table-striped 將淺灰色背景顏色添加到奇數行(1、3、5 等)
濃縮的 .table-condensed 在所有元素中將垂直填充減半td,從 8px 到 4pxth

示例表

1.默認表格樣式

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

  1. <表= “表” >
  2. </table>
# 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 @推特

2.條紋表

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

注意:條紋表使用:nth-childCSS 選擇器,在 IE7-IE8 中不可用。

  1. <table class = "table table-striped" >
  2. </table>
# 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里 @推特

3. 帶邊框的表格

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

  1. <table class = "table table-bordered" >
  2. </table>
# 用戶名
1 標記 奧托 @mdo
標記 奧托 @getbootstrap
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特

4. 精簡表

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

  1. <table class = "table table-condensed" >
  2. </table>
# 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特

5. 將它們全部組合起來!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
全名
# 用戶名
1 標記 奧托 @mdo
2 雅各布 桑頓 @胖的
3 拉里小鳥 @推特

靈活的 HTML 和 CSS

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

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

包括四種佈局

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

  • 垂直(默認)
  • 搜索
  • 排隊
  • 水平的

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

控制狀態等

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

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

四種形式

Bootstrap 為四種常見的 Web 表單樣式提供了簡單的標記和样式。

姓名 班級 描述
垂直(默認) .form-vertical (不需要) 控件上堆疊的左對齊標籤
排隊 .form-inline 用於緊湊樣式的左對齊標籤和內聯塊控件
搜索 .form-search 用於典型搜索美學的額外圓形文本輸入
水平的 .form-horizontal 在與控件相同的行上浮動左、右對齊的標籤

僅使用表單控件的示例表單,沒有額外的標記

基本形式

無需額外標記的智能和輕量級默認設置。

此處的示例塊級幫助文本。

  1. <form class = "well" >
  2. <label>標籤名稱</label>
  3. <input type = "text" class = "span3" placeholder = "Type something..." >
  4. <span class = "help-block" >此處的示例塊級幫助文本。</span>
  5. <標籤= “複選框” >
  6. <input type = "checkbox" >檢查我
  7. </標籤>
  8. <button type = "submit" class = "btn" >提交</button>
  9. </form>

搜索表格

添加.form-search到表單.search-queryinput.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" >搜索</button>
  4. </form>

內聯表格

添加.form-inline以微調表單控件的垂直對齊和間距。

  1. <form class = "well form-inline" >
  2. <輸入類型= “文本”= “輸入小”佔位符= “電子郵件” >
  3. <輸入類型= “密碼”= “輸入小”佔位符= “密碼” >
  4. <標籤= “複選框” >
  5. <input type = "checkbox" >記住我
  6. </標籤>
  7. <button type = "submit" class = "btn" >登錄</button>
  8. </form>

水平形式

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

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

除了自由格式的文本,任何基於 HTML5 文本的輸入都是如此。

示例標記

鑑於上面的示例表單佈局,這裡是與第一個輸入和控制組關聯的標記。、.control-group.control-label.controls都是樣式所必需的。

  1. <form class = "form-horizo​​ntal" >
  2. <字段集>
  3. <legend>圖例文本</legend>
  4. <div= “控制組” >
  5. <label class = "control-label" for = "input01" >文本輸入</label>
  6. <div= “控件” >
  7. <輸入類型= “文本”= “輸入-xlarge” id = “input01” >
  8. <p class = "help-block" >支持幫助文本</p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

表單控件狀態

Bootstrap 具有瀏覽器支持的焦點和disabled狀態的樣式。我們刪除默認的 Webkitoutlinebox-shadow在其位置應用:focus.


表單驗證

它還包括錯誤、警告和成功的驗證樣式。要使用,請將錯誤類添加到周圍的.control-group.

  1. <字段集
  2. = “控制組錯誤” >
  3. </fieldset>
這裡有些價值
可能出了點問題
請更正錯誤
嗚呼!
嗚呼!

擴展表單控件

前置和附加輸入

輸入組(帶有附加或前置文本)提供了一種簡單的方法來為您的輸入提供更多上下文。很好的例子包括 Twitter 用戶名的 @ 符號或財務的 $。


複選框和收音機

在 v1.4 之前,Bootstrap 需要在復選框和單選框周圍添加額外的標記來堆疊它們。現在,重複<label class="checkbox">包裝<input type="checkbox">.

還支持內聯複選框和收音機。只需添加.inline到任何.checkbox.radio,您就完成了。


內聯表單和附加/前置

要在內聯表單中使用前置或附加輸入,請確保將.add-onandinput放在同一行,不帶空格。


表單幫助文本

要為表單輸入添加幫助文本,請在輸入元素之後包含內聯幫助文本<span class="help-inline">或幫助文本塊。<p class="help-block">

使用網格系統中的相同.span*類作為輸入大小。

您還可以使用不映射到網格、適應響應式 CSS 樣式或考慮不同類型的控件(例如,inputvs select.)的靜態類。

@

這是一些幫助文本

.00
這裡有更多幫助文本
$ .00

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

按鈕 類="" 描述
btn 帶漸變的標準灰色按鈕
btn btn-primary 提供額外的視覺權重並識別一組按鈕中的主要操作
btn btn-info 用作默認樣式的替代品
btn btn-success 表示成功或積極的行動
btn btn-warning 表示應謹慎執行此操作
btn btn-danger 表示危險或潛在的負面行為
btn btn-inverse 備用深灰色按鈕,與語義操作或使用無關

操作按鈕

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

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

跨瀏覽器兼容性

IE9 不會在圓角上裁剪背景漸變,因此我們將其移除。與此相關的是,IE9 使禁用button的元素卡頓,將文本呈現為灰色,並帶有我們無法修復的令人討厭的文本陰影。

多種尺寸

喜歡更大或更小的按鈕?添加.btn-large.btn-small.btn-mini兩個額外的尺寸。


禁用狀態

對於禁用的按鈕,將.disabled類添加到鏈接和元素的disabled屬性。<button>

主鏈接 關聯

小心!我們.disabled這裡作為實用類使用,類似於普通.active類,所以不需要前綴。

一類,多標籤

在、或元素上使用.btn類。<a><button><input>

關聯
  1. <a class = "btn" href = "" >鏈接</a>
  2. <按鈕= “btn”類型= “提交” >
  3. 按鈕
  4. </按鈕>
  5. <輸入= “btn”類型= “按鈕”
  6. = “輸入” >
  7. <輸入= “btn”類型= “提交”
  8. 價值= “提交” >

作為最佳實踐,嘗試為您的上下文匹配元素以確保匹配跨瀏覽器呈現。如果您有input<input type="submit">請為您的按鈕使用 。

  • 圖標玻璃
  • 圖標音樂
  • 圖標搜索
  • 圖標信封
  • 圖標心
  • 圖標星
  • 圖標星空
  • 圖標用戶
  • 偶像電影
  • 大圖標
  • 圖標號
  • 圖標列表
  • 圖標-確定
  • 圖標刪除
  • 圖標放大
  • 圖標縮小
  • 圖標關閉
  • 圖標信號
  • 圖標齒輪
  • 圖標垃圾
  • 圖標首頁
  • 圖標文件
  • 圖標時間
  • 圖標路
  • 圖標下載-alt
  • 圖標下載
  • 圖標上傳
  • 圖標收件箱
  • 圖標播放圈
  • 圖標重複
  • 圖標刷新
  • 圖標列表替代
  • 圖標鎖
  • 圖標標誌
  • 圖標耳機
  • 圖標音量關閉
  • 圖標音量降低
  • 圖標音量
  • 圖標-二維碼
  • 圖標條碼
  • 圖標標籤
  • 圖標標籤
  • 圖標書
  • 圖標書籤
  • 圖標打印
  • 圖標相機
  • 圖標字體
  • 圖標粗體
  • 圖標斜體
  • 圖標文本高度
  • 圖標文本寬度
  • 圖標左對齊
  • 圖標對齊中心
  • 圖標右對齊
  • 圖標對齊對齊
  • 圖標列表
  • 圖標縮進左
  • 圖標縮進右
  • 圖標-facetime-視頻
  • 圖標圖片
  • 圖標鉛筆
  • 圖標地圖標記
  • 圖標調整
  • 圖標色調
  • 圖標編輯
  • 圖標分享
  • 圖標檢查
  • 圖標移動
  • 圖標-後退
  • 圖標-快退
  • 圖標向後
  • 圖標播放
  • 圖標暫停
  • 圖標停止
  • 圖標轉發
  • 圖標快進
  • 圖標前進
  • 圖標彈出
  • 圖標-雪佛龍-左
  • 圖標-雪佛龍-右
  • 圖標加號
  • 圖標減號
  • 圖標刪除標誌
  • 圖標確定標誌
  • 圖標問號
  • 圖標信息標誌
  • 圖標截圖
  • 圖標刪除圈
  • 圖標-ok-圈
  • 圖標禁止圈
  • 圖標箭頭左
  • 圖標箭頭右
  • 圖標向上箭頭
  • 圖標-向下箭頭
  • 圖標共享替代
  • 圖標調整大小
  • 圖標大小調整小
  • 加號圖標
  • 圖標減號
  • 圖標星號
  • 圖標感嘆號
  • 圖標禮物
  • 圖標葉
  • 圖標-火
  • 圖標-睜眼
  • 圖標-閉眼
  • 圖標警告標誌
  • 圖標平面
  • 圖標日曆
  • 圖標-隨機
  • 圖標評論
  • 圖標磁鐵
  • 圖標-人字形向上
  • 圖標-chevron-down
  • 圖標轉推
  • 圖標購物車
  • 圖標文件夾關閉
  • 圖標文件夾打開
  • 圖標調整大小垂直
  • 圖標調整大小水平
  • 圖標硬盤
  • 圖標擴音器
  • 圖標鈴
  • 圖標證書
  • 圖標豎起大拇指
  • 圖標大拇指向下
  • 圖標-右手
  • 左手圖標
  • 圖標舉手
  • 圖標向下
  • 圖標-圓圈-箭頭-右
  • 圖標圓圈箭頭左
  • 圖標-圓圈-向上箭頭
  • 圖標-圓圈-向下箭頭
  • 圖標地球儀
  • 圖標扳手
  • 圖標任務
  • 圖標過濾器
  • 圖標公文包
  • 圖標全屏

構建為精靈

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

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

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

如何使用

Bootstrap 對所有圖標都使用<i>標籤,但它們沒有大小寫類——只有一個共享前綴。要使用,請將以下代碼放在幾乎任何地方:

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

還有一些樣式可用於倒置(白色)圖標,準備好一個額外的類:

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

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

小心!在文本字符串旁邊使用時,例如在按鈕或導航鏈接中,請務必在<i>標籤後留一個空格以保持適當的間距。

用例

圖標很棒,但人們會在哪裡使用它們呢?這裡有一些想法:

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

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

例子

在按鈕、工具欄按鈕組、導航或前置表單輸入中使用它們。