文档章节

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

提广乾
 提广乾
发布于 2014/06/18 09:10
字数 345
阅读 2263
收藏 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
bootstrap学习笔记

一.bootstrap的集成与引入 bootsrap中文网 bootstrap官网 集成方法一 下载bootstrap安装包 1.解压安装包后,将CSS、JS文件导入到项目中 2.在项目中引用 集成方法二 使用CDN在线下载 二.boot...

朱敏iOS
2017/11/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JSCH会大量使用服务器内存吗?会

java实现一个需求用到了jsch,发现服务器内存会被占满。 写了个50进程的jsch-sftp测试连接 put一个文件 ExecutorService fixedThreadPool = Executors.newFixedThreadPool(50);for (int j =...

just-coding
13分钟前
1
0
聊聊redis的数据结构的应用

序 本文主要研究一下redis的数据结构的应用 string 最常用的就是incr操作,比如可以用来维护用户在某个抽奖活动的剩余抽奖次数 setnx方法可以用来实现分布式锁 hashmap 可以用来存储session...

go4it
13分钟前
1
0
《将博客搬至CSDN》

搬到csdn

我风依旧
16分钟前
1
0
源码编译安装最新版 Subversion 1.10.x

一、使用包管理器自动安装 官方网站提供了常见 Linux 发行版的安装命令,此处仅以 CentOS、Debian 及 Ubuntu 为例进行说明,其它系统详见官网:https://subversion.apache.org/packages.html...

whoru
20分钟前
0
0
liquibase

今天在看springboot源码时发现一个好东西。 LiquibaseServiceLocatorApplicationListener Liquibase是一个用于跟踪、管理和应用数据库变化的开源的数据库重构工具。它将所有数据库的变化(包...

jack_peng
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部