育將電腦工作室 - 線上書籍

網頁設計與雲端應用
=========

無數可複用的組件，包括

一、Glyphicons 字體圖標

1. 不要和其他組件混合使用  
   圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的<span style="color:#FF0000;"><span></span>標籤，並將圖標類應用到這個<span style="color:#FF0000;"><span></span>標籤上。
2. 只對內容為空的元素起作用  
   圖標類只能應用在不包含任何文本內容或子元素的元素上。
3. 實例 ```
  <pre class="brush:as3;">
  <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. [<font><font>alert</font></font>](http://v3.bootcss.com/components/#alerts)<font><font>組件中所包含的圖標是用來表示這是一條錯誤消息的，通過添加額外的</font></font> `.sr-only `<font><font>文本就可以讓輔助設備知道這條提示所要表達的意思了。</font></font> ```
  <pre class="brush:as3;">
  <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. 將下拉菜單觸發器和下拉菜單都包裹在<span style="color:#FF0000;">.dropdown</span>裡，或者另一個聲明了position: relative;的元素。然後加入組成菜單的HTML代碼。
2. 實例 ```
  <pre class="brush:as3;">
  <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. 向上：<font><font>通過為下拉菜單的父元素設置</font></font>`.dropup`<font><font>類，可以讓菜單向上彈出（默認是向下彈出的）。</font></font> ```
  <pre class="brush:as3;">
      <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. 標籤頁 ```
  <pre class="brush:as3;">
  <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. 膠囊式標籤頁：<span style="color:#FF0000;">nav-pills</span> ```
  <pre class="brush:as3;">
  <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>
  ```
  
  <font><font>膠囊是標籤頁也是可以垂直方向堆疊排列的。</font><font>只需添加</font></font>`.nav-stacked`<font><font>類。</font></font>
  
   ```
  <pre class="brush:as3;">
  <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> ```
  <pre class="brush:as3;">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      
      <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>
  
      
      <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>
    </div>
  </nav>
  ```
 
五、縮略圖

1. 實例：<http://tncomu10601.ugm.com.tw/web/11-5.html>   
   假圖：<https://fakeimg.pl/> ```
  <pre class="brush:as3;">
      
        <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. 實例 ```
  <pre class="brush:as3;">
  <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類和一個關閉按鈕。 ```
  <pre class="brush:as3;">
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </div>
  ```
 
七、面板

1. 基本實例  
   <font><font>默認的</font></font> `.panel `<font><font>組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。</font></font> ```
  <pre class="brush:as3;">
  <div class="panel panel-default">
    <div class="panel-body">
      基本實例
    </div>
  </div>
  ```
2. 帶標題的面板 <font><font>通過</font></font> `.panel-heading `<font><font>可以很簡單地為面板加入一個標題容器。</font><font>你也可以通過添加設置了</font></font> `.panel-title `<font><font>類的</font></font> `<h1> `<font><font>- </font></font> `<h6> `<font><font>標籤，添加一個預定義樣式的標題。</font><font>不過，</font></font> `<h1> `<font><font>- </font></font> `<h6> `<font><font>標籤的字體大小將被</font></font> `.panel-heading `<font><font>的樣式所覆蓋。</font></font>
  
  <font><font>為了給鏈接設置合適的顏色，務必將鏈接放到帶有</font></font> `.panel-title `<font><font>類的標題標籤內。</font></font>
  
   ```
  <pre class="brush:as3;">
  <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>
  ```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown