My前端bootstrap（三）

時間 2019-12-14

原文原文鏈接

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

1.1 按鈕組(button group)

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

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

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

圖3-1 按鈕組(button group)ide

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

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

圖3-2 按鈕下拉菜單網站

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

View Code

2.導航(Navigation)

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

bootstrap的導航很是多樣和靈活，容許使用一樣的標籤，不一樣的CSS類，帶來不一樣風格的導航條，具備很是高的可定製性。全部的導航組件，包括tabs,pills,lists標籤，都必須使用.nav的類實現基礎的導航標籤。除了咱們常見的導航，還能夠利用.nav-stacked類來實現堆疊式(stacked)--豎式的導航條。spa

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

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

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

View Code

主要明白了膠囊式按鈕blog

.....<ul class="nav nav-pills nav-stacked">

其中nav nav-pills聲明爲膠囊式按鈕，nav-stacked表示爲豎排

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

圖3-4 列表與下拉導航

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

View Code

定義一個下拉菜單<ul class ="nav nav-tabs">

<a class="dropdown-toggle" data-toggle="" href="#">Dropdown<b class="caret"></b></a>

                           <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>來進行分割

2.2 導航條(Navbar)

最最重要的頁面要素，莫過於頁面頭部的導航條，這是幾乎任何頁面都會使用到的。Bootstrap提供的基礎樣式的導航條。咱們要注意到導航條的基礎類再也不是.nav而是navbar。

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

圖3-5 導航條

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

View Code

導航條中的搜索欄

在標籤<a>中 class="collapse navbar-collapse"表示可摺疊起來的導航欄。頁面效果很不錯

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

圖3-7 頁碼(Pagination)

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

View Code

可用於分頁管理

3.標籤(Label)、徽章(Badges)

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

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

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

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

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。