Bootstrap系列 -- 9. 表格
2015-06-19 22:43
435 查看
一. Bootstrap 表格样式支持
Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式
1. .table:基础表格
2. .table-striped:斑马线表格
3. .table-bordered:带边框的表格
4. .table-hover:鼠标悬停高亮的表格
5. .table-condensed:紧凑型表格
6. .table-responsive:响应式表格
二. Bootstrap 行样式
响应式样式
这个有点小小的区别,这个响应式样式是在外面嵌套了一个div,单屏幕分辨率较小的时候会出现滚动条
Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式
1. .table:基础表格
2. .table-striped:斑马线表格
3. .table-bordered:带边框的表格
4. .table-hover:鼠标悬停高亮的表格
5. .table-condensed:紧凑型表格
6. .table-responsive:响应式表格
二. Bootstrap 行样式
<div class="table-responsive"> <table class="table table-condensed table-hover"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> </div>
响应式样式
这个有点小小的区别,这个响应式样式是在外面嵌套了一个div,单屏幕分辨率较小的时候会出现滚动条
相关文章推荐
- Bootstrap系列 -- 8. 代码显示
- Bootstrap系列 -- 7. 列表排版方式
- 改变Bootstrap的iCheck的尺寸
- Bootstrap系列 -- 6. 列表
- Bootstrap系列 -- 5. 文本对齐方式
- Bootstrap系列 -- 4. 文本内容强调
- Bootstrap系列 -- 3. 段落
- Bootstrap系列 -- 2. 标题
- Bootstrap系列 -- 1. 如何使用Bootstrap
- jquery+bootstrap+datatables前端的首选
- bootstrap 中引用zTree 产生节点错位问题
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- bootstrap 学习笔记 - 6 (输入框组 + )
- bootstrap table使用小记
- 禁止bootstrap 静态弹窗点击空白处关闭
- Bootstrap中的弹出框插件popover.js中的参数title、content不能使用html代码
- bootstrap(2)
- bootstrap 模态框
- bootstrap3.css对自定义css的影响
- Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Random forest 和 gradient boosting的区别