表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的。毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情。

下面简单介绍Bootstrap中给的表格。

1,带条纹的表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。注意,这个功能是不支持IE8的。

代码:

Code<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td> </tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td> </tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
</table>
</div>

结果:

2,带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

代码:

Code <div class="container">
<table class="table table-bordered">
。。。。。
</table>
</div>

效果:

3,鼠标悬停事件

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

代码:

Code<div class="container">
<table class="table table-bordered table-hover">
。。。。。。。
</table>
</div>

效果:

4,紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

Code<table class="table table-condensed">
...
</table>

5,状态类

通过这些状态类可以为行或单元格设置颜色。

代码:

Code<div class="container">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>标题</th> </tr>
</thead>
<tbody> <tr class="active"><td>内容</td></tr>
<tr class="success"><td>内容</td></tr>
<tr class="warning"><td>内容</td></tr>
<tr class="danger"><td>内容</td></tr>
<tr class="info"><td>内容</td></tr> <tr class="active"><td>内容</td></tr>
<tr class="success"><td>内容</td></tr>
<tr class="warning"><td>内容</td></tr>
<tr class="danger"><td>内容</td></tr>
<tr class="info"><td>内容</td></tr>
</tbody>
</table>
</div>

效果

6,响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

(1)垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。特别是,也可以截断下拉菜单和其他第三方组件

(2)Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

复制

@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
 
表格就到这里了,想要了解更多的实例或内容,请到官方网站查阅。文章有什么不妥之处,请指出,谢谢。

Bootstarp--全局CSS样式之表格的更多相关文章

  1. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  2. Boostrap全局CSS样式

    1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...

  3. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  4. 26-[Boostrap]-全局css样式,组件,控件

    1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> < ...

  5. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  6. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  7. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  8. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  9. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  10. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

随机推荐

  1. xmanager远程登录

  2. Python正则匹配多行,多个数据

    最近用Python做一个crawler工具的时候,发现用一个正则表达式可以匹配到个数据的时候用match.group()只能打印出第一个数据,其它数据不能打印出来.最后找到解决方法,现在记录一下,直接 ...

  3. mybatis源码分析(3)——SqlSessionManager类

    从上图可能看出,在 mybatis中,SqlSession的实现类有两个,其中SqlSessionManager类不但实现了SqlSession接口,同时也实现了SqlSessionFactory接口 ...

  4. POJ_2184_Cow_Exhibition_(动态规划,背包)

    描述 http://poj.org/problem?id=2184 n只奶牛,每只都有智商s_i和情商f_i,取出若干只,保证智商之和与情商之和都不为负的情况下,让两者之和最大. Cow Exhibi ...

  5. 【转】Android中自定义控件的步骤

    原文网址:http://blog.csdn.net/lianchen/article/details/48038969 Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Androi ...

  6. response常见应用、response细节、输出随机图片、定时刷新网页

      response常见应用 向客户端输出中文数据 分别以OutputStream和PrintWriter输出 多学一招:使用HTML语言里面的<meta>标签来控制浏览器行为 思考:用O ...

  7. Ice_cream’s world III--2122

    Ice_cream’s world III Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. vi find和grep

    linux grep和find命令 linux中强大且常用命令:find.grep 源码搜索:find . -name "*.xml" | xargs grep -Hna &quo ...

  9. html页面显示div源代码:用<xmp></xmp>标签

    html页面显示div源代码:用<xmp></xmp>标签效果还可以.

  10. Unity给力插件之ShaderForge(一)

    这是一个用来制作shader的插件,也是一个很好的学习shader的工具.这个插件上手很容易,但是要用它来制作理想的Shader,需要下点功夫. 这儿先列举出基础知识,以及我的一些实践.以后我还会继续 ...