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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
javascript History对象原理解析
Feb 17 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
Position属性之relative用法
2015/12/14 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python属于解释型语言么
2020/06/15 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
药品开票员岗位职责
2015/04/15 职场文书
运动会表扬稿范文
2015/05/05 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python