Bootstrap表格使用方法详解


Posted in Javascript onFebruary 17, 2017

下表列出了 Bootstrap 支持的一些表格元素:

Bootstrap表格使用方法详解

表格类:

.table:为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered:为所有表格的单元格添加边框
.table-hover:在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed:让表格更加紧凑

<tr>, <th> 和 <td> 类:

.active:将悬停的颜色应用在行或者单元格上
.success:表示成功的操作
.info:表示信息变化的操作
.warning:表示一个警告的操作
.danger:表示一个危险的操作

<table class="table"> 
 <caption>上下文表格布局</caption> 
 <thead> 
  <tr> 
   <th>产品</th> 
   <th>付款日期</th> 
   <th>状态</th></tr> 
 </thead> 
 <tbody> 
  <tr class="active"> 
   <td>产品1</td> 
   <td>23/11/2013</td> 
   <td>待发货</td></tr> 
  <tr class="success"> 
   <td>产品2</td> 
   <td>10/11/2013</td> 
   <td>发货中</td></tr> 
  <tr class="warning"> 
   <td>产品3</td> 
   <td>20/10/2013</td> 
   <td>待确认</td></tr> 
  <tr class="danger"> 
   <td>产品4</td> 
   <td>20/10/2013</td> 
   <td>已退货</td></tr> 
 </tbody> 
</table>

Bootstrap表格使用方法详解

响应式表格

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

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

Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
BootStrap与Select2使用小结
Feb 17 #Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 #Javascript
Vue.js原理分析之observer模块详解
Feb 17 #Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 #Javascript
Bootstrap表单使用方法详解
Feb 17 #Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 #Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 #Javascript
You might like
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php之Memcache学习笔记
2013/06/17 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python通过文件头判断文件类型
2015/10/30 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
pandas的qcut()方法详解
2019/07/06 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python实现快递价格查询系统
2020/03/03 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
会计专业个人求职信范文
2014/01/08 职场文书
cf战队收人广告词
2014/03/14 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android