Bootstrap中table类的使用
一、Bootstrap的介绍:Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
二、Bootstrap的引用: 将Bootstrap的css包中的bootstrap.min.css文件拷入网页的css中并引入。
三、Bootstrap的使用:
(一)、table类的使用。
1、table将按照table元素的大小均匀分布里面的td元素。如:
<table class="table"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> </table>
2、table-striped可以使奇数行的背景设为灰色。如:
<table class="table table-striped"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> </table>
3、table-bordered可以使边框显示。如:
<table class="table table-bordered"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> </table>
4、table-hover可以使鼠标悬停的行的背景变为灰色。如:
<table class="table table-hover table-bordered"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> </table>
5、table-condensed可以使行间距变小。如:
<table class="table table-hover table-bordered table-condensed"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> </table>
6、在td的class中加入:①active②success③warning④danger可以改变单元格的背景颜色。
7、–这样做在小屏幕上看的时候会自动出现水平滚动条,大屏幕自动消失