教大家轻松制作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 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
纯JS实现简单的日历
Jun 26 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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和XSS跨站攻击的防范
2007/04/17 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
Yii框架form表单用法实例
2014/12/04 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
摘自启点的main.js
2008/04/20 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python实现扫雷游戏的示例
2020/10/20 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
素质教育标语
2014/06/27 职场文书
《法国号》教学反思
2016/02/22 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
python实现简单聊天功能
2021/07/07 Python