文档章节

Bootstrap 基础表格(Tables)和样式CSS

提广乾
 提广乾
发布于 2014/06/18 09:10
字数 345
阅读 2278
收藏 7

标准结构

标签 描述
<table> 用以包装表格化的数据
<thead> 容纳表格标题行 (<tr>)以标识表格列,
<tbody> 容纳表格行 (<tr>)
<tr> 容纳行内的一组单元格 (<td> or <th>)
<td> 默认的表格单元格
<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签
必须置于 <thead> 标签内。
<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用

[html] view plaincopy

  1. <table>  

  2.   <caption>...</caption>  

  3.   <thead>  

  4.     <tr>  

  5.       <th>...</th>  

  6.       <th>...</th>  

  7.     </tr>  

  8.   </thead>  

  9.   <tbody>  

  10.     <tr>  

  11.       <td>...</td>  

  12.       <td>...</td>  

  13.     </tr>  

  14.   </tbody>  

  15. </table>  


默认样式

行与行之间用水平线相隔。只需向<table>添加.table

[html] view plaincopy

  1. <table class="table">  

  2.   …  

  3. </table>  


表格的可选类

在.table后面可以添加下列任意类。


.table-striped可以使奇数行的背景设为灰色。

[html] view plaincopy

  1. <table class="table table-striped">  

  2.   …  

  3. </table>  


.table-bordered可以使边框显示。

[html] view plaincopy

  1. <table class="table table-bordered">  

  2.   …  

  3. </table>  


.table-hover可以使鼠标悬停的行的背景变为灰色。

[html] view plaincopy

  1. <table class="table table-hover">  

  2.   …  

  3. </table>  


.table-condensed可以使行间距变小。

[html] view plaincopy

  1. <table class="table table-condensed">  

  2.   …  

  3. </table>  


行的可选类

使用下列类可以使行的背景色变化,从而表达一定含义。

向<tr>添加.success、.error、.warning、.info。

[html] view plaincopy

  1. ...  

  2.   <tr class="success">  

  3.     <td>1</td>  

  4.     <td>TB - Monthly</td>  

  5.     <td>01/04/2012</td>  

  6.     <td>Approved</td>  

  7.   </tr>  

  8. ... 


© 著作权归作者所有

共有 人打赏支持
提广乾
粉丝 17
博文 54
码字总数 42795
作品 0
海淀
架构师
私信 提问
bootstrap+css进行页面布局

效果 用到了bootstrap中的表格css、圆形css、以及上一页下一页css。 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善。 不仅仅要会使用bootstrap中的样式,也要能够...

桃子红了呐
2017/12/31
0
0
Bootstrap中的面板

面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ...

9秒教育
2015/11/30
24
0
Bootstrap中的面板

面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ...

9秒教育
2015/11/30
54
0
tzhsweet/superui

superui superui官方网站:http://www.supermgr.cn github地址:https://github.com/tzhsweet/superui superui官方一群:559696533 superui是什么? superui是tzhsweet、lkl、hwj三人联合开发的......

tzhsweet
2016/12/27
0
0
17 款常用响应式 web UI 框架

1. Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 官...

bypass
2013/01/13
12.8K
14

没有更多内容

加载失败,请刷新页面

加载更多

云环境所面临的安全威胁

导读 为了云计算的健康发展和等级保护工作在新形势下顺利推进,就不能忽视对云计算面临的各类安全威胁的研究和分析,并制定和建立相应的等级保护政策、技术体系,应对即将到来的云浪潮。 为了...

问题终结者
29分钟前
0
0
大牛五分钟教你如何创建并运行java线程

Java线程类也是一个object类,它的实例都继承自java.lang.Thread或其子类。 可以用如下方式用java中创建一个线程: 执行该线程可以调用该线程的start()方法: 在上面的例子中,我们并没有为线程...

java知识分子
30分钟前
0
0
监控某进程工作状态的脚本

很多时候,我们需要监控某个脚本是否正在执行,如果不在执行,则需将它重启。 思路: 监测脚本或进程的执行状态,可以通过ps -ef,再加上grep命令进行定位。 如果该进程在执行,则上述命令会...

vinci321
31分钟前
0
0
彻底弃用PHP转入Kotlin阵营

痛定思痛,决定彻底弃用PHP,转入Kotlin,采用Ktor方案。Kotlin从去年年底到现在,我都一直保持关注,这一年下来,从1.0升级到1.3,增加了很多特性和支持。其实,只要是JetBrains扶持着的,想...

曾建凯
35分钟前
0
0
php动态扩展模块安装

11月21日任务 11.32 php扩展模块装安装 1.PHP扩展模块安装 示例一:编译安装一个扩展模块 /usr/local/php/bin/php -m //查看模块 下面安装一个redis的模块 cd /usr/local/src/ 进入该目录下 ...

hhpuppy
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部