Bootstrap每天必学之表格_javascript技巧
1.基本案例
2.条纹状表格
3.带边框的表格
4.鼠标悬停
5.紧缩表格
6.状态class
7.响应式表格
8.总结
基本案例
为任意
First Name | Last Name | User Name |
---|---|---|
aehyok | leo | @aehyok |
lynn | thl | @lynn |
条纹状表格
利用.table-striped可以给
之内的每一样增加斑马条纹样式。在上面示例的table元素上再添加一个 样式类
# | First Name | Last Name | User Name |
---|---|---|---|
1 | aehyok | leo | @aehyok |
2 | lynn | thl | @lynn |
3 | Amdy | Amy | @Amdy |
4 | Amdy | Amy | @Amdy |
5 | Amdy | Amy | @Amdy |
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
Table # First Name Last Name User Name 1 aehyok leo @aehyok 2 lynn thl @lynn 3 Amdy Amy @Amdy 4 Amdy Amy @Amdy 5 Amdy Amy @Amdy
看滚动条出现了额。
简简单单的几个样式类,可以将页面搞到这种程度,很不错,以后再也不用愁调样式了。
以上就是关于Bootstrap的表格最为常用的各种列表的展示,希望对大家的学习有所帮助。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
- javascript怎么将值类型强制转为字符串
- javascript中什么是位运算符
- javascript怎么判断字符串是否是数字
- 总结分享: 6 种JavaScript的打断点的方...
- Bootstrap每天必学之表格_javascri...
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
- 最新文章
- 热门排行
推荐阅读
-
javascript之锁定表格栏位_javascript技巧
-
Bootstrap每天必学之简单入门_javascript技巧
-
Bootstrap每天必学之导航_javascript技巧
-
Bootstrap每天必学之缩略图与警示窗_javascript技巧
-
javascript之锁定表格栏位_javascript技巧
-
javascript每日必学之继承_javascript技巧
-
php编程每天必学之表单验证_php技巧
-
Bootstrap每天必学之按钮_javascript技巧
-
Bootstrap每天必学之面板_javascript技巧
-
Bootstrap每天必学之日期控制_javascript技巧
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论