【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

Bootstrap 表格

标签

描述

<table>

为表格添加基础样式。

<thead>

表格标题行的容器元素(<tr>),用来标识表格列。

<tbody>

表格主体中的表格行的容器元素(<tr>)。

<tr>

一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。

<td>

默认的表格单元格。

<th>

特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。

<caption>

关于表格存储内容的描述或总结。

下表样式可用于表格中:

描述

实例

.table

为任意 <table> 添加基本样式 (只有横向分隔线)

尝试一下

.table-striped

在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

尝试一下

.table-bordered

为所有表格的单元格添加边框

尝试一下

.table-hover

在 <tbody> 内的任一行启用鼠标悬停状态

尝试一下

.table-condensed

让表格更加紧凑

尝试一下

联合使用所有表格类

尝试一下

实例:

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body>

<table class="table table-bordered table-striped table-hover table-condenced"> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table>

</body> </html>

<tr>, <th> 和 <td> 类

描述

实例

.active

将悬停的颜色应用在行或者单元格上

尝试一下

.success

表示成功的操作

尝试一下

.info

表示信息变化的操作

尝试一下

.warning

表示一个警告的操作

尝试一下

.danger

表示一个危险的操作

尝试一下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韦弦的偶尔分享

微信小程序设置图片固定比例

有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设...

8302
来自专栏河湾欢儿的专栏

标签

p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

2053
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

1373
来自专栏韦弦的偶尔分享

微信小程序textarea层级问题

写了一个页面,其中包含textarea和自定义的一个蒙版视图,发现在真机中textarea的placeholder文字和value文字都会显示在蒙版视图之上。。...

1.7K1
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2376
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

1123
来自专栏一“技”之长

Bootstrap响应式前端框架笔记五——按钮

    Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下:

802
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

5023
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

2K66
来自专栏小筱月

animate 动画滞后执行的解决方案

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

2811

扫码关注云+社区

领取腾讯云代金券