<source id="zl0zm"></source>
  • <i id="zl0zm"></i>

    <wbr id="zl0zm"></wbr>
  • 組件

    無數可復用的組件,包括導航、警告框、彈出框等更多功能。

    案例

    兩個基本類型和更多變種類型。

    單一按鈕組

    將帶有.btn類的一系列按鈕包裹在.btn-group中。

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

    復選框和單選框形式

    按鈕組還可以從能上表現得像單元框(一次只能有一個按鈕被選中)或復選框(可同時選中多個按鈕)。詳見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的直接父節點添加一個類就可以讓下拉菜單由下到上顯示。.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>
    

    排列鏈接

    另外,還可以將兩個鏈接放置于兩側:

    <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">Default</span>
    成功 <span class="label label-success">Success</span>
    警告 <span class="label label-warning">Warning</span>
    重要 <span class="label label-important">Important</span>
    信息 <span class="label label-info">Info</span>
    反色 <span class="label label-inverse">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塊

    一個輕量、靈活的用于展示網站重點內容的組件。很適合營銷類或內容類網站。

    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>
    

    頁面標題

    h1套上這個簡單的外殼,就可以為其增加間隔并從頁面中分離出來。也可以在h1里增加small元素,就像其他大部分組件一樣(需要增加額外的樣式)。

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

    默認縮略圖樣式

    默認情況下,Bootstrap中的縮略圖被設計為用最少的標記展示帶鏈接的圖片。

    自定義

    只需添加一點額外的標記,就可以在縮略圖里添加任何類型的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

    為什么要用縮略圖

    縮略圖(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>
    

    更多案例

    自己探尋一下不同的柵格類所帶來的不同效果吧。你還可以同時設置不同的尺寸。

    默認警告框

    下面這個基本的警告框是在.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>
    

    關閉按鈕

    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全系列都不支持此效果。

    <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所支持的。

    IE10和Opera 12之前的版本均不支持動畫特性。

    這是一個抽象的樣式,用以構建不同類型的組件,這些組件都具有在文本內容的左或右對齊的圖片(就像blog內容或Tweets等)。

    默認案例

    默認樣式是在內容區域的左或右側浮動一個媒體對象(圖片、視頻、音頻)。

    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>
    

    Wells

    well能給一個頁面元素添加簡單的嵌入(inset)效果。

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

    可選的類

    這兩個類用以控制內補和圓角效果。

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

    關閉圖標

    關閉圖標用來關閉模態對話框或警告框。

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

    如果你選擇使用連接標簽的話,在iOS設備上需要一個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

    為任意頁面元素清除浮動

    class="clearfix"
    
    .clearfix {
      *zoom: 1;
      &:before,
      &:after {
        display: table;
        content: "";
      }
      &:after {
        clear: both;
      }
    }
    
    主播福利