?Bootstrap table

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

?table 相關的Class

隔行換色 ? ? ?： ? table-striped

鼠標懸停效果： ? table-hover

表格的邊框 ? : ? ? table-bordered

垂直居中 ? ? : ? ? ?vertical-align

表頭顏色：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="stylesheet" />

View Code

?

2. 代碼實現

 <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.頁面效果

?

列表 ??

ul ?list-group

li ? list-group-item

徽章?badge

每個列表項顏色 在列表類后面追加:??list-group-item-(顏色) ?可以是Success ,?warning,danger........

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?表單

1.垂直樣式表單(默認)

表單分組： form-group

表單分項( input textarea)： form-control

2.水平樣式表單

?

轉載于:https://www.cnblogs.com/LZZ2017/p/6372300.html

總結

以上是生活随笔為你收集整理的Bootstrap table表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。