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 让表格更加紧凑 尝试一下
联合使用所有表格类 尝试一下

实例：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本的表格</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered table-striped table-hover table-condenced">
<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>

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

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

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]的更多相关文章

  1. 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...

  2. 【原创】bootstrap框架的学习 第六课[bootstrap代码]

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  3. 【原创】bootstrap框架的学习 第五课

    一.Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式. <!DOCTYPE html> <html> <head> <title&g ...

  4. Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer

    原文:Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...

  5. Python学习第七课

    Python学习第七课 'Alex' "Alex"print('hello'*5) #重复输出字符串 print('hellowold'[2:]) #类似于切片操作:会取出 llo ...

  6. go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)

    目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...

  7. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  8. Bootstrap框架的学习（二）

    一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.boot ...

  9. 性能测试学习 第七课 --loadrunner中JavaVuser脚本的编写

    1.环境准备:      LoadRunner11----->对应JDK1.6版本(32位) LoadRunner12----->对应JDK1.7版本(32位) (一).JDK下载安装完成 ...

随机推荐

  1. @Required 注释应用于 bean 属性的 setter 方法，它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中，否则容器就会抛出一个 BeanInitializationException 异常。

    @Required 注释应用于 bean 属性的 setter 方法,它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中,否则容器就会抛出一个 BeanInitializationEx ...

  2. 快速上手UIBezierPath

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...

  3. 《Machine Learning》系列学习笔记之第二周

    第二周 第一部分 Multivariate Linear Regression Multiple Features Note: [7:25 - θT is a 1 by (n+1) matrix an ...

  4. iOS开发之自定义弹出的键盘

    self.inputField.inputView = myView 按文本框弹出的键盘不再是普通文字输入键盘,而是我们设置的myView.一般把这个方法写在viewDiLoad方法中. 也可以在键盘 ...

  5. javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数／自定义对象、属性绑定、进制转换

    匿名函数:   没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...

  6. linux之date命令详解

    date命令的用处 1.用于显示特殊的时间格式,可以用于对日志文件的命名 2.用于设置时间 ,不过这方面用的比较少,因为一般的服务器都设置的有自动同步网络时间 用法: date [OPTION]... ...

  7. XJOI1559树转二叉树

    树转二叉树 将一棵树转化成二叉树. 输入格式: 输入的信息,第一行一个数n,(n<=1000)是树的结点数,以下n行,第i+1行是第i个结点的信息,第一个整数,是该结点的特征数值,后列出所有孩子 ...

  8. Html5 Canvas笔记(2)-Canvas绘图

    用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少, ...

  9. 老李分享：开发python的unittest结果输出样式

    老李分享:开发python的unittest结果输出样式   Python的unittest结果命令行输出,格式比较乱.为了提高格式输出的可读性,实现可以不同的颜色标识.所以准备扩展Python的un ...

  10. android 学习笔记(1)

    内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...