這篇文章主要介紹了bootstrap4設(shè)置表格的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有祁連免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
Bootstrap4 基礎(chǔ)表格
Bootstrap4 通過(guò) .table 類(lèi)來(lái)設(shè)置基礎(chǔ)表格的樣式，實(shí)例如下:
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
條紋表格
通過(guò)添加 .table-striped 類(lèi)，您將在
內(nèi)的行上看到條紋，如下面的實(shí)例所示：實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
帶邊框表格
.table-bordered 類(lèi)可以為表格添加邊框
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
鼠標(biāo)懸停狀態(tài)表格
.table-hover 類(lèi)可以為表格的每一行添加鼠標(biāo)懸停效果（灰色背景）：
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
黑色背景表格
.table-dark 類(lèi)可以為表格添加黑色背景：
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
黑色條紋表格
聯(lián)合使用 .table-dark 和 .table-striped 類(lèi)可以創(chuàng)建黑色的條紋表格：
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
鼠標(biāo)懸停效果 - 黑色背景表格
聯(lián)合使用 .table-dark 和 .table-hover 類(lèi)可以設(shè)置黑色背景表格的鼠標(biāo)懸停效果：
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
指定意義的顏色類(lèi)
通過(guò)指定意義的顏色類(lèi)可以為表格的行或者單元格設(shè)置顏色：
.table-primary藍(lán)色: 指定這是一個(gè)重要的操作 .table-success綠色: 指定這是一個(gè)允許執(zhí)行的操作 .table-danger紅色: 指定這是可以危險(xiǎn)的操作 .table-info淺藍(lán)色: 表示內(nèi)容已變更 .table-warning橘色: 表示需要注意的操作 .table-active灰色: 用于鼠標(biāo)懸停效果 .table-secondary灰色: 表示內(nèi)容不怎么重要 .table-light淺灰色，可以是表格行的背景 .table-dark深灰色，可以是表格行的背景
表頭顏色
在 Bootstrap v4.0.0-beta.2 中.thead-dark 類(lèi)用于給表頭添加黑色背景， .thead-light 類(lèi)用于給表頭添加灰色背景:
在 Bootstrap v4.0.0-beta 這個(gè)版本中，.thead-inverse 類(lèi)用于給表頭添加黑色背景，.thead-default 類(lèi)用于給表頭添加灰色背景。
較小的表格
.table-sm 類(lèi)用于通過(guò)減少內(nèi)邊距來(lái)設(shè)置較小的表格:
實(shí)例
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
響應(yīng)式表格
.table-responsive 類(lèi)用于創(chuàng)建響應(yīng)式表格：在屏幕寬度小于 992px 時(shí)會(huì)創(chuàng)建水平滾動(dòng)條，如果可視區(qū)域?qū)挾却笥?992px 則顯示不同效果（沒(méi)有滾動(dòng)條）:
實(shí)例
# Firstname Lastname Age City Country Sex Example Example Example Example 1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes
你可以通過(guò)以下類(lèi)設(shè)定在指定屏幕寬度下顯示滾動(dòng)條：
.table-responsive-sm< 576px .table-responsive-md< 768px .table-responsive-lg< 992px .table-responsive-xl< 1200px
實(shí)例
...
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享bootstrap4設(shè)置表格的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
重慶分公司
重慶分公司
