Bootstrap table表格

 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.水平樣式表單