Bootstrap
  • [Bootstrap]Bootstrap 教程
  • [Bootstrap]Bootstrap 简介
  • [Bootstrap]Bootstrap 环境安装
  • [Bootstrap]Bootstrap CSS 概览
  • [Bootstrap]Bootstrap 网格系统
  • [Bootstrap]Bootstrap 排版
  • [Bootstrap]Bootstrap 代码
  • [Bootstrap]Bootstrap 表格
  • [Bootstrap]Bootstrap 表单
  • [Bootstrap]Bootstrap 按钮
  • [Bootstrap]Bootstrap 图片
  • [Bootstrap]Bootstrap 辅助类
  • [Bootstrap]Bootstrap 响应式实用工具
  • [Bootstrap]Bootstrap 字体图标(Glyphicons)
  • [Bootstrap]Bootstrap 下拉菜单(Dropdowns)
  • [Bootstrap]Bootstrap 按钮组
  • [Bootstrap]Bootstrap 按钮下拉菜单
  • [Bootstrap]Bootstrap 输入框组
  • [Bootstrap]Bootstrap 导航元素
  • [Bootstrap]Bootstrap 导航栏
  • [Bootstrap]Bootstrap 面包屑导航Breadcrumbs
  • [Bootstrap]Bootstrap 分页
  • [Bootstrap]Bootstrap 标签
  • [Bootstrap]Bootstrap 徽章 Badges
  • [Bootstrap]Bootstrap 超大屏幕 Jumbotron
  • [Bootstrap]Bootstrap 页面标题 Page Header
  • [Bootstrap]Bootstrap 缩略图
  • [Bootstrap]Bootstrap 警告 Alerts
  • [Bootstrap]Bootstrap 进度条
  • [Bootstrap]Bootstrap 多媒体对象(Media Object)
  • [Bootstrap]Bootstrap 列表组
  • [Bootstrap]Bootstrap 面板Panels
  • [Bootstrap]Bootstrap Well
  • [Bootstrap]Bootstrap 插件概览
  • [Bootstrap]Bootstrap 过渡效果 Transition插件
  • [Bootstrap]Bootstrap 模态框 Modal插件
  • [Bootstrap]Bootstrap 下拉菜单(Dropdown)插件
  • [Bootstrap]Bootstrap 滚动监听 Scrollspy 插件
  • [Bootstrap]Bootstrap 标签页 Tab插件
  • [Bootstrap]Bootstrap 提示工具Tooltip插件
  • [Bootstrap]Bootstrap 弹出框 Popover插件
  • [Bootstrap]Bootstrap 警告框 Alert 插件
  • [Bootstrap]Bootstrap 按钮 Button 插件
  • [Bootstrap]Bootstrap 折叠 Collapse 插件
  • [Bootstrap]Bootstrap 轮播 Carousel 插件
  • [Bootstrap]Bootstrap 附加导航 Affix 插件
  • [Bootstrap]Bootstrap UI 编辑器(开发工具)
  • [Bootstrap]Bootstrap HTML编码规范
  • [Bootstrap]Bootstrap CSS编码规范
  • [Bootstrap]Bootstrap Web框架
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> HTML >> Bootstrap >> Bootstrap 表格
    Bootstrap 表格
    更新日期: 2017年07月19日 来源: 本站原创 作者: 佚名 阅读:
    上一篇Bootstrap 代码 下一篇:Bootstrap 表单

    bootstrap 表格

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

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

    表格类

    下表样式可用于表格中:

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

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

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

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

    基本的表格

    如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

    实例

    <table class="table">
    <caption>基本的表格布局</caption>
    <thead>
    <tr>
    <th>名称</th>
    <th>城市</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
    </tr>
    <tr>
    <td>Sachin</td>
    <td>Mumbai</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格
     

    可选的表格类

    除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

    条纹表格

    通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

    实例

    <table class="table table-striped">
    <caption>条纹表格布局</caption>
    <thead>
    <tr>
    <th>名称</th>
    <th>城市</th>
    <th>邮编</th>
    </tr> </thead>
    <tbody>
    <tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
    <td>560001</td>
    </tr>
    <tr>
    <td>Sachin</td>
    <td>Mumbai</td>
    <td>400003</td>
    </tr>
    <tr>
    <td>Uma</td>
    <td>Pune</td>
    <td>411027</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格

    边框表格

    通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

    实例

    <table class="table table-bordered">
    <caption>边框表格布局</caption>
    <thead>
    <tr>
    <th>名称</th>
    <th>城市</th>
    <th>邮编</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
    <td>560001</td>
    </tr>
    <tr>
    <td>Sachin</td>
    <td>Mumbai</td>
    <td>400003</td>
    </tr>
    <tr>
    <td>Uma</td>
    <td>Pune</td>
    <td>411027</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格

    悬停表格

    通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

    实例

    <table class="table table-hover">
    <caption>悬停表格布局</caption>
    <thead>
    <tr>
    <th>名称</th>
    <th>城市</th>
    <th>邮编</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
    <td>560001</td>
    </tr>
    <tr>
    <td>Sachin</td>
    <td>Mumbai</td>
    <td>400003</td>
    </tr>
    <tr>
    <td>Uma</td>
    <td>Pune</td>
    <td>411027</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格

    精简表格

    通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

    实例

    <table class="table table-condensed">
    <caption>精简表格布局</caption>
    <thead>
    <tr>
    <th>名称</th>
    <th>城市</th>
    <th>邮编</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
    <td>560001</td>
    </tr>
    <tr>
    <td>Sachin</td>
    <td>Mumbai</td>
    <td>400003</td>
    </tr>
    <tr>
    <td>Uma</td>
    <td>Pune</td>
    <td>411027</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格
     

    上下文类

    下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

    描述
    .active 对某一特定的行或单元格应用悬停颜色
     
    .success 表示一个成功的或积极的动作
     
    .warning 表示一个需要注意的警告
     
    .danger 表示一个危险的或潜在的负面动作
     

    这些类可被应用到 <tr>、<td> 或 <th>。

    实例

    <table class="table">
    <caption>上下文表格布局</caption>
    <thead>
    <tr>
    <th>产品</th>
    <th>付款日期</th>
    <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
    <td>产品1</td>
    <td>23/11/2013</td>
    <td>待发货</td>
    </tr>
    <tr class="success">
    <td>产品2</td>
    <td>10/11/2013</td>
    <td>发货中</td>
    </tr>
    <tr class="warning">
    <td>产品3</td>
    <td>20/10/2013</td>
    <td>待确认</td>
    </tr>
    <tr class="danger">
    <td>产品4</td>
    <td>20/10/2013</td>
    <td>已退货</td>
    </tr>
    </tbody>
    </table>

     

    结果如下所示:

    Bootstrap 表格
     

    响应式表格

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

    实例

    <div class="table-responsive">
    <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
    <tr>
    <th>产品</th>
    <th>付款日期</th>
    <th>状态</th>
    </tr> </thead>
    <tbody>
    <tr>
    <td>产品1</td>
    <td>23/11/2013</td>
    <td>待发货</td>
    </tr>
    <tr>
    <td>产品2</td>
    <td>10/11/2013</td>
    <td>发货中</td>
    </tr>
    <tr>
    <td>产品3</td>
    <td>20/10/2013</td>
    <td>待确认</td>
    </tr>
    <tr>
    <td>产品4</td>
    <td>20/10/2013</td>
    <td>已退货</td>
    </tr>
    </tbody>
    </table>
    </div>

     

    结果如下所示:

    Bootstrap 表格
     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇Bootstrap 代码 下一篇:Bootstrap 表单
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918