Bootstrap table表格

 Bootstrap table

使用类 Class="table" 既可让table美化样式

 table 相关的Class

隔行换色      ：   table-striped

鼠标悬停效果：   table-hover

表格的边框   :     table-bordered

垂直居中     :      vertical-align

表头颜色：class="danger"  Success  等几种颜色

 1.页面添加引用

 

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