線上書籍

Home

網頁設計與雲端應用

一、排版：範例 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）元素。