Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進(jìn)度條）
Components: Scrollspy
Scrollspy（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
文檔和示例，選擇表%28的樣式，考慮到它們在JavaScript插件%29中的優(yōu)先使用和引導(dǎo)。
實例
由于在第三方小部件(如日歷和日期選擇器)中廣泛使用表，我們已經(jīng)將表設(shè)計為選擇加入.只需添加基類.table給任何人<table>，然后使用自定義樣式或我們的各種包含的修飾符類進(jìn)行擴展。
使用最基本的表標(biāo)記，下面是.table-以表為基礎(chǔ)的表在Bootstrap中查找。所有表樣式都是在Bootstrap 4中繼承的。，這意味著任何嵌套表都將以與父表相同的方式樣式。
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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 Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
表頭選項
類似于表和暗表，使用修飾符類.thead-light或.thead-dark使<thead>S看上去是淺灰色還是深灰色。
<table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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 class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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-striped將斑馬條添加到<tbody>...
<table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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 class="table table-striped table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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-bordered用于表格和單元格的所有邊框。
<table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">4</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody></table>
<table class="table table-bordered table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">4</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody></table>
半覆蓋行
加.table-hover對象中的表行上啟用懸停狀態(tài)。<tbody>...
<table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
<table class="table table-hover table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
小桌
加.table-sm為了使桌子更緊湊，將細(xì)胞墊切成兩半。
<table class="table table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
<table class="table table-sm table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
上下文類
使用上下文類為表行或單個單元格著色。
<!-- On rows --><tr class="table-active">...</tr><tr class="table-primary">...</tr><tr class="table-secondary">...</tr><tr class="table-success">...</tr><tr class="table-danger">...</tr><tr class="table-warning">...</tr><tr class="table-info">...</tr><tr class="table-light">...</tr><tr class="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td></tr>
普通表背景變體在暗表中不可用，但是可以使用文本或背景實用程序以達(dá)到類似的風(fēng)格。
<!-- On rows --><tr class="bg-primary">...</tr><tr class="bg-success">...</tr><tr class="bg-warning">...</tr><tr class="bg-danger">...</tr><tr class="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr> <td class="bg-primary">...</td> <td class="bg-success">...</td> <td class="bg-warning">...</td> <td class="bg-danger">...</td> <td class="bg-info">...</td></tr>
向輔助技術(shù)傳達(dá)意義
使用顏色來增加意義只會提供一個視覺指示，不會傳達(dá)給輔助技術(shù)的用戶，比如屏幕閱讀器。確保顏色所表示的信息從內(nèi)容本身中明顯可見。可見文本%29，或通過其他方法包括，例如隱藏在.sr-only上課。
說明
阿<caption>函數(shù)就像表的標(biāo)題。它幫助屏幕閱讀器的用戶找到一個表格，了解它的內(nèi)容，并決定是否要閱讀它。
<table class="table"> <caption>List of users</caption> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</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>
響應(yīng)表
響應(yīng)表允許輕松地水平滾動表。通過添加.table-responsive上課.table或者，通過添加.table-responsive{-sm|-md|-lg|-xl}...
垂直裁剪/截斷
響應(yīng)表使用overflow-y: hidden，它剪輯掉超出表底部或頂部邊緣的任何內(nèi)容。特別是，這可以減少下拉菜單和其他第三方小部件。
總是有反應(yīng)
<table class="table table-responsive"> ...</table>
斷點特定
使用.table-responsive{-sm|-md|-lg|-xl}根據(jù)需要創(chuàng)建響應(yīng)表，直到特定的斷點。從該斷點開始，表將正常運行，而不是水平滾動。
<table class="table table-responsive-sm"> ...</table><table class="table table-responsive-md"> ...</table><table class="table table-responsive-lg"> ...</table><table class="table table-responsive-xl"> ...</table>
? 2011–2017 Twitter, Inc.
? 2011–2017 The Bootstrap Authors
根據(jù)MIT許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。