Bootstrap4 表格

Bootstrap4 基礎(chǔ)表格

Bootstrap4 通過 .table 類來設(shè)置基礎(chǔ)表格的樣式，實(shí)例如下:

創(chuàng)新互聯(lián)公司長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為和田縣企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，和田縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

實(shí)例

<
table

class
=
"
table
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

條紋表格

通過添加 .table-striped 類，您將在 內(nèi)的行上看到條紋，如下面的實(shí)例所示：

實(shí)例

<
table

class
=
"
table table-striped
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

帶邊框表格

.table-bordered 類可以為表格添加邊框

實(shí)例

<
table

class
=
"
table table-bordered
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

鼠標(biāo)懸停狀態(tài)表格

.table-hover 類可以為表格的每一行添加鼠標(biāo)懸停效果（灰色背景）：

實(shí)例

<
table

class
=
"
table table-hover
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色背景表格

.table-dark 類可以為表格添加黑色背景：

實(shí)例

<
table

class
=
"
table table-dark
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色條紋表格

聯(lián)合使用 .table-dark 和 .table-striped 類可以創(chuàng)建黑色的條紋表格：

實(shí)例

<
table

class
=
"
table table-dark table-striped
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

鼠標(biāo)懸停效果 - 黑色背景表格

聯(lián)合使用 .table-dark 和 .table-hover 類可以設(shè)置黑色背景表格的鼠標(biāo)懸停效果：

實(shí)例

<
table

class
=
"
table table-dark table-hover
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

無邊框表格

.table-borderless 類可以設(shè)置一個(gè)無邊框的表格：

實(shí)例

<
table

class
=
"
table table-borderless
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

指定意義的顏色類

通過指定意義的顏色類可以為表格的行或者單元格設(shè)置顏色：

實(shí)例

<
table

class
=
"
table
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
Default
td
>

<
td
>
Defaultson
td
>

<
td
>
def@somemail.com
td
>

tr
>

<
tr

class
=
"
table-primary
"
>

<
td
>
Primary
td
>

<
td
>
Joe
td
>

<
td
>
joe@example.com
td
>

tr
>

<
tr

class
=
"
table-success
"
>

<
td
>
Success
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr

class
=
"
table-danger
"
>

<
td
>
Danger
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr

class
=
"
table-info
"
>

<
td
>
Info
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

<
tr

class
=
"
table-warning
"
>

<
td
>
Warning
td
>

<
td
>
Refs
td
>

<
td
>
bo@example.com
td
>

tr
>

<
tr

class
=
"
table-active
"
>

<
td
>
Active
td
>

<
td
>
Activeson
td
>

<
td
>
act@example.com
td
>

tr
>

<
tr

class
=
"
table-secondary
"
>

<
td
>
Secondary
td
>

<
td
>
Secondson
td
>

<
td
>
sec@example.com
td
>

tr
>

<
tr

class
=
"
table-light
"
>

<
td
>
Light
td
>

<
td
>
Angie
td
>

<
td
>
angie@example.com
td
>

tr
>

<
tr

class
=
"
table-dark text-dark
"
>

<
td
>
Dark
td
>

<
td
>
Bo
td
>

<
td
>
bo@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

下表列出了表格顏色類的說明:

類名	描述
.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 類用于給表頭添加黑色背景， .thead-light 類用于給表頭添加灰色背景:

在 Bootstrap v4.0.0-beta 這個(gè)版本中，.thead-inverse 類用于給表頭添加黑色背景，.thead-default 類用于給表頭添加灰色背景。

實(shí)例

<
table

class
=
"
table
"
>

<
thead

class
=
"
thead-dark
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

<
table

class
=
"
table
"
>

<
thead

class
=
"
thead-light
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

較小的表格

.table-sm 類用于通過減少內(nèi)邊距來設(shè)置較小的表格:

實(shí)例

<
table

class
=
"
table table-bordered table-sm
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

響應(yīng)式表格

.table-responsive 類用于創(chuàng)建響應(yīng)式表格：在屏幕寬度小于 992px 時(shí)會(huì)創(chuàng)建水平滾動(dòng)條，如果可視區(qū)域?qū)挾却笥?992px 則顯示不同效果（沒有滾動(dòng)條）:

實(shí)例

<
div

class
=
"
table-responsive
"
>

<
table

class
=
"
table
"
>

<
thead
>

<
tr
>

<
th
>
#
th
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Age
th
>

<
th
>
City
th
>

<
th
>
Country
th
>

<
th
>
Sex
th
>

<
th
>
Example
th
>

<
th
>
Example
th
>

<
th
>
Example
th
>

<
th
>
Example
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
1
td
>

<
td
>
Anna
td
>

<
td
>
Pitt
td
>

<
td
>
35
td
>

<
td
>
New York
td
>

<
td
>
USA
td
>

<
td
>
Female
td
>

<
td
>
Yes
td
>

<
td
>
Yes
td
>

<
td
>
Yes
td
>

<
td
>
Yes
td
>

tr
>

tbody
>

table
>

div
>

嘗試一下 ?

你可以通過以下類設(shè)定在指定屏幕寬度下顯示滾動(dòng)條：

類名	屏幕寬度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

實(shí)例

<
div

class
=
"
table-responsive-sm
"
>

<
table

class
=
"
table
"
>
...
table
>

div
>

嘗試一下 ?

新聞標(biāo)題：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4表格
網(wǎng)站地址：http://www.5511xx.com/article/codigid.html