文档章节

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

乾meta
 乾meta
发布于 2014/06/18 09:10
字数 345
阅读 2.8K
收藏 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. ... 


乾meta
粉丝 18
博文 59
码字总数 45269
作品 0
海淀
架构师
私信 提问
加载中
请先登录后再评论。
好程序员web前端干货之web前端开发框架汇总

  好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写...

好程序员IT
2019/05/20
10
0
Bootstrap中的面板

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

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

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

9秒教育
2015/11/30
82
0
【JavaWeb】Bootstrap

概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 框架:一个半成品软件...

osc_umxygzar
02/12
1
0
bootstrap学习备查1

第1章 Bootstrap 介绍 一、Bootstrap 概述 Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容PC 端、PAD 以及手机移动端的页面访问。 二.Bootstrap 特点 1. 跨设备、跨浏览...

hustnzj
2016/06/16
22
0

没有更多内容

加载失败,请刷新页面

加载更多

​DAX 2 中文版在线学习

阅读学习传送门 本文分享自微信公众号 - PowerBI战友联盟(powerbichina)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

BI佐罗
2019/11/17
0
0
《OpenCV 4快速入门》终于见面啦!

近几个月以来,有众多小伙伴在公众号后台或者微信群里询问《OpenCV 4快速入门》出版的进度。非常感谢大家对本书的关注和期待,经过了不断地修改和完善,这次终于可以大声的告诉各位小伙伴。 ...

小白学视觉
06/16
0
0
GitHub 通过 jsdelivr CDN加持

GitHub 通过 jsdelivr CDN加持 两种引用方式: 存入仓库分支里面,直接引用 创建版本号后,在引用 在这是不是很好奇,为什么引用要弄成这么麻烦。网上我看过类似教程,他们总是忽略一个关键的...

Zero游戏人生丶
33分钟前
0
0
百人计划 5期 启动报名

温馨提醒: 1. 在2月22日24点前,此公号后台回复「百人计划」可先预定再报名,可以省100 RMB 2. 在2月25日24点前,报名成功的,省50 RMB 3. 一旦报名,一律不退费(建议报名前,想清楚,再报...

IDO老徐
02/20
8
0
Android小知识-如何加载外部dex文件中的类

想要了解插件化,首先得知道如何加载外部的dex文件,这里的插件APK会存放在主APP的assets目录中,用于模拟服务器下载插件。 第一步:创建主项目和插件项目 先创建我们的主项目,并在项目中创...

音视频开发进阶
05/13
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部