基礎 CSS

基本 HTML 元素樣式和擴充類別增強。

ASP.NET Web API 2實戰訓練營 ASP.NET Web API是微軟打造的REST開發框架,可輕易建置HTTP服務,實戰課程拳拳到肉教您如何上場殺敵,K.O.各種用戶端。 SkillTree 報名

標題

所有 HTML 標題元素,從 <h1><h6> 都是可用的。

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Body設置

Bootstrap 全域預設值中 font-size14pxline-height20px。這些預設值設置在 <body> 和所有段落(paragraphs,即 p 元素)上。另外,<p> 還定義二分之一行高(預設是 10px)和底部邊距(bottom margin)。

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

葡萄美酒夜光杯,欲飲琵琶馬上催。醉臥沙場君莫笑,古來征戰幾人回。

漢皇重色思傾國,御宇多年求不得。楊家有女初長成,養在深閨人未識。天生麗質難自棄,一朝選在君王側。回眸一笑百媚生,六宮粉無顏色。春寒賜浴華清池,溫泉水滑洗凝脂。侍兒扶起嬌無力,正是新承恩澤時。雲鬢花顏金步搖,芙蓉帳暖度春宵。春宵苦短日高起從此君王不早朝。承歡侍宴無閒暇,春從春游夜專夜。後宮佳麗三千人,三千寵愛在一身。金屋妝成嬌侍夜,玉樓宴罷醉和春。姊妹弟皆列土,可憐光彩生門戶。遂令天下父母心,不重生男重生女。驪宮高處入青雲,仙樂風飄處處聞。緩歌謾舞凝絲竹,盡日君王看不足漁陽鼙鼓動地來,驚破霓裳羽衣曲。九重城闕煙塵生,千乘萬騎西南行。翠華搖搖行復止,西出都門百餘里。…

煙籠寒水月籠沙,夜泊秦淮近酒家。商女不知亡國恨,隔江猶唱後庭花。

<p>...</p>

譯著註:範例中特別加入“中文”,這是英文和中文在閱讀的感受上所有不同,讀者可以依照設計網站內容(中文或英文)調整預設值。例如,加入中文字型、字型大小的設置等。

突出 body 設置

段落加入 .lead 可以讓段落突出呈現。

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

月落烏啼霜滿天,江楓漁火對愁眠。姑蘇城外寒山寺,夜半鐘聲到客船。

<p class="lead">...</p>

建置於Less

variables.less 文件中定義了兩個 LESS 變數來決定佈局尺寸:@baseFontSize@baseLineHeight,第一個變數定義 font-size 基準,第二個變數定義 line-height 基準。我們使用這些變數和一些簡單的數學去建立其他所有頁面元素的 margin、padding、line-height。自定義這些變數可以改變 Bootstrap 預設樣式。


強調

使用 HTML 預設的強調的標籤,並給於少量的樣式。

<small>

不需要強調的 inline 或 block 的文字,可使用 small 標籤。

This line of text is meant to be treated as fine print.

朱雀橋邊野草花,烏衣巷口夕陽斜。舊時王謝堂前燕,飛入尋常百姓家。

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

粗體

用 font-weight 的方式加粗字體以強調一段文字。

The following snippet of text is rendered as bold text.

紗窗日落漸黃昏,金屋無人見淚痕。寂寞空庭春欲晚,梨花滿地不開門。

<strong>rendered as bold text</strong>

斜體

用斜體字來強調一段文字。

The following snippet of text is rendered as italicized text.

更深月色半人家,北斗闌干南斗斜。今夜偏知春氣暖,蟲聲新透綠窗紗。

<em>rendered as italicized text</em>

注意!在 HTML5 中可自由使用 <b><i><b> 加粗字體或短語並不賦予重要含義,<i> 被用來表示發言、技術術語等。

譯者註:在中文環境裡使用斜體不會有比較好閱讀體驗,一般會透過 font-style: normal; 取消斜體樣式,另外設置顏色或粗體來強調。雖然閱讀起來都是粗體,不過在 HTML 語意上的強調等級不同。

