BootStrap入門教程 (三)

本文轉載自查看原文 2012-06-05 11:23 67535 html5/ Web前端/ bootstrap/ javascript/ css3/ jquery

上講回顧：Bootstrap的基礎CSS(Base CSS)提供了優雅，一致的多種基礎Html頁面要素，包括排版,表格,表單,按鈕等,能夠滿足前端工程師的基本要素需求。

Bootstrap作為完整的前端工具集，內建了大量的強大優雅可重用的組件,包括按鈕(Button),導航(Navigation),標簽(Labels)，徽章(Badges)，排版(Typography)，縮略圖( thumbnails),提醒(Alert)，進度條(progress bar)，雜項(Miscellaneous)。本講將深入講解這些內容。

1. 按鈕(Button)

上講最后提及到button的多種簡單樣式，然而在bootstrap中可以通過組合button，從而獲得更多類似於工具條的功能，組件中的按鈕可以組合成按鈕組(button group)和按鈕式下拉菜單(button drown menu).

(下一講的Javascript Plugin會提及到更多的按鈕的應用).

1.1 按鈕組(button group)

按鈕組顧名思義是將多個按鈕集合成一個頁面部件。只需要使用btn-group類和一系列的<a>或者<button>標簽，就可以輕易地生成一個按鈕組或者按鈕工具條。關於btn-group的編程實踐上：

建議在單一的按鈕組中不要混合使用<a>和<button>標簽，只用它們其中一個。
同一按鈕組最好使用單一色
使用圖標的時候要確保正確的引用位置

按鈕組和按鈕工具條都非常容易實現，如圖3-1所示：

圖3-1 按鈕組(button group)

1.2 按鈕式下拉菜單(button drown menu)

Bootstrap允許使用任意的按鈕標簽來觸發一個下拉菜單，只需要將正確的菜單內容並置於在.btn-group類標簽內。如圖3-2所示：

圖3-2 按鈕下拉菜單

以上兩種按鈕組件，代碼片段如下：

View Code

  <div class="span4 well pricehover">
                       <h2>按鈕組</h2>
      <div class="btn-group" style="margin: 9px 0;">
          <button class="btn btn-large btn-primary">Left</button>
          <button class="btn btn-large  btn-primary">Middle</button>
          <button class="btn   btn-large btn-primary">Right</button>
        </div>

        </div>
 <div class="span4 well pricehover">
<h2>按鈕工具條</h2>
    <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn">1</button>
          <button class="btn">2</button>
          <button class="btn">3</button>
          <button class="btn">4</button>
        </div>
        <div class="btn-group">
          <button class="btn">5</button>
          <button class="btn">6</button>
          <button class="btn">7</button>
        </div>
        <div class="btn-group">
          <button class="btn">8</button>
        </div>
      </div>
        </div>

<div class="span8 well pricehover">

      <h3>按鈕下拉菜單</h3>
      <p></p>
      <div class="btn-toolbar" >
        <div class="btn-group">
          <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group">
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->

同時bootstrap還有分隔符的下拉菜單和上拉菜單按鈕，可以參考文檔。

2.導航(Navigation)

2.1 輕量導航(Nav,tabs,and pills)

bootstrap的導航非常多樣和靈活，允許使用同樣的標簽，不同的CSS類，帶來不同風格的導航條，具有非常高的可定制性。所有的導航組件，包括tabs,pills,lists標簽，都必須使用.nav的類實現基礎的導航標簽。除了我們常見的導航，還可以利用.nav-stacked類來實現堆疊式(stacked)--豎式的導航條。

如圖3-3所示，展示了多種基礎風格的導航。

圖3-3 多種基礎風格導航

代碼片段如下：

View Code

<div class="row">

     
        <div class="span5 well pricehover">
                       <h2>基礎tabs</h2>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
        </div>
 <div class="span5 well pricehover">
  <h3>基礎pills</h3>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
        </div>
    
      </div>
       


      <div class="row">
        <div class="span5 well pricehover">
      <h3>豎排tabs</h3>
      <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
        </div>
        
      
              <div class="span5 well pricehover">
      <h3>豎排pills</h3>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
        </div>

      </div>

