Bootstrap 長期專案開發使用總結No.3
程式碼
Bootstrap 允許您以兩種方式顯示程式碼：
- 第一種是 <code> 標籤。如果您想要內聯顯示程式碼，那麼您應該使用 <code> 標籤。
- 第二種是 <pre> 標籤。如果程式碼需要被顯示為一個獨立的塊元素或者程式碼有多行，那麼您應該使用 <pre> 標籤。
請確保當您使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： < 和 >。
表格
- 條紋表格
新增 .table-striped class，您將在 <tbody> 內的行上看到條紋
<table class="table table-striped"> <caption>條紋表格佈局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table>
- 邊框表格
通過新增 .table-bordered class，您將看到每個元素周圍都有邊框，且佔整個表格是圓角的
<table class="table table-bordered">
- 懸停表格
通過新增 .table-hover class，當指標懸停在行上時會出現淺灰色背景
<table class="table table-hover">
- 精簡表格
通過新增 .table-condensed class，行內邊距（padding）被切為兩半
<table class="table table-condensed">
- 響應式表格
通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型裝置（小於 768px）。當在大於 768px 寬的大型裝置上檢視時，看不到任何的差別。
<div class="table-responsive">
<table class="table">
<caption>響應式表格佈局</caption>
<thead>
<tr>
<th>產品</th>
<th>付款日期</th>
<th>狀態</th></tr>
</thead>
<tbody>
<tr>
<td>產品1</td>
<td>23/11/2013</td>
<td>待發貨</td></tr>
<tr>
<td>產品2</td>
<td>10/11/2013</td>
<td>發貨中</td></tr>
<tr>
<td>產品3</td>
<td>20/10/2013</td>
<td>待確認</td></tr>
<tr>
<td>產品4</td>
<td>20/10/2013</td>
<td>已退貨</td></tr>
</tbody>
</table>
</div>
表單
- 表單控制元件狀態
除了 :focus 狀態（即，使用者點選 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，並提供了表單驗證的 class。
- 輸入框焦點
當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
- 禁用的輸入框 input
如果您想要禁用一個輸入框 input，只需要簡單地新增 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當滑鼠的指標懸停在元素上時滑鼠指標的樣式。
- 禁用的欄位集 fieldset
對 <fieldset> 新增 disabled 屬性來禁用 <fieldset> 內的所有控制元件。
- 驗證狀態
Bootstrap 包含了錯誤、警告和成功訊息的驗證樣式。只需要對父元素簡單地新增適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用選擇選單（Fieldset disabled）</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止選擇</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>
Bootstrap 圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
- .img-rounded：新增 border-radius:6px 來獲得圖片圓角。
- .img-circle：新增 border-radius:50% 來讓整個圖片變成圓形。
- .img-thumbnail：新增一些內邊距（padding）和一個灰色的邊框。
響應式圖片
通過在 <img> 標籤新增 .img-responsive 類來讓圖片支援響應式設計。 圖片將很好地擴充套件到父元素。
Bootstrap 輔助類