Bootstrap表格
2016-06-06 22:11
706 查看
1.表格的元素
2.表格类
4.上下文类
5.响应式表格
6.例子
<thead> 表格标题行 <tbody> 表格主体 <tr>行 <td> 表格的列 <th> 特殊的表格单元格,必须在<thead>内使用 <caption> 表格存储内容的描述或总结
2.表格类
.table 为任意表格添加基本样式,只有横向分割线 .table-striped 在<tbody>内添加斑马线形式的条纹 .table-bordered 为所有表格的单元格添加边框 .table-hover 在<tbody>内的任意一行启用鼠标悬停状态 .table-condensed 让表格更加紧凑
<tr>,<th>和<td>类
.active 将悬停的颜色应用在行或单元格上 .success 成功的操作 .info 信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作
4.上下文类
.active 对某一特定的行或单元格应用悬停颜色 .success 表示一个成功的或积极的动作 .warning 表示一个需要注意的警告 .danger 表示一个危险的或潜在的负面动作
5.响应式表格
通过把任意的.table包在.table-responsive class内,您可以让表格水平滚动以适应小型设备(小于768px)。当在大于768px宽的大型设备上查看时,您看不到任何差别
6.例子
//基本表格,只有横线隔开隔行 <table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>lwg</td> <td>北京</td> </tr> </tbody> </table>
//条纹表格 <table class="table table-striped"> 。。。。 </table>
//边框表格 <table class="table table-bordered"> 。。。 </table>
//悬停表格 <table class="table table-hover"> 。。。 </table>
//精简表格 <table class="table table-condensed"> 。。。 </table>
//上下文类 <tr class="active"> <td>lwg</td> <td>2016</td> <td>BJ</td> </tr>
//响应式表格 <div class="table-responsive"> <table class="table"> 。。。。 </table> </div>
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
- JS组件中bootstrap multiselect两大组件较量
- Bootstrap模仿起筷首页效果
- 基于Bootstrap的网页设计实例
- Bootstrap表格和栅格分页实例详解
- 基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
- BootStrap实用代码片段之一
- JS组件Bootstrap dropdown组件扩展hover事件
- Bootstrap Paginator分页插件使用方法详解
- 浅谈bootstrap源码分析之scrollspy(滚动侦听)