教大家轻松制作Bootstrap漂亮表格(table)


Posted in Javascript onDecember 13, 2016

学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己做一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。

我们应该庆幸自己活在这样一个互联网时代,开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果。

下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上,我们只需要写很少的代码就能轻松制作漂亮表格。

比如我们要制作一个像下面这个表格:

教大家轻松制作Bootstrap漂亮表格(table)

有了Bootstrap,只需写好html内容结构,加上Bootstrap写好的专用于表格的类样式即可实现图中的效果。
代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>BootStrap制作表格</title> 
 <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
 <table style="width: 500px;" class="table table-striped table-hover table-bordered"> 
 <thead> 
 <tr> 
  <th>表头1</th> 
  <th>表头2</th> 
  <th>表头3</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
  <td>第1行第1列</td> 
  <td>第1行第2列</td> 
  <td>第1行第3列</td></tr> 
 <tr> 
  <td>第2行第1列</td> 
  <td>第2行第2列</td> 
  <td>第2行第3列</td></tr> 
 <tr> 
  <td>第3行第1列</td> 
  <td>第3行第2列</td> 
  <td>第3行第3列</td></tr> 
 </tbody> 
 </table> 
 </div> 
</body> 
</html>

在这里为了方便美观我给他加了一个宽度500px;我们这里使用一个<div class="container"> 来作为基础面板包裹我们的table。container也属于bootstrap类样式,在webstorm中我们按住ctrl+点击左键进入container(任何脚本样式你都这样查看它里边的实现,前提是要先引入),可以看到bootstrap的属性如下:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

containner可以适应浏览器为我们设置外边距,设置固定左右内边距15px。

接下来说一下步骤:

第一步:引入bootstrap脚本文件:
<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css"> 

这个脚本你可以在 http://getbootstrap.com 官网中下载。

第二步:写html内容结构代码。

只设置了宽度,没有加入其他任何样式的裸妆他是这样子的:

教大家轻松制作Bootstrap漂亮表格(table)

第三步:为table加入bootstrap样式:
<table style="width: 500px;" class="table table-striped table-hover table-bordered"> 

以上三步即可得到第一幅图的效果。

接下来讲解一下这些样式的效果,runoob.com列出了比较简明的解析:

教大家轻松制作Bootstrap漂亮表格(table)

在行列中,也可以使用.active  .success .danger这些用于行列的样式。比如我加入行列样式:

教大家轻松制作Bootstrap漂亮表格(table)

效果是这样的:

教大家轻松制作Bootstrap漂亮表格(table)

大家可以根据自己的需要来加入样式。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
Javascript之String对象详解
Jun 08 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
Node.js中process模块常用的属性和方法
Dec 13 #Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 #Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 #Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 #Javascript
vue.js学习之递归组件
Dec 13 #Javascript
AngularJS过滤器filter用法总结
Dec 13 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
python实现连接mongodb的方法
2015/05/08 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Django工程的分层结构详解
2019/07/18 Python
python+requests接口自动化框架的实现
2020/08/31 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
Collection和Collections的区别
2016/05/02 面试题
.net工程师笔试题
2012/06/09 面试题
党员对照检查材料思想汇报
2014/09/16 职场文书
小学母亲节活动总结
2015/02/10 职场文书
校本培训个人总结
2015/02/28 职场文书
督导岗位职责范本
2015/04/10 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python