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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
js 深拷贝函数
Dec 04 Javascript
深入理解javascript变量声明
Nov 20 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
Vue项目打包编译优化方案
Sep 16 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php加密解密实用类分享
2014/01/07 PHP
8个PHP数组面试题
2015/06/23 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
新手如何快速理解js异步编程
2019/06/24 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python 对象中的数据类型
2017/05/13 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
神经网络python源码分享
2017/12/15 Python
python发送邮件脚本
2018/05/22 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python调用C语言的实现
2019/07/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python构造函数init实例方法解析
2020/01/19 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
视光学毕业生自荐书范文
2014/02/13 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书