bootstrap中table的使用方法和相關(guān)樣式

發(fā)布時(shí)間：2020-05-07 15:36:06 來(lái)源：億速云閱讀：556 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章主要介紹了bootstrap中table的使用方法和相關(guān)樣式，具有一定借鑒價(jià)值，需要的朋友可以參考下。如下資料是關(guān)于bootstrap中table的使用方法和相關(guān)樣式的內(nèi)容。

在使用bootstrap框架布局前，一定要先引入相關(guān)的jQuery，CSS，JS文件，不清楚的小伙伴可以看看我以前寫文章，如何在HTML頁(yè)面中使用bootstrap框架，或者參考Bootstrap視頻教程。

一、基本表格

基本布局完成以后，給<table>標(biāo)簽添加class類名 .table 就可以實(shí)現(xiàn)基本的表格樣式（少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線）。

bootstrap table實(shí)例：制作一個(gè)六行四列的表格用于統(tǒng)計(jì)學(xué)生信息，具體代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <table class="table" style="width: 800px;" >
         <thead>
             <tr><th>學(xué)號(hào)</th><th>姓名</th><th>年齡</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
     </table>
 </body>
</html>

效果圖：

bootstrap中table的使用方法和相關(guān)樣式

二、條紋狀表格

在基本表格的基礎(chǔ)上，給<table>標(biāo)簽添加class類名 .table-striped 就可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式。

 <table class="table table-striped " style="width: 800px;" >

效果如圖所示：

bootstrap中table的使用方法和相關(guān)樣式

三、帶邊框的表格

在<table>標(biāo)簽中，添加class類名.table-bordered 就可以為表格和其中的每個(gè)單元格增加邊框。

 <table class="table table-bordered " style="width: 800px;" >

效果如圖所示：

bootstrap中table的使用方法和相關(guān)樣式

四、鼠標(biāo)懸停表格

在<table>標(biāo)簽中，添加class類名 .table-hover 就可以讓 <tbody> 中的每一行對(duì)鼠標(biāo)懸停狀態(tài)作出響應(yīng)。當(dāng)鼠標(biāo)經(jīng)過(guò)第一行時(shí)，第一行的背景顏色變成了灰色。

 <table class="table table-hover " style="width: 800px;" >

效果如圖所示：

bootstrap中table的使用方法和相關(guān)樣式

五、緊縮表格

在<table>標(biāo)簽中，添加class類名 .table-condensed 可以讓表格變得更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半。

 <table class="table table-condensed " style="width: 800px;" >

對(duì)比上面的圖片，看看緊縮表格的效果：

bootstrap中table的使用方法和相關(guān)樣式 六、

六、響應(yīng)式表格

將含有class類名 .table 的元素包裹在含有類名 .table-responsive 的元素里面，就可以創(chuàng)建響應(yīng)式表格，當(dāng)屏幕小于768px時(shí)，水平滾動(dòng)，當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。

<table class="table" >
         <thead>
             <tr><th>學(xué)號(hào)</th><th>姓名</th><th>年齡</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
</table>

效果如圖所示：

bootstrap中table的使用方法和相關(guān)樣式

以上就是圖文詳解bootstrap框架中table的使用方法和相關(guān)樣式的詳細(xì)內(nèi)容，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊！

向AI問(wèn)一下細(xì)節(jié)

bootstrap中table的使用方法和相關(guān)樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