對齊類別

以下是簡易將文字進行對齊的類別。

左邊對齊文字。

中間對齊文字。

右邊對齊文字。

<p class="text-left">左邊對齊文字。</p>
<p class="text-center">中間對齊文字。</p>
<p class="text-right">右邊對齊文字。</p>

強調類別

這此類別透過顏色來表示強調。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

縮寫

當滑鼠停留在縮寫或縮寫詞上時會顯示完整內容,Bootstrap 增強 HTML <abbr> 元素的樣式。縮寫元素帶有 title 屬性,外觀會帶有淡的虛底線,滑鼠移至縮寫詞上面時會帶有問號指標。

<abbr>

想看完整的內容,可以把滑鼠停留在縮寫詞上,但必須包含 title 屬性。

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

加入 .initialism 類別到縮寫裡,使用更小一些的 font-size。

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

讓連絡資訊以最接近日常使用格式呈現。

<address>

在每行結尾加入 <br> 以保留格式。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
新竹金剛熊安親家教班
新竹市XXXX街
XX巷XX弄XX號
電話:(03)888-8888
電子郵件
first.last@example.com
網頁:金剛熊介紹
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

在你的文件中引用其他來源的內容。

預設引用

將任何 HTML 包含其中即為引用。直接的引用建議用 <p>

譯著註<blockquote> 通常是整段、較長內容的引用。<q> 則是短句的引用。另外,<blockquote> 會以新的段落方式呈現,<q> 則是行內元素,合適在一句話裡帶過。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

少小離家老大回,鄉音無改鬢毛催。兒童相見不相識,笑問客從何處來。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

引用選項

在標準引用裡,可以很簡單的改變風格和內容。

命名來源

加入 <small> 標籤來注明引用來源,來源名稱可以放在 <cite> 標籤裡。

譯著註<q> 使用 cite 屬性。<cite> 標籤的 title 屬性與 <q> 的 cite 屬性可以是來源網址。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

少小離家老大回,鄉音無改鬢毛催。兒童相見不相識,笑問客從何處來。

回鄉偶書,作者:賀知章
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

替代呈現

使用 .pull-right 類別,可以呈現浮動、右邊對齊的引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

少小離家老大回,鄉音無改鬢毛催。兒童相見不相識,笑問客從何處來。

回鄉偶書,作者:賀知章
<blockquote class="pull-right">
  ...
</blockquote>

清單

無序清單

清單中的順序不是明顯重要的。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

有序清單

清單中的序順明顯且重要的。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

unstyled 類別

移除預設的 list-style 且左邊列出清單項目(只對直接子節點有效)。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="unstyled">
  <li>...</li>
</ul>

Inline 類別

使用 inline-block 讓清單項目成為一列,同時每項都有一些邊距(Padding)。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="inline">
  <li>...</li>
</ul>

描述

一個術語的清單和相關的描述。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平描述

<dl> 中術語與描述以一條條水平方式呈現。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

注意!在 .dl-horizontal 類別透過加入 text-overflow 讓水平描述清單將過長無法在左列中完全呈現的列名截去一部分。而在較窄的可視寬度中,會改變回預設垂直佈局方式。

行內程式碼

<code> 標籤內包含一小段程式碼。

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

基本區塊

使用 <pre> 呈現多行程式碼。為了能正確呈現,請務必將程式碼中的角括號(< 與 >)進行轉義。

譯著註:< 轉義為 &lt;;> 轉義為 &gt;。

<p>Sample text here...</p>
<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

注意! 因為 <pre> 標籤裡 Tab 會被計算進去,保持程式碼盡可能靠左側(譯著註不進行縮排。)。

你也選擇加入 .pre-scrollable 類別,它會把該區塊設置為最大高度 350px 且帶有一個滑動的 Y 軸。

預設樣式