下拉菜單的導航條和列表式(Nav list)的導航條都是頁面常用要素，Nav list 類似於OSX的Finder，可以帶有圖標。它們同樣可以用.nav 作為基礎類，來實現這些組件。同時還有各種tab風格的導航條，在下講再補充。如圖3-4所示：

圖3-4 列表與下拉導航

代碼依然簡單，片段如下：

View Code

  <div class="span5 well pricehover">
                       <h2>基礎Nav List</h2>
      <ul class="nav nav-list">
          <li class="nav-header">List header</li>
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li><a href="#">Applications</a></li>
          <li class="nav-header">Another list header</li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li class="divider"></li>
          <li><a href="#">Help</a></li>
        </ul>
        </div>
        
 <div class="span5 well pricehover">
  <h3>圖標List</h3>
  
    <ul class="nav nav-list">
          <li class="nav-header">List header</li>
          <li class="active"><a href="#"><i class="icon-white icon-home"></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 class="nav-header">Another list header</li>
          <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        </ul>
      
        </div>
    
      </div>
       


      <div class="row">
        <div class="span5 well pricehover">
      <h3>pills式的下拉菜單</h3>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
        </div>
        
      
              <div class="span5 well pricehover">
      <h3>tab式的下拉菜單</h3>
     <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
        </div>

2.2 導航條(Navbar)

最最重要的頁面要素，莫過於頁面頭部的導航條，這是幾乎任何頁面都會使用到的。Bootstrap提供的基礎樣式的導航條，是目前互聯網的流行的“硬又黑”，當然你可以用Less來定制它。我們要注意到導航條的基礎類不再是.nav而是navbar。

，至於頂部或者底部，用navbar-fixed-top與navbar-fixed-bottom來置頂/底.同時可以在navbar中使用form要素，比如.navbar-form。同時支持響應式操作，通過.nav-collapse或者直接是.collapse類實現。如圖3-5所示：

圖3-5 導航條

代碼片段如下：

View Code

   <div class="span10 well pricehover">
     <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <ul class="nav pull-right">
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->
        </div>

2.3 面包屑導航(Breadcrumbs)與頁碼(Pagination)

面包屑導航(BreadCrumbs)導航用作顯示用戶在網站或者App的位置，關於Breadcrumbs 面包屑導航的優點與對SEO的作用，請參考這個頁面。Bootstrap的“面包”用在代碼倉庫式的頁面很優雅，具體實現如圖3-6所示：

圖3-6 面包屑導航(BreadCrumbs)

頁碼(Pagination)也是非常常用的頁面要素，Bootstrap提供兩種風格的翻頁組件。一個是多頁面導航，用於多個頁碼的跳轉，它具有極簡主義風格的翻頁提示，能夠很好應用在結果搜索頁面；另一種則是Pager，是輕量級組件，可以快速翻動上下頁，適用於個人博客或者雜志。如圖3-7所示：

圖3-7 頁碼(Pagination)

以上兩種導航，代碼片段如下：

View Code

        <div class="span10 well pricehover">
    <ul class="breadcrumb">
        <li class="active">Home</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li class="active">Library</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li><a href="#">Library</a> <span class="divider">/</span></li>
        <li class="active">Data</li>
      </ul>
        </div>
        
 <div class="span5 well pricehover">
<div class="pagination">
        <ul>
          <li class="disabled"><a href="#">&laquo;</a></li>
          <li class="active"><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="#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination">
        <ul>
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">10</a></li>
          <li class="active"><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination">
        <ul>
          <li><a href="#">&laquo;</a></li>
          <li class="active"><a href="#">10</a></li>
          <li class="disabled"><a href="#">...</a></li>
          <li><a href="#">20</a></li>
          <li><a href="#">&raquo;</a></li>
        </ul>
      </div>
      <div class="pagination pagination-centered">
        <ul>
          <li class="active"><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>
        </ul>
      </div>
      </div>

     
 <div class="span5 well pricehover">
      
