编程 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 相关文章推荐

jqeury-easyui-layout问题解决方法

Mar 24 Javascript

JavaScript怎么判断图片是否加载完成以便获取其尺寸

May 08 Javascript

简单理解JavaScript中的封装与继承特性

Mar 19 Javascript

JQuery动态添加Select的Option元素实现方法

Aug 29 Javascript

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

Sep 21 Javascript

通过JS获取Request.QueryString()参数的值实现方法

Sep 27 Javascript

记一次vue去除#问题处理经过小结

Jan 24 Javascript

webpack4.x下babel的安装、配置及使用详解

Mar 07 Javascript

关于js陀螺仪的理解分析

Apr 11 Javascript

使用vue自定义指令开发表单验证插件validate.js

May 23 Javascript

了解javascript中的Dom操作

May 27 Javascript

详解微信小程序轨迹回放实现及遇到的坑

Feb 02 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

codeigniter框架批量插入数据

2014/01/09 PHP

Smarty局部缓存的几种方法简介

2014/06/17 PHP

PHP实现微信网页授权开发教程

2016/01/19 PHP

基于Jquery的跨域传输数据(JSONP)

2011/03/10 Javascript

详解JavaScript中jQuery和Ajax以及JSONP的联合使用

2015/08/13 Javascript

JavaScript资源预加载组件和滑屏组件的使用推荐

2016/03/10 Javascript

JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

2016/05/19 Javascript

使用RequireJS库加载JavaScript模块的实例教程

2016/06/06 Javascript

jQuery删除节点用法示例(remove方法)

2016/09/08 Javascript

jQuery ajaxForm()的应用

2016/10/14 Javascript

JavaScript箭头函数中的this详解

2019/06/19 Javascript

Vue组件为什么data必须是一个函数

2020/06/11 Javascript

python中迭代器（iterator）用法实例分析

2015/04/29 Python

在Django的视图(View)外使用Session的方法

2015/07/23 Python

Python for Informatics 第11章正则表达式(一)

2016/04/21 Python

Python基于正则表达式实现文件内容替换的方法

2017/08/30 Python

Python cookbook（数据结构与算法）将序列分解为单独变量的方法

2018/02/13 Python

Python实现对字典分别按键(key)和值(value)进行排序的方法分析

2018/12/19 Python

解决Pycharm界面的子窗口不见了的问题

2019/01/17 Python

将Python字符串生成PDF的实例代码详解

2019/05/17 Python

Python 实现数据结构-堆栈和队列的操作方法

2019/07/17 Python

解决Python设置函数调用超时,进程卡住的问题

2019/08/08 Python

基于Python数据分析之pandas统计分析

2020/03/03 Python

Python Tornado批量上传图片并显示功能

2020/03/26 Python

jupyter notebook 恢复误删单元格或者历史代码的实现

2020/04/17 Python

Python使用jupyter notebook查看ipynb文件过程解析

2020/06/02 Python

在HTML5中如何使用CSS建立不可选的文字

2014/10/17 HTML / CSS

美国首屈一指的高品质珠宝设计师和零售商：Allurez

2018/01/23 全球购物

美国基督教约会网站：ChristianCafe.com

2020/02/04 全球购物

食品安全责任书

2014/04/15 职场文书

公司活动总结怎么写

2014/06/25 职场文书

地质工程专业毕业生求职信

2014/08/08 职场文书

社区党建工作汇报材料

2014/10/27 职场文书

毕业典礼邀请函

2015/01/31 职场文书

钱学森电影观后感

2015/06/04 职场文书

小学生六年级作文之关于感恩

2019/08/16 职场文书