bootstrap之表格

给表格行或单元格添加颜色

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="table-responsive">  通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td class="success">Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr class="success">
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr class="info">
         <td>Sachin</td>
         <td  class="danger">Mumbai</td>
      </tr>
      <tr class="warning">
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>tbody>
      <tr class="danger">
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>tbody>
</table>
</div>

 

 

 表格类

1
2
3
4
5
6
7
<table class="table table-striped">          在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
 
<table class="table table-bordered">         为所有表格的单元格添加边框
 
<table class="table table-hover">            在 <tbody> 内的任一行启用鼠标悬停状态
 
<table class="table table-condensed">        让表格更加紧凑

 <tr>, <th> 和 <td> 类

1
2
3
4
5
6
   类                             描述
.active         对某一特定的行或单元格应用悬停颜色
.success            表示一个成功的或积极的动作
.warning            表示一个需要注意的警告
.danger         表示一个危险的或潜在的负面动作
.info                  表示信息变化的操作

 

posted @   坠落鱼  阅读(692)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示