<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>
    </div>
    </div>

3.標簽(Label)、徽章(Badges)、排版(Typographic)與縮略圖(Thumbnails)

3.1 標簽(Label)與徽章(Badges)

標簽是一個很好用的頁面小要素，bootstrap具有多種顏色標簽，表達不同的頁面信息。只需要簡單使用label標簽即可。徽章是細小而簡單的組件，用於指示或者計算某種類別的要素，在在email客戶端很常見，實際上在一些簽到式的網站(LBS)上也常常用到。如圖3-8所示：

圖3-8 標簽(Label)與徽章(Badges)

代碼片段如下：

View Code

    <div class="span5 well pricehover">
    <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Labels</th>
        <th>Markup</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span class="label">Default</span>
        </td>
        <td>
          <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-success">Success</span>
        </td>
        <td>
          <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-warning">Warning</span>
        </td>
        <td>
          <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-important">Important</span>
        </td>
        <td>
          <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-info">Info</span>
        </td>
        <td>
          <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
        </td>
      </tr>
      <tr>
        <td>
          <span class="label label-inverse">Inverse</span>
        </td>
        <td>
          <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
        </td>
      </tr>
    </tbody>
  </table>
        </div>
        
 <div class="span5 well pricehover">
 <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Example</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Default
            </td>
            <td>
              <span class="badge">1</span>
            </td>
            <td>
              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              Success
            </td>
            <td>
              <span class="badge badge-success">2</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              Warning
            </td>
            <td>
              <span class="badge badge-warning">4</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              Important
            </td>
            <td>
              <span class="badge badge-important">6</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              Info
            </td>
            <td>
              <span class="badge badge-info">8</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
            </td>
          </tr>
          <tr>
            <td>
              Inverse
            </td>
            <td>
              <span class="badge badge-inverse">10</span>
            </td>
            <td>
              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
            </td>
          </tr>
        </tbody>
      </table>
      </div>

3.2 排版(Typographic)

我們在第一講就提及到排版(Typographic)，這里主要是涉及到兩個排版組件:Hero-unit,Page-header.Hero-unit是一個輕量級的可擴展的組件，主要用於市場推廣網站顯示它們大量的要素。而Page-header則是簡單為頁面段落的頭部設置一個合適的空間和排版形式。如圖3-9所示：

圖3-9 排版(Typographic)

代碼片段如下：

View Code

<div class="container-fliud">

   

      

      <div class="row-fliud">

     
        <div class="span5 pricehover hero-unit">
    
        <h1>Hello, world!</h1>
        <p>簡單的hero unit.</p>
       
      </div>

        </div>
        <div class="row-fliud">
 <div class="span5well pricehover">
 <div class="page-header">
        <h1>  page header 例子   <small>Subtext for header</small></h1>    
      </div>
      半小時左右，每25分鍾集中精力工作，然后休息5分鍾。哪怕工作沒有
      完成，也要定時休息，然后再進入下一個番茄時間。 
　　
      </div>
</div>

3.3 縮略圖(Thumbnails)

縮略圖，可以作為圖片，視頻，文字的格網結構展示。實現默認形式的bootstrap縮略圖，只需要簡單的thumbnails標簽。Thumbnails多應用於圖片、視屏的搜索結果等頁面，還可以鏈接到其他頁面。同樣的它具有很好的可定制性，可以將文章片段，按鈕等標簽融入縮略圖，同時可以混合與匹配不同大小的縮略圖。如圖3-10,3-11所示：

圖3-10 縮略圖1(thumbnails)

圖3-11 縮略圖2(thumbnails)

代碼片段如下：

View Code

<div class="span6">
                       <h2>環繞式縮略圖</h2>
      <ul class="thumbnails">
        <li class="span4">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/360x268" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
        <li class="span2">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/160x120" alt="">
          </a>
        </li>
      </ul>
<div class="span6 ">
                       <h2>默認縮略圖</h2>
      <ul class="thumbnails">
        <li class="span3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
        <li class="span3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
          </a>
        </li>
      
      </ul>
        </div>
        
 <div class="span6 ">
