文档章节

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

提广乾
 提广乾
发布于 2014/06/18 09:10
字数 345
阅读 2247
收藏 7
点赞 0
评论 0

标准结构

标签 描述
<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
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
199
0
21个强大漂亮Ajax/CSS表格设计

本文收集整理20多个功能超强并且挺漂亮的Ajax/CSS表格设计分享给大家,这些表格有表格数据的排序和过滤等。 让我们来看一下这些表格: 1. Tablecloth Tablecloth由CSS Globe开发,是一个轻巧...

晨曦之光
2012/03/09
0
0
17 款常用响应式 web UI 框架

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

bypass
2013/01/13
12.8K
14
BootStrap

bootstrap下载: 英文网址: 中文网址: 选择编译压缩版本,可下载到本地使用,也可网上引用CDN bootstrap应用 - 引用框架(基础)与注意点: bootstrap学习 文中带 . 的标号为选择器,如.le...

大仁孙
2016/07/13
37
0
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
100
5
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
1
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部