教大家轻松制作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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
js实现返回顶部效果
Mar 10 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
js精确的加减乘除实例
Nov 14 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
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
mysql 字段类型说明
2007/04/27 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python 中Operator模块的使用
2021/01/30 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
物流管理专业大学生自荐信
2013/10/04 职场文书
家长给小学生的评语
2014/01/30 职场文书
搞笑创意广告语
2014/03/17 职场文书
教师考核材料
2014/05/21 职场文书
介绍信如何写
2015/01/31 职场文书
二手房购房意向书
2015/05/09 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
医院保洁员管理制度
2015/08/05 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书