為任何 <table> 增加基本類別 .table,會有少量的邊距(padding)和水平分隔線等基本樣式。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  …
</table>

選擇性類別

.table 基本類別後面可選擇性加入以下類別。

.table-striped

<tbody> 元素經由 :nth-child CSS 選擇器(IE7-8不支援)為表格加入跟斑馬條紋(zebra-striping)樣式。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  …
</table>

.table-bordered

為表格加入邊框與圓角。

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  …
</table>

.table-hover

<tbody> 裡的每一行設置滑鼠移至時的樣式。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  …
</table>

.table-condensed

將表格裡每格(cell)的邊距(padding)減半,讓表格更緊湊。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  …
</table>

選擇性行(row)類別

選擇情境類別,為表格增加顏色。

類別 說明
.success 指示成功或積極的行動。
.error 指示危險或潛在的不利的行動。
.warning 指示可能需要注意的警告。
.info 作為預設樣式的替代樣式。
# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

支援的 table 標籤

以下列出支援的 table 的 HTML 元素和應該如何使用它。

標籤 說明
<table> 包含以表格格式呈現資料的元素。
<thead> 包含表格表頭(<tr>)的容器。
譯著註:表頭有以行為表頭與以列為頭表。
<tbody> 包含表格內容(<tr>)的容器。
<tr> 包含表格(cell)內容(<td><th>)的容器。
<td> 預設的表格(cell)。
<th> 指出每列(或每行,相依於放置的位置)對應的標籤(label)。
<caption> 用於表格的說明或總結,對螢幕閱讀器特別有用。
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

預設樣式

不需要對 <form> 加入任何類別或大量修改標籤,每個單獨的表單控制項都已經有預設樣式。預設是堆疊且表單控制項的標籤(label)會左邊對齊。

Legend 範例,區塊的輔助說明文字。
<form>
  <fieldset>
    <legend>Legend</legend>
    <label>標籤(Label)名稱</label>
    <input type="text" placeholder="隨意輸入…">
    <span class="help-block">範例,區塊的輔助說明文字。</span>
    <label class="checkbox">
      <input type="checkbox"> 勾選我
    </label>
    <button type="submit" class="btn">送出</button>
  </fieldset>
</form>

選擇性佈局

Bootstrap 包含 3 個一般情況選擇性表單佈局。

搜尋表單

為表單加入 .form-search 類別,並為 <input> 加入 .search-query 類別,可將輸入框呈現為圓角形狀。

譯著註:輸入框指 input 元素 type 屬性為可輸入方面屬性。例如,type="file" 就不是可輸入屬性。

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">搜尋</button>
</form>

行內表單

為表單加入 .form-inline 類別,會得到一個緊湊佈局的表單,其中標籤向左對齊、控制項為行內區塊(inline-block)。

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="密碼">
  <label class="checkbox">
    <input type="checkbox"> 記住我
  </label>
  <button type="submit" class="btn">登入</button>
</form>

水平表單

右邊對齊標籤(label)和左邊浮動控制項以排列在同一行。這需要對預設表單標記進行一些修改。

  • 加入 .form-horizontal 類別到表單。
  • 將標籤(label)和控制項包含在 .control-group 類別裡。
  • 加入 .control-label 到 label 元素。
  • 將任何相關連的控制項包含在 .controls 類別裡,以確保正確的對齊。
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">密碼</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="密碼">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> 記住我
      </label>
      <button type="submit" class="btn">登入</button>
    </div>
  </div>
</form>

支援的表單控制項

在表單佈局範例中包含支援標準表單控制項。

Input 元素

最常用的表單控制項、文字輸入欄位。包含所有 HTML5 支援型別:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

任何時候都需要指定 type 屬性。

<input type="text" placeholder="文字輸入">

Textarea 元素

表單控制項裡支援多行文字輸入元素。根據需求可修改 rows 屬性。

<textarea rows="3"></textarea>

Checkboxe 和 radio 元素

