第六篇Bootstrap表格样式介绍


Posted in Javascript onJune 21, 2016

基本表格:

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

<table>标签添加.table类可以为其赋予基本的样式 ,少量的内补(padding)和水平方向的分隔线。

显示效果如下:

第六篇Bootstrap表格样式介绍

条纹状表格:

在table标签上加上:class=”table table-striped”可以给tbody之内的每一行增加斑马条纹样式

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

带边框的表格:

在table标签上加上class=” table table-bordered”可以为表格的每个单元格增加边框。

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

紧缩表格:

通过添加.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

响应式表格:

将任何.table元素包裹在.table-responsive元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失

<div>
<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>
</div>

以上所述是小编给大家介绍的第六篇Bootstrap表格样式介绍的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 #Javascript
第五篇Bootstrap 排版
Jun 21 #Javascript
Javascript随机标签云代码实例
Jun 21 #Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 #Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python pickle模块用法实例
2015/04/14 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python妙用之编码的转换详解
2017/04/21 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python中open函数的基本用法示例
2019/09/07 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python二维图制作的实例代码
2020/12/03 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
会计职业生涯规划范文
2014/01/04 职场文书
企业消防安全制度
2014/02/02 职场文书
同事打架检讨书
2014/02/04 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
体育节口号
2014/06/19 职场文书
安全保证书格式
2015/02/28 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis