第六篇Bootstrap表格样式介绍

更新时间：2016年06月21日 15:07:32 作者：-夏昊-

这篇文章主要介绍了第六篇Bootstrap表格样式介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

基本表格:

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

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

显示效果如下:

条纹状表格：

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

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

显示效果如下:

带边框的表格：

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

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

显示效果如下：

紧缩表格:

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

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

显示效果如下：

响应式表格:

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

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

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

您可能感兴趣的文章:

基于JavaScript实现微信抢红包功能
本文通过实例代码给大家介绍了基于JavaScript实现微信抢红包功能，金额随机，额度在0.01和(剩余平均值*2)之间，具体的实例代码大家参考下本文
2017-07-07
javascript中的数据类型检测方法详解
这篇文章主要介绍了javascript中的数据类型检测方法,结合实例形式分析了javascript数据类型并总结分析了常见的数据类型检测操作技巧,需要的朋友可以参考下
2019-08-08
浅谈js中test()函数在正则中的使用
下面小编就为大家带来一篇浅谈js中test()函数在正则中的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
Immutable 在 JavaScript 中的应用
在 JavaScript 中，对象是引用类型的数据，其优点在于频繁的修改对象时都是在原对象的基础上修改，并不需要重新创建，这样可以有效的利用内存，不会造成内存空间的浪费，对象的这种特性可以称之为 Mutable，中文的字面意思是「可变」
2016-05-05
详解JavaScript 中的变量声明与赋值
在 JavaScript 中使用变量或常量之前，必须先进行声明，这篇文章主要介绍了JavaScript中的变量声明与赋值,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
webpack 开发和生产并行设置的方法
这篇文章主要介绍了webpack 开发和生产并行设置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
符合W3C Web标准的图片连续无间隙水平滚动
很久以前就有这个问题，总是找不到通用的，或比较简单的“图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准”
2008-06-06
让js弹出窗口居前显示的实现方法
一般来说，显示在最前面的窗口都是因为窗口被激活获得焦点，要使窗口永远显示在最前面，可以人为的设置窗口在blur时立刻focus，或者用模式、无模式对话框实现
2013-07-07
原生js实现跨浏览器获取鼠标按键的值
e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键而IE浏览器则是 1表示左键 4表示中间 2表示右键这里的IE浏览器主要是IE8以下的浏览器，感兴趣的朋友可以参考下哈
2013-04-04
使用openSpeDiv方法实现Ecshop登录弹窗框效果
在ECSHOP的目录/JS/common.js中有一个openSpeDiv方法是实现ECSHOP的弹窗效果的。接下来通过本文给大家分享使用openSpeDiv方法实现Ecshop登录弹窗框效果，需要的朋友参考下
2017-03-03