<h2>可定制</h2>
   <ul class="thumbnails">
        <li class="span3">
          <div class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="caption">
              <h5>Thumbnail label</h5>
              <p>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.</p>
              <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
            </div>
          </div>
        </li>
        <li class="span3">
          <div class="thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="caption">
              <h5>Thumbnail label</h5>
              <p>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.</p>
              <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
            </div>
          </div>
        </li>
      </ul>
        </div>

4.提醒區域(Alerts),進度條(Progressing Bar)，雜項(Miscellaneous)

4.1提醒區域(Alerts)

在Bootstrap 2中重寫了提醒區域的基礎類，使用.alert簡化了原有的.alert-message 類。為了使得組件更為簡潔與耐用，Bootstrap去除了不同的alert block的外觀，內容具有更多padding邊距和可以顯示更多文字。如圖3-12所示：

圖3-12 提醒區域(Alert)

代碼片段如下：

View Code

  <div class="span3 well pricehover">
                        <h3>alert例子</h3>
      <div class="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>測試</strong>這是alert info提醒區域.
        </div>
        </div>
 

<div class="span4 well pricehover">
          <h3>alert例子</h3>
      <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>測試</strong>這是alert error提醒區域.
        </div>
        </div>

<div class="span3 well pricehover">
          <h3>alert例子</h3>
      <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>測試</strong>這是alert success提醒區域.
        </div>
        </div>

4.2 進度條(Processing Bar)

進度條，這也是不可缺少的頁面要素，在重定向，載入等頁面都經常用到，Bootstrap提供多種漂亮、簡單、多種顏色的進度條。不過其中條紋和動畫效果的進度條不支持IE瀏覽器，原因是進度條使用了CSS3的漸變(gradients)、透明度(transitions)、動畫效果(animations)來實現它們的效果。IE7-9和舊版的Firefox都不支持這些特性，所以在實現進度條的時候請注意瀏覽器支持程度。如圖3-13所示，

圖3-13 進度條(Processing Bar)

代碼片段如下：

View Code

        <div class="span3 well pricehover">
                     <h3>基礎</h3>
      <p>默認的進度條 </p>
      <div class="progress">
        <div class="bar" style="width: 60%;"></div>
      </div>
        </div>
        
 <div class="span3 well pricehover">
       <h3>動畫效果</h3>
      <p>帶有條紋的動畫效果進度條 (no IE).</p>
      <div class="progress progress-striped active">
        <div class="bar" style="width: 45%">
        </div>
</div>
</div>
<div class="span4 well pricehover">
         <h3>Striped</h3>
      <p>使用透明度來生成條紋效果 (no IE).</p>
      <div class="progress progress-striped">
        <div class="bar" style="width: 20%;"></div>
        </div>


        </div>

4.3 雜項(Miscellaneous)

Bootstrap的雜項包括兩個輕量級的組件，一個是well，用於表達插入效果。另一個是關閉圖標，可以用於提醒區域，模式窗口(Modal)的關閉。Modal將會在下講的javascript pluging中講解到。如圖3-14所示：

圖3-14 雜項(Miscellaneous)

代碼如下：

View Code

  <div class="span4  pricehover">
                      <h2>Wells</h2>
      <p>使用Well來顯示插入效果</p>
      <div class="well">
        看！我是Well！
      </div>
        </div>
        
 <div class="span3 well pricehover">
      <h2>關閉圖標</h2>
      <p>用於提醒區域，模式窗口(Modal)的關閉.</p>
      <p><button class="close" style="float: none;">&times;</button></p>
</div>

參考文獻與延伸閱讀：

1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp

本作品由VentLam創作，采用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 BootStrap入門教程 (一) BootStrap入門教程 (四) BootStrap入門教程 (二) BootStrap入門教程 (一) Bootstrap框架菜鳥入門教程 SpringBoot入門教程(七)整合themeleaf+bootstrap TensorFlow入門教程 MATLAB入門教程 SeetaFace 入門教程 kubernetes入門教程