一憔四、說(shuō)明
bootstrap 也重置了表格這個(gè)標(biāo)簽，加入了表格常用的樣式般眉，比如隔行換色了赵，加邊框等，下面是 Bootstrap 的表格類名甸赃，它們可以組合使用
二柿汛、表格屬性
1、table
- 作用
添加基本樣式 - 栗子
<table class="table">
2埠对、table-striped
- 作用
隔行換色 - 栗子
<table class="table table-striped">
3络断、table-bordered
- 作用
給表格添加邊框 - 栗子
<table class="table table-striped table-bordered">
4、table-hover
- 作用
給每一行添加一個(gè)激活狀態(tài) - 栗子
<table class="table table-hover">
5项玛、table-condensed
- 作用
讓表格更加緊湊 - 栗子
<table class="table table-condensed">
三貌笨、行與者單元格
1、active
- 作用
鼠標(biāo)懸停在行或單元格上 - 栗子
<tr class="active"> <td class="active">
2襟沮、success
- 作用
標(biāo)識(shí)成功或積極的動(dòng)作 - 栗子
<tr class="success"> <td class="success">
3锥惋、info
- 作用
標(biāo)識(shí)普通的提示信息或動(dòng)作 - 栗子
<tr class="info"> <td class="info">
4昌腰、warning
- 作用
標(biāo)識(shí)警告或需要用戶注意 - 栗子
<tr class="warning"> <td class="warning">
5、danger
- 作用
標(biāo)識(shí)危險(xiǎn)或潛在的帶來(lái)負(fù)面影響的動(dòng)作 - 栗子
<tr class="danger"> <td class="danger">
四膀跌、其它
1遭商、sr-only
- 作用
隱藏行 - 栗子
<tr class="sr-only">
2、table-responsive
- 作用
表格父元素設(shè)置響應(yīng)式捅伤，小于 768px 出現(xiàn)邊框 - 栗子
<tr class="sr-only">
五株婴、綜合
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive" >
<tr>
<th>ID</th>
<th>用戶名</th>
<th>性別</th>
<th>手機(jī)</th>
<th>郵箱</th>
<th>地址</th>
<th>加入時(shí)間</th>
<th>狀態(tài)</th>
</tr>
<tr class="success">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2017-10-25</td>
<td>激活</td>
</tr>
<tr class="warning">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr class="danger">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr class="info">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr>
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
</table>
</div>
