bootstrap基础学习五篇

时间：2023-03-08 19:34:18

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

相关文章