Checkboxe 是用於一個清單裡選擇一個或多個選項(即複選)。radio 是在許多選項中選擇一個選項(即單選)。

預設樣式(堆疊)


<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

行內 checkboxe 元素

為 Checkboxe 元素或 radio 元素加入 .inline 類別,讓它們呈現在同一行。

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Select 元素

可使用預設選項或指定 multiple="multiple" 屬性一次呈現多個選項。


<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

擴充表單控制項

除了現在主流瀏覽器的控制項,Bootstrap 還包含了一些有用的表單元件。

前綴和附加 input 元素

在任何文字輸入框或按鈕之前或之後加入文字或按鈕。注意,select 元素不支援。

預設選項

.add-oninput 配合使用,可以將文字放到輸入框之前或後面。

@

.00
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

組合

在輸入框前後各使用一個 .add-on 類別的實體。

$ .00
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

按鈕替代文字

替代 <span> 的文字,使用 .btn 來附加一個(或兩個)按鈕到輸入框之前或後面。

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>
<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>

下拉式按鈕

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>
<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>
<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

分段下拉式群組

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

搜尋表單

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

控制項尺寸

使用相對尺寸的屬性類別,例如,.input-large 或使用 .span* 類別調整輸入框到網格列的尺寸。

區塊 input 元素

讓任何 <input><textarea> 元素呈現為一個區塊元素。

<input class="input-block-level" type="text" placeholder=".input-block-level">

相對尺寸

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

注意!在未來版本,我們將會修改這些類別的使用方式,讓它們與按鈕尺寸的呈現方式一樣。例如,.input-large 會加大輸入框的 padding 與 font-size。

網格尺寸

對輸入框使用 .span1.span12 的指定方式,可以將輸入框的尺寸縮放與網格一樣。

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

每行有多個輸入框的情況,使用 .controls-row 類別為輸入框增加合適的空間。透過浮動讓輸入框減少一些空白,設置合適的 margin 並取消浮動。

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

不可編輯輸入框

表單中呈現不可編輯的資料,不需要使用實際表單控制項。

一些值…
<span class="input-xlarge uneditable-input">一些值</span>

譯著註:例如,使用者來源IP資料,會員編號等。

表單動作

將一組動作(按鈕)放在表單尾部。當它們放在 .form-actions 中時,這些按鈕會自動縮排並和其他表單控制項對齊。

<div class="form-actions">
  <button type="submit" class="btn btn-primary">儲存修改</button>
  <button type="button" class="btn">取消</button>
</div>

輔助文字

在表單控制項周圍可以放置行內或區塊元素來呈現輔助文字。

行內輔助

行內輔助文字
<input type="text"><span class="help-inline">行內輔助文字</span>

區塊輔助

如果輔助文字過長時,可以採用區塊來呈現。
<input type="text"><span class="help-block">如果輔助文字過長時,可以採用區塊來呈現。</span>

表單控制項狀態

改變表單控制項和標籤的回饋狀態,以提供回饋給使用者或訪客。

輸入框焦點

我們為一些表單控制項移除預設的 outline 樣式,並對它們的 :focus 虛擬類別設置了 box-shadow 樣式。

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

無效輸入框

透過 :invalid 引發瀏覽器預設輸入框樣式。如果欄位是必填的,可以指定 typerequired 屬性,以及指定 pattern 屬性(如果合適的話)。

由於 Internet Explorer 7-9 不支援 CSS 虛擬類別,因此無法使用。

<input class="span3" type="email" required>

禁止輸入的輸入框

加入 disabled 屬性可以防止使用者輸入並呈現些許不同的外觀。

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

驗證狀態

Bootstrap 包含了 error、warning、info 和 success 等驗證訊息樣式。為 .control-group 類別加入合適的屬性。

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!
<div class="control-group warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Something may have gone wrong</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">Input with info</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">Username is already taken</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</div>

預設按鈕

任何設置 .btn 類別的元素都會呈現為按鈕樣式。不管如何,通常只會使用在 <a><button> 元素,以求有更好的呈現效果。

