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

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

一、排版：範例 <http://tncomu10601.ugm.com.tw/web/9-1.html>

1. 對齊： ```
  <pre class="brush:as3;">
  
  <p class="text-left">Left aligned text.</p>
  
  <p class="text-center">Center aligned text.</p>
  
  <p class="text-right">Right aligned text.</p>
  
  <p class="text-justify">Justified text.</p>
  
  <p class="text-nowrap">No wrap text.</p>
  ```
  
   表格 ```
  <pre class="brush:as3;">
  <table class="table table-bordered">
  <tr>
  <td class="text-center">text-center</td>
  <td class="text-left">text-left</td>
  <td class="text-right">text-right</td>
  <td class="text-justify">text-justify</td>
  <td class="text-nowrap">text-nowrap</td>
  </tr>
  </table>
  ```
2. 背景 ```
  <pre class="brush:as3;">
  <div class="bg-primary">bg-primary</div>
  <div class="bg-success">bg-success</div>
  <div class="bg-info">bg-info</div>
  <div class="bg-warning">bg-warning</div>
  <div class="bg-danger">bg-danger</div>
  ```
 
二、表格

1. <font><font>為任意</font></font> `<table> `<font><font>標籤添加</font></font> `.table `<font><font>類可以為其賦予基本的樣式—少量的內補（padding）和水平方向的分隔線。</font></font>
2. 條紋狀表格：<font><font>通過</font></font> `.table-striped `<font><font>類可以給</font></font> `<tbody> `<font><font>之內的每一行增加斑馬條紋樣式。</font></font>
3. <font><font>帶邊框的表格：添加</font></font> `.table-bordered `<font><font>類為表格和其中的每個單元格增加邊框。</font></font>
4. 狀態類 <div class="table-responsive"> <table class="table table-bordered table-striped"> <colgroup> <col class="col-xs-1"></col> <col class="col-xs-7"></col> </colgroup> <thead> <tr> <th><font><font>Class</font></font></th> <th><font><font>描述</font></font></th> </tr> </thead> <tbody> <tr> <th scope="row">`.active `</th> <td><font><font>鼠標懸停在行或單元格上時所設置的顏色</font></font></td> </tr> <tr> <th scope="row">`.success `</th> <td class="success"><font><font>標識成功或積極的動作</font></font></td> </tr> <tr> <th scope="row">`.info `</th> <td><font><font>標識普通的提示信息或動作</font></font></td> </tr> <tr class="warning"> <th scope="row">`.warning `</th> <td><font><font>標識警告或需要用戶注意</font></font></td> </tr> <tr> <th scope="row">`.danger `</th> <td><font><font>標識危險或潛在的帶來負面影響的動作</font></font></td> </tr> </tbody> </table>
  
   </div>
5. 響應式表格  
   <font><font>將任何</font></font> `.table `<font><font>元素包裹在</font></font> `.table-responsive `<font><font>元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。</font><font>當屏幕大於768px寬度時，水平滾動條消失。</font></font>
 
<font><font>三、響應式圖片</font></font>

1. <font><font>在Bootstrap版本3中，通過為圖片添加</font></font> `.img-responsive `<font><font>類可以讓圖片支持響應式佈局。</font><font>其實質是為圖片設置了</font></font> `max-width: 100%; `<font><font>、</font></font> `height: auto; `<font><font>和</font></font> `display: block; `<font><font>屬性，從而讓圖片在其父元素中更好的縮放。</font></font>
2. <font><font>如果需要讓使用了 `.img-responsive `類的圖片水平居中，請使用 `.center-block `類，不要用 `.text-center `。[請參考助手類章節](http://v3.bootcss.com/css/#helper-classes-center)了解更多關於 `.center-block `的用法。</font></font>
3. 範例 ```
  <pre class="brush:as3;">
  <img src="..." class="img-responsive" alt="Responsive image">
  ```
4. 圖片型狀 ```
  <pre class="brush:as3;">
  <img src="..." alt="圓角" class="img-rounded">
  <img src="..." alt="圓形" class="img-circle">
  <img src="..." alt="縮圖" class="img-thumbnail">
  ```
 
四、情境文本顏色

1. 範例 ```
  <pre class="brush:as3;">
  <p class="text-muted">...</p>
  <p class="text-primary">...</p>
  <p class="text-success">...</p>
  <p class="text-info">...</p>
  <p class="text-warning">...</p>
  <p class="text-danger">...</p>
  ```
 
五、按鈕：<http://tncomu10601.ugm.com.tw/web/9-5-1.html>

1. 預定義樣式 ```
  <pre class="brush:as3;">
  
  <button type="button" class="btn btn-default">（默认样式）Default</button>
  
  
  <button type="button" class="btn btn-primary">（首选项）Primary</button>
  
  
  <button type="button" class="btn btn-success">（成功）Success</button>
  
  
  <button type="button" class="btn btn-info">（一般信息）Info</button>
  
  
  <button type="button" class="btn btn-warning">（警告）Warning</button>
  
  
  <button type="button" class="btn btn-danger">（危险）Danger</button>
  
  
  <button type="button" class="btn btn-link">（链接）Link</button>
  ```
2. 尺吋：<font><font>需要讓按鈕具有不同尺寸嗎？</font><font>使用</font></font>`.btn-lg`<font><font>、</font></font>`.btn-sm`<font><font>或</font></font>`.btn-xs`<font><font>就可以獲得不同尺寸的按鈕。</font></font> ```
  <pre class="brush:as3;">
  <p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
  </p>
  ```
3. <font><font>通過給按鈕添加</font></font>`.btn-block`<font><font>類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。</font></font>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown