Bootstrap（二）基本樣式
阿新 • • 發佈：2018-11-13
表格
受支援的表格標籤
受支援的表格標籤列表以及使用方法。
| 標籤 | 描述 |
|---|---|
<table> |
包裹以表格形式展示資料的元素 |
<thead> |
包含表頭(<tr>) 的容器 |
<tbody> |
包含表格內容(<tr>)的容器 |
<tr> |
單元格 (<td> 或 <th>) 容器 |
<td> |
預設的單元格 |
<th> |
每列(或行，依賴於放置的位置)所對應的的label |
<caption> |
用於對錶的描述或總結，對螢幕閱讀器特別有用 |
為 <table> 標籤增加基本樣式--很少的內補(padding)並只增加水平分隔線--只要為其增加 .table 類即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../css/bootstrap.css" rel="stylesheet"/> <script src="../jquery/jquery.js"></script> <script src="../js/bootstrap.js"></script> </head> <body> <h1>表格</h1> <div> <table class="table table-striped table-hover table-bordered table-condensed"> <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="error"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="warning"> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </div> </body> </html>
.table-striped 斑馬紋
.table-bordered 為表格增加邊框(border)和圓角(rounded corner)。
.table-hover 為 <tbody> 中的每一行賦予滑鼠懸停樣式。
.table-condensed 每個單元格的內補(padding)減半可使表格更緊湊。
選擇情景(contextual)類為表格新增顏色。
| Class | Description |
|---|---|
.success |
表示成功或積極的行為。 |
.error |
表示一個危險或存有潛在危險的行為。 |
.warning |
表示警告，可能需要注意。 |
.info |
作為一個預設樣式的一個替代樣式。 |
表單
預設樣式
無需對<form>新增任何類或改變標籤結構，每個單獨的表單控制元件都已經被賦予了樣式。預設是堆疊、label左側對齊並在控制元件之上。
<div>
<form>
<label>姓名</label>
<input type="text" required="required">
<label>
記住我
<input type="checkbox" class="checkbox">
</label>
<input type="submit" class="btn"/>
</form>
</div>
可選佈局
搜尋表單
為表單增加.form-search類，併為<input>增加.search-query類，可將輸入框變成圓角狀。
<div>
<h1></h1>
<form class="form-search">
<input type="text" class="search-query"/>
<button class="btn">search</button>
</form>
</div>
行內表單
為表單增加.form-inline類， 結果是一個壓縮型排列的表單，其中label左側對齊、控制元件為inline-block型別。
<form class="form-inline">
<input type="text" placeholder="name">
<input type="text" placeholder="pwd">
<label class="checkbox">remenber
<input type="checkbox"/>
</label>
<button class="btn">點選</button>
</form>
水平表單
右側對齊並且左側浮動的label和控制元件排列在同一行。這需要對預設的表單格式做修改：R
- 為表單新增
.form-horizontal類 - 將label和控制元件包裹在
.control-group中 - 為label新增
.control-label類 - 將任何相關的控制元件包裹在
.controls中，以確保最佳的對齊
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">name:</label>
<div class="controls">
<input type="text"/>
</div>
</div>
<div class="control-group">
<label class="control-label">email:</label>
<div class="controls">
<input type="text"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox" >
remember
<input class="controls" type="checkbox"/>
</label>
</div>
</div>
</form>