编程 Javascript

Bootstrap基本样式学习笔记之表格(2)

Posted in Javascript onDecember 07, 2016

Bootstrap实现了大量基本样式，包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。
Bootstrap 提供了一个清晰的创建表格的布局。

0x01 表格样式

（1）基本样式：不带边框和分割线：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>表格</title>
</head>
<body>
<div class="container">
 <table class="table">
 <tr>
 <td>序号</td>
 <td>姓名</td>
 <td>年龄</td>
 </tr>
 <tr>
 <td>1</td>
 <td>kikay</td>
 <td>20</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Tom</td>
 <td>18</td>
 </tr>
 <tr>
 <td>1</td>
 <td>小花</td>
 <td>21</td>
 </tr>
 </table>
</div>
</body>
</html>

（2）样式：table-bordered：为表格带上边框：<table class="table table-bordered table-striped">
（3）样式：table-striped:为表格带上斑马线：<table class="table table-striped">
（4）样式：.table-hover:为鼠标悬浮在表格行上指定不同颜色：<table class="table table-hover">
（5）样式：.table-condensed：使表格更加紧凑：<table class="table table-condensed">

0x02 状态标识

还可以为表格中行或者单元格添加状态样式，比如：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>带上边框</title>
</head>
<body>
<div class="container">
 <table class="table table-bordered table-striped table-hover table-condensed">
 <tr class="alert-danger">
 <td class=>序号</td>
 <td>姓名</td>
 <td>年龄</td>
 </tr>
 <tr class="success">
 <td>1</td>
 <td>kikay</td>
 <td>20</td>
 </tr>
 <tr class="alert-warning">
 <td>2</td>
 <td>Tom</td>
 <td>18</td>
 </tr>
 <tr>
 <td>1</td>
 <td>小花</td>
 <td>21</td>
 </tr>
 </table>
</div>
</body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本样式学习笔记之表格(2)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

返回对象在当前级别中是第几个元素的实现代码

Jan 20 Javascript

js select option对象小结

Dec 20 Javascript

一个html5播放视频的video控件只支持android的默认格式mp4和3gp

May 08 Javascript

json的定义、标准格式及json字符串检验

May 11 Javascript

jQuery提示插件alertify使用指南

Apr 21 Javascript

全面理解JavaScript中的继承(必看)

Jun 16 Javascript

jQuery实现的简单拖拽功能示例

Sep 13 Javascript

微信小程序去哪里找小程序到底如何使用(附小程序名单)

Jan 09 Javascript

Javascript之深入浅出prototype

Feb 06 Javascript

vue-cli如何引入bootstrap工具的方法

Oct 19 Javascript

JS实现换肤功能的方法实例详解

Jan 30 Javascript

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

Apr 28 Javascript

jquery的父、子、兄弟节点查找,节点的子节点循环方法

Dec 07 #Javascript

Bootstrap学习笔记之环境配置(1)

Dec 07 #Javascript

Bootstrap风格的WPF样式

Dec 07 #Javascript

Bootstrap基本组件学习笔记之导航(10)

Dec 07 #Javascript

Bootstrap基本组件学习笔记之input输入框组(9)

Dec 07 #Javascript

详解ES6中的let命令

Apr 05 #Javascript

jquery操作ID带有变量的节点实例

Dec 07 #Javascript

You might like

PHP迅雷、快车、旋风下载专用链转换代码

2010/06/15 PHP

php中将时间差转换为字符串提示的实现代码

2011/08/08 PHP

启用Csrf后POST数据时出现的400错误

2015/07/05 PHP

php+jQuery递归调用POST循环请求示例

2016/10/14 PHP

PHP利用递归函数实现无限级分类的方法

2019/03/22 PHP

javaScript 读取和设置文档元素的样式属性

2009/04/14 Javascript

两个select之间option的互相添加操作(jquery实现)

2009/11/12 Javascript

JavaScript中的isXX系列是否继续使用的分析

2011/04/16 Javascript

基于JavaScript实现获取鼠标点击位置坐标的方法

2013/04/12 Javascript

jQuery获取样式中颜色值的方法

2015/01/29 Javascript

JavaScript图片轮播代码分享

2015/07/31 Javascript

jQuery用户头像裁剪插件cropbox.js使用详解

2017/06/07 jQuery

详解webpack和webpack-simple中如何引入css文件

2017/06/28 Javascript

详解vue-cli 构建Vue项目遇到的坑

2017/08/30 Javascript

基于vue2实现左滑删除功能

2017/11/28 Javascript

p5.js实现斐波那契螺旋的示例代码

2018/03/22 Javascript

JS原生带缩略图的图片切换效果

2018/10/10 Javascript

Angular请求防抖处理第一次请求失效问题

2019/05/17 Javascript

webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

2019/06/10 Javascript

JavaScript一元正号运算符示例代码

2019/06/30 Javascript

vue中keep-alive，include的缓存问题

2019/11/26 Javascript

Vue实现商品飞入购物车效果(电商项目)

2019/11/26 Javascript

python实现通过代理服务器访问远程url的方法

2015/04/29 Python

使用Python编写提取日志中的中文的脚本的方法

2015/04/30 Python

对Python w和w+权限的区别详解

2019/01/23 Python

Python爬虫实现验证码登录代码实例

2019/05/10 Python

python同步windows和linux文件

2019/08/29 Python

pycharm激活码有效到2020年11月底

2020/09/18 Python

详解Flask前后端分离项目案例

2020/07/24 Python

Python3+SQLAlchemy+Sqlite3实现ORM教程

2021/02/16 Python

Python爬取酷狗MP3音频的步骤

2021/02/26 Python

瑞典香水、须后水和美容产品购物网站：Parfym-Klick.se

2019/12/29 全球购物

影视制作岗位职责

2013/12/04 职场文书

我的老师教学反思

2014/05/01 职场文书

国家领导干部党的群众路线教育实践活动批评与自我批评材料

2014/09/23 职场文书

房屋租赁协议书（标准版）

2014/10/02 职场文书