12. Bootstrap組件

無數可複用的組件，包括

一、Glyphicons 字體圖標

1. 不要和其他組件混合使用
   圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的<span>標籤，並將圖標類應用到這個<span>標籤上。
2. 只對內容為空的元素起作用
   圖標類只能應用在不包含任何文本內容或子元素的元素上。
3. 實例

   <button type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
   </button>
   
   <button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
   </button>

4. alert組件中所包含的圖標是用來表示這是一條錯誤消息的，通過添加額外的 .sr-only 文本就可以讓輔助設備知道這條提示所要表達的意思了。

   <div class="alert alert-danger" role="alert">
     <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
     <span class="sr-only">Error:</span>
     Enter a valid email address
   </div>

二、下拉菜單

1. 將下拉菜單觸發器和下拉菜單都包裹在.dropdown裡，或者另一個聲明了position: relative;的元素。然後加入組成菜單的HTML代碼。
2. 實例

   <div class="dropdown">
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
       Dropdown
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li role="separator" class="divider"></li>
       <li><a href="#">Separated link</a></li>
     </ul>
   </div>
   

3. 向上：通過為下拉菜單的父元素設置.dropup類，可以讓菜單向上彈出（默認是向下彈出的）。

       <div class="container" style="margin-top:400px;">
         <div class="dropup">
           <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropup
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
             <li><a href="#">Something else here</a></li>
             <li role="separator" class="divider"></li>
             <li><a href="#">Separated link</a></li>
           </ul>
         </div>
       </div>
   

    

三、導航

1. 標籤頁

   <ul class="nav nav-tabs">
     <li role="presentation" class="active"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation"><a href="#">Messages</a></li>
   </ul>
   

2. 膠囊式標籤頁：nav-pills

   <ul class="nav nav-pills">
     <li role="presentation" class="active"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation"><a href="#">Messages</a></li>
   </ul>

   膠囊是標籤頁也是可以垂直方向堆疊排列的。只需添加.nav-stacked類。
    

   <ul class="nav nav-pills nav-stacked">
     <li role="presentation" class="active"><a href="#">Home</a></li>
     <li role="presentation"><a href="#">Profile</a></li>
     <li role="presentation"><a href="#">Messages</a></li>
   </ul>

    

四、導航條

1. 實例：http://site.ugm.twgg.org/web/11-1.html

   <nav class="navbar navbar-default">
     <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Brand</a>
       </div>
   
       <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
           <li><a href="#">Link</a></li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li role="separator" class="divider"></li>
               <li><a href="#">One more separated link</a></li>
             </ul>
           </li>
         </ul>
         <form class="navbar-form navbar-left">
           <div class="form-group">
             <input type="text" class="form-control" placeholder="Search">
           </div>
           <button type="submit" class="btn btn-default">Submit</button>
         </form>
         <ul class="nav navbar-nav navbar-right">
           <li><a href="#">Link</a></li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
               <li><a href="#">Separated link</a></li>
             </ul>
           </li>
         </ul>
       </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
   </nav>

    

五、縮略圖

1. 實例：http://tncomu10601.ugm.com.tw/web/11-5.html 
   假圖：https://fakeimg.pl/

       
         <div class="bs-example" data-example-id="thumbnails-with-custom-content">
           <div class="row">
             <div class="col-sm-6 col-md-4">
               <div class="thumbnail">
                 <img src="http://fakeimg.pl/800x600/">
                 <div class="caption">
                   <h3>Thumbnail label</h3>
                   <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" role="button">Button </a> 
                     <a href="#" class="btn btn-default" role="button">Button</a>
                   </p>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-md-4">
               <div class="thumbnail">
                 <img src="http://fakeimg.pl/800x600/">
                 <div class="caption">
                   <h3>Thumbnail label</h3>
                   <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" role="button">Button </a> 
                     <a href="#" class="btn btn-default" role="button">Button</a>
                   </p>
                 </div>
               </div>
             </div>
             <div class="col-sm-6 col-md-4">
               <div class="thumbnail">
                 <img src="http://fakeimg.pl/800x600/">
                 <div class="caption">
                   <h3>Thumbnail label</h3>
                   <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" role="button">Button </a> 
                     <a href="#" class="btn btn-default" role="button">Button</a>
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>

    

六、警告框

1. 實例

   <div class="alert alert-success" role="alert">...</div>
   <div class="alert alert-info" role="alert">...</div>
   <div class="alert alert-warning" role="alert">...</div>
   <div class="alert alert-danger" role="alert">...</div>
   

2. 可關閉的警告框
   為警告框添加一個可選的.alert-dismissible類和一個關閉按鈕。

   <div class="alert alert-warning alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <strong>Warning!</strong> Better check yourself, you're not looking too good.
   </div>
   

七、面板

1. 基本實例
   默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。

   <div class="panel panel-default">
     <div class="panel-body">
       基本實例
     </div>
   </div>

2. 帶標題的面板

   通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1> -  <h6> 標籤，添加一個預定義樣式的標題。不過， <h1> -  <h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。

   為了給鏈接設置合適的顏色，務必將鏈接放到帶有 .panel-title 類的標題標籤內。

   <div class="panel panel-default">
     <div class="panel-heading">Panel heading without title</div>
     <div class="panel-body">
       面板內容
     </div>
   </div>
   
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">面板標題</h3>
     </div>
     <div class="panel-body">
       面板內容
     </div>
   </div>