首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
基于jQuery实现的百度导航li拖放排列效果，即时更新数据库
Jul 31 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
详解Node全局变量global模块
Sep 28 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
T-SQL(1) Odoo(1) tkFileDialog(1) 黑名单(1) ElementTree(1) Logrotate(1) NFS(1) 批处理(1) SeaTunnel(1) ftpserver(1)
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery动画2.元素坐标动画效果（创建一个图片走廊）
2012/08/24 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解vue模拟加载更多功能（数据追加）
2017/06/23 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
TF-IDF与余弦相似性的应用（二） 找出相似文章
2017/12/21 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Python判断有效的数独算法示例
2019/02/23 Python
使用python制作游戏下载进度条的代码（程序说明见注释）
2019/10/24 Python
python序列类型种类详解
2020/02/26 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Python random模块的使用示例
2020/10/10 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
英国领先的电视购物零售商：Ideal World
2019/03/18 全球购物
英国现代家具和照明购物网站：Heal’s
2019/10/30 全球购物
产品发布会策划方案
2014/05/12 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js