元件

內建數十個可重覆使用的元件,包含巡覽、警告、彈出視窗…還有更多。

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

範例

有兩個基本選項和其他更多變化類型。

單一按鈕群組

將一系列 .btn類別的按鈕包在 .btn-gruop 類別中。

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

多按鈕群組

組合多個 <div class="btn-group"> 放入 <div class="btn-toolbar"> 之中,可取得更複雜的元件。

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

垂直按鈕群組

讓一組按鈕群組呈現垂直堆疊的樣式。

<div class="btn-group btn-group-vertical">
  ...
</div>

checkbox 和 radio 形式

按鈕群組也能當成 radio 之用(一次只有一個按鈕能被點選),或是當成 checkbox 之用(一次能有多個按鈕能被點選)。詳細請參考 JavaScript 外掛文件

按鈕群組裡的下拉選單

注意! 下拉式選單的按鈕必須單獨包在 .btn-group 中,然後才放入 .btn-toolbar 中,這樣才能與正確呈現。

概觀與範例

將按鈕放入 .btn-group 之中,並加入適當的選單標籤,即可讓按鈕觸發下拉式選單。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

相容所有尺寸的按鈕

按鈕式下拉式選單能相容於所有尺寸:.btn-large.btn-small.btn-mini

需要 JavaScript

按鈕式下拉式選單需要和 Bootstrap 下拉選單外掛 一起使用。

在某些情況下 — 像是手機 — 下拉式選單可能會超出可視範圍,你必須自己手動解決問題或修改 JavaScript。


分割式按鈕下拉式選單

建置在按鈕群組的樣式與標記上,我們很容易去建立的一個分割的按鈕。分割的按鈕左邊是一個標準按鈕,右邊是一個可以可觸發開關的選單內容的連結。

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

尺寸

使用額外按鈕類別 .btn-mini.btn-small.btn-large 可以調整大小尺寸。

<div class="btn-group">
  <button class="btn btn-mini">Action</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

向上選單

.dropdown-menu 的直接父節點加入一個 .dropup 類別,就可以讓選單由下而上呈現。.caret 類別會把三角符號轉為由下而上。

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

標準分頁

此種簡單分頁的靈感來自 Rdio,非常合適 App 和搜尋結果。大區塊不易搞錯,而且容易擴展,還有非常大的可點擊區域。

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><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><a href="#">Next</a></li>
  </ul>
</div>

選項

禁用與啟用狀態

可依不同情況自訂連結。使用 .disabled 指出不能點擊,使用 .active 指出這是當前頁面。

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

你還能選擇使用 span 元素替代 a 元素,這樣就能移除點擊功能又能保有原樣式。

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

尺寸

想要更大或更小的分頁? 加入 .pagination-large.pagination-small.pagination-mini 類別就可以改變分頁尺寸。

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

對齊

加入後面選擇性類別可以改變分頁對齊方式:.pagination-centered.pagination-right

<div class="pagination pagination-centered">
  ...
</div>
<div class="pagination pagination-right">
  ...
</div>

換頁

用少量標記和構式就可快速提供前一頁與下一頁的分頁連結。這非常合適簡單的網站,例如部落格或雜誌網站。

預設範例

預設情況,換頁會置中呈現。

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

對齊連結

另外,透過 .previous.next 類別還可以把連結放置在兩邊。

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

選擇性禁用狀態

換頁連結也能和分頁一樣使用 .disabled 工具類別。

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

標籤

標籤 標記
預設 <span class="label">預設</span>
成功 <span class="label label-success">成功</span>
警告 <span class="label label-warning">警告</span>
重要 <span class="label label-important">重要</span>
資訊 <span class="label label-info">資訊</span>
相反色 <span class="label label-inverse">相反色</span>

徽章

名稱 範例 標記
預設 1 <span class="badge">1</span>
成功 2 <span class="badge badge-success">2</span>
警告 4 <span class="badge badge-warning">4</span>
重要 6 <span class="badge badge-important">6</span>
資訊 8 <span class="badge badge-info">8</span>
相反色 10 <span class="badge badge-inverse">10</span>

輕鬆地折疊

這是易於實作的,當沒有內容存在時,標籤和徽章將可簡單折疊(透過CSS的 :empty 選擇器)。

Hero unit

.hero-unit 類別,一個輕量與有彈性用於展示網站重點內容的元件。它非常合適用於行銷或內容為主的網站。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

譯者註:hreo unit 不合適翻譯,它在頁面裡用一個很大區塊與大標題等來突顯最重要的主題與主要描述,和網頁內的其他內容相比,它就像英雄一樣。

頁面標題

h1 加上簡單的外形,這可以增加適當空間和從頁面內容中分離出來。也可以在 h1 裡加入 small 元素,這就像其他元件一樣(需要額外樣式)。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

預設縮圖

預設,Bootstrap 縮圖被設計用最少標記來展示帶有連結的圖片。

<div class="row-fluid">
  <ul class="thumbnails">
    <li class="span3">
      <a href="#" class="thumbnail">
        <img data-src="holder.js/260x180" alt="">
      </a>
    </li>
    ...
  </ul>
</div>

可自定義縮圖

需要一些額外的標記,就可以在縮圖裡加入任何類型的 HTML 內容,例如標題、段落、按鈕等。

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

