你的位置:首页 > 网页设计

[网页设计]bootstrap_table_class表格样式实例

<div class="container"> <h2>表格</h2> <!--table标签级别的样式说明如下: ----.table 为任意表格添加基本样式 (只有横向分隔线) ----.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ----.table-bordered 为所有表格的单元格添加边框 ----.table-hover 指针悬停在行上时会出现浅灰色背景 ----.table-condensed 让表格更加紧凑 --> <table class="table table-striped table-bordered table-hover table-condensed">  <!--table标签下的字标签说明如下:  ----<thead> 用来标识表格的主题,即首行各列的标题  ----<tbody> 用来标识表格的主体部分,即首行各列标题下的数据  ----<caption> 关于表格存储内容的描述或总结  ----<tr> 行  ----<td> 列  ----<th> 列,字体会加粗  -->  <caption>该表格用于展示姓名列表<caption>  <thead>   <!--tr、th、td标签级别的样式说明如下:   ----.active 对某一特定的行或单元格应用悬停颜色   ----.success 表示一个成功的或积极的动作的颜色   ----.warning 表示一个需要注意的警告的颜色   ----.danger 表示一个危险的或潜在的负面动作的颜色   -->   <tr class="active">    <th>序号</th>    <th>姓名</th>   </tr>  </thead>  <tbody >   <tr>    <td class="success " >1</td>    <td class="warning ">炭烧小鸡</td>   </tr>   <tr class="danger ">    <td>2</td>    <td>躲在树下的猫</td>   </tr>   <tr>    <td>3</td>    <td>水牛</td>   </tr>  </tbody> </table></div>