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个精彩的专题:

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

Javascript 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP图片水印类的封装
2017/07/06 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
理解Python垃圾回收机制
2016/02/12 Python
python绘制双柱形图代码实例
2017/12/14 Python
python实现三维拟合的方法
2018/12/29 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
会计专业自我鉴定
2014/02/10 职场文书
《搭石》教学反思
2014/04/07 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
接待员岗位职责
2015/02/13 职场文书
雷锋电影观后感
2015/06/10 职场文书
技术转让协议书
2016/03/19 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
手残删除python之后的补救方法
2021/06/26 Python
分享几种python 变量合并方法
2022/03/20 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android