【原创】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 | 让表格更加紧凑 | 尝试一下 |
| 联合使用所有表格类 | 尝试一下 | |
实例：
<!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表格]的更多相关文章
- 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...
- 【原创】bootstrap框架的学习 第六课[bootstrap代码]
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- 【原创】bootstrap框架的学习 第五课
一.Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式. <!DOCTYPE html> <html> <head> <title&g ...
- Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer
原文:Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...
- Python学习第七课
Python学习第七课 'Alex' "Alex"print('hello'*5) #重复输出字符串 print('hellowold'[2:]) #类似于切片操作:会取出 llo ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
- Bootstrap框架的学习（一）
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- Bootstrap框架的学习（二）
一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.boot ...
- 性能测试学习 第七课 --loadrunner中JavaVuser脚本的编写
1.环境准备: LoadRunner11----->对应JDK1.6版本(32位) LoadRunner12----->对应JDK1.7版本(32位) (一).JDK下载安装完成 ...
随机推荐
- 关于html中利用jQuery选择子节点方法总结——待续
好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等.所以想整理一下. 1.需求一:同页面有两个表格, ...
- eclipse下配置安装ssm图文教程（web版）
eclipse下配置安装ssm图文教程(web版) 一.安装所需jar包 1.1 mybatis安装包 可以进入GitHub的https://github.com/mybatis/mybatis-3 ...
- JS清除DIV的选中状态
var clearSlct = "getSelection" in window ? function () { window.getSelection().removeAllRa ...
- Java完成简单猜数字游戏v2.0
猜数字游戏v2.0 优化了获取随机数.输入数据超出边界值的代码,并增加了异常处理,能够在玩家输入错误数据错误时给出可靠指引,希望对和我一样的新人有帮助, 最后希望有大神愿意帮我解决代码优化的问题,谢谢 ...
- JavaScript实现
JavaScript实现 Javascript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多.没错, ...
- flex中过滤掉字符串的空格
1.先引入import mx.utils.StringUtil;这个包, 在使用StringUtil.trim(); 如:if(StringUtil.trim(this.d1.3.text) ==&q ...
- oracle物理视图(转)
近期根据项目业务需要对oracle的物化视图有所接触,在网上搜寻关于这方面的资料,便于提高,整理内容如下: 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普 ...
- webp转png或jpg
在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...
- JSR330： DI
JSR330 DI JSR 330 ,提供了一种可重用的.可维护.可测试的方式来获取Java对象.也称为Dependency Injection . DI应该都不陌生,因为它就是Spring core ...
- POPTEST老李分享session,cookie的安全性以及区别 1
POPTEST老李分享session,cookie的安全性以及区别 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程 ...