教大家轻松制作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字符编码函数区别分析
Jun 05 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
对node.js中render和send的用法详解
May 14 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
JS数据类型分类及常用判断方法
Nov 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 搜索框提示(自动完成)实例代码
2012/02/05 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
在Python的web框架中配置app的教程
2015/04/30 Python
Python中import机制详解
2017/11/14 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Redis入门教程详解
2021/08/30 Redis