Bootstrap之表格详解编程语言

为任意 table 标签添加.table类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

 table 

 thead 

 th # /th 

 th First Name /th 

 th Last Name /th 

 th Username /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td Mark /td 

 td Otto /td 

 td @mdo /td 

 /tr 

 td 2 /td 

 td Jacob /td 

 td Thornton /td 

 td @fat /td 

 /tr 

 td 3 /td 

 td Larry /td 

 td the Bird /td 

 td @twitter /td 

 /tr 

 /tbody 

 /table 

通过.table-striped类可以给 tbody 之内的每一行增加斑马条纹样式。

 table 

 thead 

 th # /th 

 th First Name /th 

 th Last Name /th 

 th Username /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td Mark /td 

 td Otto /td 

 td @mdo /td 

 /tr 

 td 2 /td 

 td Jacob /td 

 td Thornton /td 

 td @fat /td 

 /tr 

 td 3 /td 

 td Larry /td 

 td the Bird /td 

 td @twitter /td 

 /tr 

 /tbody 

 /table 

添加.table-bordered类为表格和其中的每个单元格增加边框。

 table 

 thead 

 th # /th 

 th First Name /th 

 th Last Name /th 

 th Username /th 

 /tr 

 /thead 

 tbody 

 td rowspan="2" 1 /td 

 td Mark /td 

 td Otto /td 

 td @mdo /td 

 /tr 

 td Mark /td 

 td Otto /td 

 td @TwBootstrap /td 

 /tr 

 td 2 /td 

 td Jacob /td 

 td Thornton /td 

 td @fat /td 

 /tr 

 td 3 /td 

 td colspan="2" Larry the Bird /td 

 td @twitter /td 

 /tr 

 /tbody 

 /table 

通过添加.table-hover类可以让 tbody 中的每一行对鼠标悬停状态作出响应。

 table 

 thead 

 th # /th 

 th First Name /th 

 th Last Name /th 

 th Username /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td Mark /td 

 td Otto /td 

 td @mdo /td 

 /tr 

 td 2 /td 

 td Jacob /td 

 td Thornton /td 

 td @fat /td 

 /tr 

 td 3 /td 

 td colspan="2" Larry the Bird /td 

 td @twitter /td 

 /tr 

 /tbody 

 /table 

通过添加.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

 table 

 thead 

 th # /th 

 th First Name /th 

 th Last Name /th 

 th Username /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td Mark /td 

 td Otto /td 

 td @mdo /td 

 /tr 

 td 2 /td 

 td Jacob /td 

 td Thornton /td 

 td @fat /td 

 /tr 

 td 3 /td 

 td colspan="2" Larry the Bird /td 

 td @twitter /td 

 /tr 

 /tbody 

 /table 

通过这些状态类可以为行或单元格设置颜色。

Class     描述

.active           鼠标悬停在行或单元格上时所设置的颜色

.success       标识成功或积极的动作

.info         标识普通的提示信息或动作

.warning       标识警告或需要用户注意

.danger         标识危险或潜在的带来负面影响的动作

 table 

 thead 

 th # /th 

 th Column heading /th 

 th Column heading /th 

 th Column heading /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 2 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 3 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 4 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 5 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 6 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 7 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 8 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 td 9 /td 

 td Column content /td 

 td Column content /td 

 td Column content /td 

 /tr 

 /tbody 

 /table 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/14480.html