按鈕 class="" 說明
btn 標準灰階漸層按鈕
btn btn-primary 提供額外視覺感,可在一系列按鈕中識別出主要動作
btn btn-info 替代預設樣式。
btn btn-success 指出成功或肯定的動作
btn btn-warning 指出應該注意或謹慎此動作
btn btn-danger 指出此動作是危險或存在危險
btn btn-inverse 備用的深灰色按鈕,沒有任何語義或用途
btn btn-link 簡化按鈕,讓它看起來看連結,但又保持按鈕的行為

跨瀏覽器相容性

IE9 不支援背景漸層與圓角,所以我們移除了。IE9 jankifies 取消 button 元素,呈現文字為灰色且帶有很令人不快的陰影,我們實在無法修正它。

按鈕尺寸

想要更大或更小的按鈕?加入 .btn-large.btn-small.btn-mini 即可改改尺寸。

<p>
  <button class="btn btn-large btn-primary" type="button">更大的按鈕</button>
  <button class="btn btn-large" type="button">更大的按鈕</button>
</p>
<p>
  <button class="btn btn-primary" type="button">預設的按鈕</button>
  <button class="btn" type="button">預設的按鈕</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">更小的按鈕</button>
  <button class="btn btn-small" type="button">更小的按鈕</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">很小的按鈕</button>
  <button class="btn btn-mini" type="button">很小的按鈕</button>
</p>

透過設置 .btn-block 類別,能讓按鈕變成區塊元素,同時會填滿整個父元素。

<button class="btn btn-large btn-block btn-primary" type="button">區塊按鈕</button>
<button class="btn btn-large btn-block" type="button">區塊按鈕</button>

禁止狀態

讓顏色淡出 50%,讓按鈕看起來無法點擊。

連結元素

加入 .disabled 類別到 <a> 元素。

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

注意! 我們把 .disabled 當成一個工具類別,和常見的 .active 類別一樣,因此不需要添加前綴。另外,此類別只是為了美觀,你必須自行撰寫 JavaScript 來取消連結的行為。

按鈕元素

加入 .disabled 類別到 <button> 元素。

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

一個類別,多個標籤

可以為 <a><button><input> 元素加入 .btn 類別。

Link
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

最佳實作,依據你的整體環境,嘗試找出合適的元素,以確保它們在跨瀏覽器之間的呈現。如果你有一個 input 元素,那麼你的按鈕可以使用 <input type="submit">

<img> 元素加入對應的類別,可以很容易在任何專案裡設置圖片樣式。

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

注意! 由於 IE7-8 不支援 border-radius,因此 .img-rounded.img-circle 在 IE7-8 無法使用。

Icon 速記符號表

140 張 icon 均提供深灰色(預設)與白色。由 Glyphicons 提供。

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons 歸屬

Glyphicons Halflings 一般不是免費的,但經過 Bootstrap 和 Glyphicons 作者之間協調,允許開發人員不需支付任何免費即可使用。作為對作者的感謝,希望你在使用的時候加個 Glyphicons 的連結。


如何使用

所有 icon 都需要依賴一個 <i> 標籤和一個唯一的類別,類別前綴為 icon-。使用時,把類似下面的程式碼放置任何需要的地方:

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

也可以使用相反色(白色)的 icon,需要額外加入一個類別。我們將具體呈現這些類別在巡覽列和下拉式連結時滑鼠移至和活動時的效果。

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

注意!當在文字旁使用這些 icon 時,例如,按鈕或巡覽連結,務必在 <i> 標籤後面加入一個空格,這樣才能確保有合適的間距。


Icon 範例

這些 icon 可以使用在按鈕、工具列的按鈕群組、巡覽列或輸入框的前綴。

按鈕

按鈕工具列的按鈕群組
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
下拉式按鈕群組
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
按鈕尺寸
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

巡覽列

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

表單欄位

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>
comments powered by Disqus