bootstrap基础学习五篇

Posted 2020-06-16

bootstrap表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
标签     描述
<table>     为表格添加基础样式。
<thead>     表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>     表格主体中的表格行的容器元素（<tr>）。
<tr>     一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>     默认的表格单元格。
<th>     特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>     关于表格存储内容的描述或总结。

1.表格类：

下表样式可用于表格中：
类     描述     实例
.table     为任意 <table> 添加基本样式 (只有横向分隔线)     
.table-striped     在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)     
.table-bordered     为所有表格的单元格添加边框     
.table-hover     在 <tbody> 内的任一行启用鼠标悬停状态     
.table-condensed     让表格更加紧凑     
联合使用所有表格类

2.tr,th,td类

下表的类可用于表格的行或者单元格：
类     描述     实例
.active     将悬停的颜色应用在行或者单元格上     
.success     表示成功的操作     
.info     表示信息变化的操作     
.warning     表示一个警告的操作     
.danger     表示一个危险的操作

3.代码示例：

<div class="table-responsive"> 
     <table class="table table-bordered">
         <caption>基本表的布局</caption>
         <thead>
             <tr class="active">
                 <th>姓名</th>
                 <th>年龄</th>
                 <th>qq</th>
                 <th>telphone</th>
             </tr>
         </thead>
         <tbody>
             <tr class="success">
                 <td>向明</td>
                 <td>21</td>
                 <td>23456754353425<br/>3425324532458</td>
                 <td>12345678</td>
             </tr>

             <tr class="warning">
                 <td>向明</td>
                 <td>21</td>
                 <td>2345678</td>
                 <td>1234567854756756<br/>76654367546</td>
             </tr>

             <tr class="danger">
                 <td>向明</td>
                 <td>21</td>
                 <td>2345678</td>
                 <td>12345678</td>
             </tr>

             <tr>
                 <td>向明</td>
                 <td>21</td>
                 <td>2345678</td>
                 <td>12345678</td>
             </tr>
         </tbody>
     </table>
    </div>

4.几点说明：

a.<div class="table-responsive"> ...</div>,是修饰响应式布局。

b.<table class="table">...</table>,是基本表，<table class="table table-striped">，<table class="table table-bordered">，

<table class="table table-hover">，<table class="table table-condensed">，<tr class="active">，<tr class="success">等等。

c.效果参看：http://www.shouce.ren/api/view/a/778