Bootstrap之表格
2015-12-23 18:54
645 查看
基本实例
为随意<table>标签加入.table类能够为其赋予主要的样式—少量的内补(padding)和水平方向的分隔线。<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
条纹状表格
通过.table-striped类能够给<tbody>之内的每一行添加斑马条纹样式。<table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
带边框的表格
加入.table-bordered类为表格和当中的每一个单元格添加边框。<table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
鼠标悬停
通过加入.table-hover类能够让<tbody>中的每一行对鼠标悬停状态作出响应。<table class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
紧缩表格
通过加入.table-condensed类能够让表格更加紧凑,单元格中的内补(padding)均会减半。<table class="table table-condensed"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
状态类
通过这些状态类能够为行或单元格设置颜色。Class 描写叙述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或须要用户注意
.danger 标识危急或潜在的带来负面影响的动作
<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>2</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>4</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>8</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <td>9</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table>
相关文章推荐
- bootstrap实现弹出窗口
- Bootstrap - navigation
- bootstrap table 绑定数据
- bootstrap下拉菜单与滚动监视器学习笔记(2-2 下拉菜单--属性声明式方法(一))
- bootstrap下拉菜单与滚动监视器学习笔记(2-1 下拉菜单(Dropdown))
- bootstrap 实现弹出框popover,动态改变popover内容
- Bootstrap快速学习笔记(3)网格系统
- MIT 6.828 JOS学习笔记1. Lab 1 Part 1: PC Bootstrap
- Bootstrap输入建议库 autosuggest.js
- Bootstrap快速学习笔记(2)表单系列之二
- 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互
- 手机自动化测试:appium源码分析之bootstrap十七 2
- 手机自动化测试:appium源码分析之bootstrap十七 1
- 手机自动化测试:appium源码分析之bootstrap十六
- 手机自动化测试:appium源码分析之bootstrap十五
- 手机自动化测试:appium源码分析之bootstrap十四 2
- 手机自动化测试:appium源码分析之bootstrap十四 1
- 手机自动化测试:appium源码分析之bootstrap十三 2
- 手机自动化测试:appium源码分析之bootstrap十三 1
- 手机自动化测试:appium源码分析之bootstrap十二