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.水平样式表单