10. Bootstrap樣式

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

1. 對齊：

   <!-- 靠左對齊，預設值 -->
   <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>
   

   表格

   <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. 背景

   <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. 為任意 <table> 標籤添加 .table 類可以為其賦予基本的樣式—少量的內補（padding）和水平方向的分隔線。
2. 條紋狀表格：通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。
3. 帶邊框的表格：添加 .table-bordered 類為表格和其中的每個單元格增加邊框。
4. 狀態類

   Class	描述
   .active	鼠標懸停在行或單元格上時所設置的顏色
   .success	標識成功或積極的動作
   .info	標識普通的提示信息或動作
   .warning	標識警告或需要用戶注意
   .danger	標識危險或潛在的帶來負面影響的動作

5. 響應式表格
   將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於768px寬度時，水平滾動條消失。

三、響應式圖片

1. 在Bootstrap版本3中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式佈局。其實質是為圖片設置了 max-width: 100%; 、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。

2. 如果需要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center 。請參考助手類章節了解更多關於 .center-block 的用法。

3. 範例

   <img src="..." class="img-responsive" alt="Responsive image">
   

4. 圖片型狀

   <img src="..." alt="圓角" class="img-rounded">
   <img src="..." alt="圓形" class="img-circle">
   <img src="..." alt="縮圖" class="img-thumbnail">
   

四、情境文本顏色

1. 範例

   <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. 預定義樣式

   <!-- Standard button -->
   <button type="button" class="btn btn-default">（默认样式）Default</button>
   
   <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
   <button type="button" class="btn btn-primary">（首选项）Primary</button>
   
   <!-- Indicates a successful or positive action -->
   <button type="button" class="btn btn-success">（成功）Success</button>
   
   <!-- Contextual button for informational alert messages -->
   <button type="button" class="btn btn-info">（一般信息）Info</button>
   
   <!-- Indicates caution should be taken with this action -->
   <button type="button" class="btn btn-warning">（警告）Warning</button>
   
   <!-- Indicates a dangerous or potentially negative action -->
   <button type="button" class="btn btn-danger">（危险）Danger</button>
   
   <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
   <button type="button" class="btn btn-link">（链接）Link</button>

    

2. 尺吋：需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。

   <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. 通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。