<div class="row-fluid">
  <ul class="thumbnails">
    <li class="span4">
      <div class="thumbnail">
        <img data-src="holder.js/300x200" alt=">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>...</p>
          <p><a href="#" class="btn btn-primary">Action</a> <a href="#">Action</a></p>
        </div>
      </div>
    </li>
  </ul>
</div>

為何使用縮圖

縮圖(在v1.4版之前稱呼叫 .media-grid)很合適將圖片、影片、圖片搜尋結果、商品陳列、作品集…等用網格樣式來展示。它們可以是含連結或是單純的內容。

簡單、有彈性的標記

縮圖標記很簡單 — 用 ul 包含任意的 li 元素即可。它也非常有彈性,只需要少量的標記即可包含你想要呈現的任何類型內容。

使用網格列尺寸

最後,縮圖元件使用現有的網格系統的類別 — 像是 .span2.span3 — 來控制縮圖尺寸。

標記

如前面所提,縮圖所需的標記很少且直觀。以下是一個預設的圖片連結

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

要在縮圖裡自訂 HTML 的內容,標記變化不大。為了允許區塊元素內容,我們將 <a> 替換成 <div>,像這樣:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

更多範例

探索一下不同網格系統類別的不同效果。你還可以設置不同的尺寸。

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/360x270" alt="">
    </a>
  </li>
  <li class="span3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/260x120" alt="">
    </a>
  </li>
  <li class="span2">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/160x120" alt="">
    </a>
  </li>
  <li class="span3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/260x120" alt="">
    </a>
  </li>
  <li class="span2">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/160x120" alt="">
    </a>
  </li>
</ul>

預設警告視窗

基本警告視窗訊息是在 .alert 類別包含任何文字和可選用的關閉按鈕。

Warning! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

譯者註:關閉按鈕會以「X」的樣式呈現。

關閉按鈕

行動版的 Safari 和 Opera 瀏覽器上,當使用 a 標籤關閉警告視窗時,除了加入 data-dismiss="alert" 屬性外,還要加入 href="#" 屬性。

<a href="#" class="close" data-dismiss="alert">&times;</a>

可替代的是使用帶有 data 屬性的 <button> 元素,就像此文件的範例一樣。當使用 <button> 時,還必須包含 type="button" 屬性,不然你的表單不會執行 submit 動作。

<button type="button" class="close" data-dismiss="alert">&times;</button>

透過 JavaScript 關閉警告視窗

使用 警告視窗 jQuery 外掛 可以快速又簡單關閉警告視窗。


選項

對於較長的訊息,可加入 .alert-block 類別,用以增加警告視窗上下的邊距(padding)。

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

其他內容

加入其他類別可改變警告視窗的含義。

錯誤或危險

Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

成功

Well done! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

訊息

Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>

範例和標記

基礎樣式

預設是一水平漸層的進度列。

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

斑馬條紋樣式

使用漸層建立一個馬斑條紋效果的進度列。不支援IE7-8。

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

動畫樣式

.progress-striped 加入 .active 類別,即可建立一個從右到左的動畫樣式。IE 僅 IE 10 支援。

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

堆疊樣式

可以將多個進度列放入 .progress 以建立堆疊式進度列。

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

選項

額外顏色

進度列和按鈕、警告視窗共用某些類別,以取得一致的樣式。

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

斑馬條紋進行列

類似純色顏色,我們也能建立各種不同顏色的斑馬條紋進度列。

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

瀏覽器支援

進度列使用 CSS3 漸層、轉場和動畫效果,這些都不被 IE7-9 或舊版的 Firefox 支援。

基本上,Internet Explorer 10 和 Opera 12 之前所有版本均不支援動畫。

這是一個抽像物件樣式,用來建立各種不同類型的元件(像部落格的評論、Tweet 等),這些元件都有文字內容的左邊或右邊對齊的圖片。

預設範例

預設媒體樣式是在內容區塊的左邊或右邊浮動一個媒體物件(圖片、影片、聲音)。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

媒體清單

利用一些額外標記就可以將媒體包含在清單之內(這對評論回應與文章清單很有用)。

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Well樣式

使用 well 樣式能給元素加入一個簡單的嵌入(inset)效果。

Look, I'm in a well!
<div class="well">
  ...
</div>

選擇性類別

.well-large.well-small 兩個選擇性類別可以控制邊距(padding)與圓角。

Look, I'm in a well!
<div class="well well-large">
  ...
</div>
Look, I'm in a well!
<div class="well well-small">
  ...
</div>

關閉 icon

使用一般關閉 icon 來關閉對話視窗或警告視窗。

<button class="close">&times;</button>

如果寧可使用連結,iOS 設備為了 click 事件需要 href="#"

<a class="close" href="#">&times;</a>

輔助類別

用於小螢幕或調整行為的簡單且功能單一的類別。

.pull-left

讓元素向左浮動。

class="pull-left"
.pull-left {
  float: left;
}

.pull-right

讓元素向右浮動。

class="pull-right"
.pull-right {
  float: right;
}

.muted

改變元素顏色為 #999

class="muted"
.muted {
  color: #999;
}

.clearfix

為任何元素取消 浮動(float) 效果。

class="clearfix"
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
comments powered by Disqus