BOOTSTRAP--表格

表格 表格应用

古典小说网

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

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

表格类

下表样式可用于表格中：

标签	描述
table	为表格添加基础样式。
table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
table-bordered	为所有表格的单元格添加边框
table-hover	在<tbody>内的任一行启用鼠标悬停状态
table-condensed	让表格更加紧凑

行、单元格类 tr\th\td

下表的类可用于表格的行或者单元格

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

表格

.table为任意表格添加基本样式（只有横向分割线）:

基本表格 添加 class .table

#	FirstName
1	Anna
2	Debbie
3	Jon

                           <table class="table">
                               <caption class="text-center">基本表格 添加 class .table</caption>
                               <thead>
                               <tr>
                                   <th>#</th>
                                   <th>FirstName</th>
                               </tr>
                               </thead>
                               <tbody>
                               <tr>
                                   <td>1</td>
                                   <td>Anna</td>
                               </tr>
                               <tr>
                                   <td>2</td>
                                   <td>Debbie</td>
                               </tr>
                               <tr>
                                   <td>3</td>
                                   <td>Jon</td>
                               </tr>
                               </tbody>
                           </table>
            

.table-striped 类在 tbody 内添加斑马线形式的条纹 ( IE8 不支持)

#	FirstName
1	Anna
2	Debbie
3	Jon

                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>FirstName</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Anna</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Debbie</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Jon</td>
                                </tr>
                                </tbody>
                            </table>
            

表格

.table-bordered 类为所有表格的单元格添加边框/p>

#	FirstName
1	Anna
2	Debbie
3	Jon

                 <table class="table table-striped table-bordered">
                     
                 </table>
            

表格

table-hover 类启用表格中 tbody 上的行的悬停效果/p>

#	FirstName
1	Anna
2	Debbie
3	Jon

                 <table class="table table-striped table-hover">

                 </table>
            

表格

table-condensed 类启用 紧凑效果

#	FirstName
1	Anna
2	Debbie
3	Jon

                 <table class="table table-striped table-condensed">

                 </table>
            

表格

active 类将悬停的颜色应用在行或者单元格上/p>

#	FirstName
1	Anna
2	Debbie
3	Jon
4	张三
5	张三

    <table class="table  table-bordered table-hover ">
        <thead>
        <tr>
            <th>#</th>
            <th>FirstName</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active"> <!-- 默认设置悬停颜色 -->
            <td>1</td>
            <td>Anna</td>
        </tr>
        <tr class="success"><!-- 设置成功的颜色 success 类表示执行成功的操作 -->
            <td>2</td>
            <td>Debbie</td>
        </tr>
        <tr class="info"><!-- .info 类表示信息变化的操作 -->
            <td>3</td>
            <td>Jon</td>
        </tr>
        <tr class="warning"><!-- .warning 表示一个需要注意的警告-->
            <td>4</td>
            <td>张三</td>
        </tr>
        <tr class="danger"><!-- .danger 类表示一个危险的操作-->
            <td>5</td>
            <td>张三</td>
        </tr>
        </tbody>
    </table>
            

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。/p>

#	FirstName
1	Anna
2	Debbie
3	Jon
4	张三
5	张三

      响应式表格
      通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）

      <div class="table-responsive ">
        <table class="table  table-bordered table-hover ">
        </table>

      </div>