Bootstrap V4系列 學習入門教程之 表格(Tables)和畫像(Figure)
- 表格(Tables)
- 一、Examples
- 二、Table head options 表格頭選項
- 三、Striped rows 條紋行
- 四、Bordered table 帶邊框的表格
- 五、Borderless table 無邊框表格
- 六、Hoverable rows 可懸停行
- 七、Contextual classes 情境類
- 畫像(Figure)
表格(Tables)
一、Examples
由于表格在日歷和日期選擇器等第三方小部件中的廣泛使用,我們將表格設計為可選擇加入。只需將基類.table
添加到任何<table>
中,然后使用自定義樣式或我們包含的各種修飾符類進行擴展。
使用最基本的表標記,以下是Bootstrap中基于.table
的表的外觀。Bootstrap 4繼承了所有表樣式,這意味著任何嵌套表都將以與父表相同的方式進行樣式設置。
<table class="table"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
您還可以使用.table-dark
反轉顏色——在深色背景上使用淺色文本。
<table class="table table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
二、Table head options 表格頭選項
與表格和深色表格類似,使用修飾符類.thead-light
或.thead-dark
使<thead>
顯示為淺灰色或深灰色。
<table class="table"><thead class="thead-dark"><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody>...</tbody>
</table>
頁面展示效果:
三、Striped rows 條紋行
使用.table-striped
為<tbody>
中的任何表行添加斑馬條紋。
<table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
四、Bordered table 帶邊框的表格
為表格和單元格的所有側面添加邊框。
<table class="table table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
五、Borderless table 無邊框表格
為無邊框的表格添加.table-borderless
。
<table class="table table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
六、Hoverable rows 可懸停行
添加.table-hover
以在<tbody>
內的表行上啟用懸停狀態。
<table class="table table-hover"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>
頁面展示效果:
七、Contextual classes 情境類
<div class="bd-example"><table class="table"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr class="table-active"><th scope="row">Active</th><td>Cell</td><td>Cell</td></tr><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-danger"><th scope="row">Danger</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr><tr class="table-light"><th scope="row">Light</th><td>Cell</td><td>Cell</td></tr><tr class="table-dark"><th scope="row">Dark</th><td>Cell</td><td>Cell</td></tr></tbody></table>
</div>
頁面展示效果:
畫像(Figure)
通過 Bootstrap 的畫像(figure)組件來顯示相關聯的圖片和文本。
任何時候需要顯示一段內容(例如帶有可選標題的圖片),請使用 <figure>
標簽。
.figure、.figure-img
和 .figure-caption
類為 HTML5 的 <figure>
和 <figcaption>
元素提供了一些基本樣式。<figure>
標簽內所包含的圖片如果沒有明確地設置尺寸的話,請務必為 <img>
標簽添加 .img-fluid
類,使其支持響應式布局。
<!--任何時候需要顯示一段內容(例如帶有可選標題的圖片),請使用 <figure> 標簽。 -->
<figure class="figure"><img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">A caption for the above image.</figcaption></figure>
頁面展示效果:
通過使用我們提供的 文本工具類
可以輕松對齊 <figure>
所包含的標題。
<!--通過使用我們提供的 文本工具類 可以輕松對齊 <figure> 所包含的標題。-->
<figure class="figure"><img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
頁面展示效果: