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 获取服务器控件值的代码
Mar 05 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
ES6对象操作实例详解
May 23 Javascript
纯JS实现五子棋游戏
May 28 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php短信接口代码
2016/05/13 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
Javascript中的数学函数集合
2007/05/08 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python实现简单成绩录入系统
2019/09/19 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
thinkphp5 路由分发原理
2021/03/18 PHP
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
英语自我评价范文
2014/01/24 职场文书
简历自我评价模版
2014/01/31 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
国庆节标语大全
2014/10/08 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
golang正则之命名分组方式
2021/04/25 Golang
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL