Bootstrap table表格簡單操作

發(fā)布時間：2020-09-20 18:41:53 來源：腳本之家閱讀：181 作者：逆方向欄目：web開發(fā)

Bootstrap table表格簡單實例分享給大家，供大家參考，具體內(nèi)容如下

使用類 Class="table" 既可讓table美化樣式

table 相關(guān)的Class

隔行換色： table-striped

鼠標(biāo)懸停效果： table-hover

表格的邊框：table-bordered

表頭顏色：class="danger" Success 等幾種顏色

1.頁面添加引用

<script src="../Bootstrap/jquery-3.1.1.js"></script>
 <script src="../Bootstrap/js/bootstrap.min.js"></script>
 <link href="../Bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />

2. 代碼實現(xiàn)

 <table class="table table-striped table-hover table-bordered">
   <thead>
    <tr class="danger"> <%--表頭顏色--%>
     <td>姓名</td>
     <td>年齡</td>
     <td>性別</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>張三</td>
     <td>20</td>
     <td>男</td>
    </tr>
   </tbody>
   </table>

3.頁面效果

Bootstrap table表格簡單操作

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

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

Bootstrap table表格簡單操作

猜你喜歡

最新資訊

相關(guān)推薦

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