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 相关文章推荐
重定向实现代码
Nov 20 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
PHP新手上路(七)
2006/10/09 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
python提示No module named images的解决方法
2014/09/29 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Pandas中resample方法详解
2019/07/02 Python
python列表生成器迭代器实例解析
2019/12/19 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
期终自我鉴定
2014/02/17 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2019年入党思想汇报
2019/03/25 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python