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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
JS之小练习代码
Oct 12 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
electron踩坑之remote of undefined的解决
Oct 06 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使用curl发送json格式数据实例
2013/12/17 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
司机岗位职责
2013/11/15 职场文书
文明班集体申报材料
2014/05/23 职场文书
大学生在校表现评语
2014/12/31 职场文书
刑事起诉书范文
2015/05/19 职场文书
创业计划书之养殖业
2019/10/11 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
详解jQuery的核心函数和事件处理
2022/02/18 jQuery