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，如下面实例所示：
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 基本的表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
可选的表格类
除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 条纹表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
边框表格
通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 边框表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
悬停表格
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 悬停表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
精简表格
通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 精简表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
这些类可被应用到 <tr>、<td> 或 <th>。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 上下文类</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>
结果如下所示：
响应式表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
<!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 响应式表格</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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> </body> </html>
结果如下所示：
Bootstrap<基础二>网络系统
Bootstrap<基础三>排版
Bootstrap<基础四> 代码
Bootstrap <基础五>表格
Bootstrap<基础六> 表单
Bootstrap <基础七>按钮
Bootstrap <基础八>图片
Bootstrap<基础九>辅助类
Bootstrap<基础十> 响应式实用工具
Bootstrap<基础十一>字体图标(Glyphicons)
Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap<基础十三> 按钮组
Bootstrap<基础十四> 按钮下拉菜单
Bootstrap<基础十五> 输入框组
Bootstrap<基础十六> 导航元素
Bootstrap 基础五表格相关推荐
- Bootstrap基础一 CSS 概览
原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 ...
- Bootstrap基础二十七 多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
- Bootstrap基础二 网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
- 【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
- python测试开发django-173.bootstrap实现table表格行内编辑
前言 网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- jquery+bootstrap 创建日历表格
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好 欢迎留言赐教 <meta charset="utf-8"><meta na ...
- 计算机基础表格函数基础知识大全,大一计算机题库和答案：大一计算机基础excel表格操作题求解if函数部分...
大一计算机基础excel表格操作题求解if函数部分 引号呢?字符串必须要用引号引起来,不然就是变量,就非法了.要类似这样: =IF(C3="电子",11000) 大学计算机基础期末 ...
最新文章
- DevDays2012 开发者日中文版资料下载
- python采集第一步
- java 浏览器 安全设置_IE浏览器安全设置脚本
- python学习书籍推荐-Python语言之6本机器学习书籍推荐
- 01: MySql简介
- 人脸识别（8）----人脸识别主要算法原理
- 拼多多与两大权威球鞋鉴别平台达成合作，为“多多潮鞋馆”提供“真香”认证...
- 余承东生日朋友圈深夜连发五个“感恩”：这是一个难忘的日子
- linux安半程序自动确认,利用system-config-kickstart实现半自动化安装
- ssm游文化推广系统答辩PPT模板
- 人脸方向学习（七）：Face Recognition-CosFace 解读
- 工业4.0时代，企业如何提升设备管理效率？
- SSH框架java写接口_SSH框架的搭建+JPA接口
- idea 编码扫描插件_用IDEA这样Review代码真牛逼
- win10专业版使用vmware安装虚拟机时“出现此主机支持Intel VT-x，但Intel VT-x处于禁用状态”。
- 节能降耗 | AIRIOT智慧电力综合管理解决方案
- Matlab实现二维Goldstein分支切割相位展开算法
- VMware官方下载安装包的方法
- 清华大学计算机系保送,2018清华大学保送生拟录取名单公布
- Pyside2，Pycharm中右键转py文件的时候，出来的结果总是c++代码