## 表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 ### 基本格式 ~~~html <table class="table "> ~~~ 注：我们可以通过 Firebug 查看相应的 CSS。 ### 条纹状表格 ~~~html <table class="table table-striped"> ~~~ 注：表格效果需要基于基本格式.table ### 带边框的表格 ~~~html <table class="table table-bordered"> ~~~ ### 悬停鼠标 ~~~html <table class="table table-hover"> ~~~ ### 状态类 ~~~html <tr class="success"> ~~~ 注：一共五种不同的样式可供选择。  ### 隐藏某一行 ~~~html <tr class="active sr-only"> ~~~ ### 响应式表格 在小于768px，为表格加上边框 ~~~html <table class="table table-responsive"> ~~~ ## 按钮 Bootstrap 提供了很多丰富按钮供开发者使用。 ### 可作为按钮使用的标签或元素 **转化成普通按钮** ~~~html <button class="btn btn-default">Button</button> <a href="###" class="btn btn-default">Link</a> <input type="button" class="btn btn-default" value="Input"/> ~~~ **注意事项有三点：** * 虽然按钮类可以应用到 `<a>` 和 `<button>` 元素上，但是，导航和导航条组件只支持`<button>` 元素。 * 链接被作为按钮使用时的注意事项如果 `<a>` 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 `role="button"` 属性。 * 我们总结的最佳实践是：强烈建议尽可能使用` <button> `元素来获得在各个浏览器上获得相匹配的绘制效果。 ### 预定义式 使用下面列出的类可以快速创建一个带有预定义样式的按钮。 | 类名| 解释| | --- | --- | |btn-default | 默认样式 | |btn-success | 成功样式 | |btn-info | 一般信息样式 | |btn-warning | 警告样式 | |btn-danger | 危险样式 | |btn-primary | 首选项样式 | |btn-link |链接样式 | ~~~html <button class="btn btn-default">Button</button> <button class="btn btn-primary">Button</button> <button class="btn btn-success">Button</button> <button class="btn btn-info">Button</button> <button class="btn btn-warning">Button</button> <button class="btn btn-link">Button</button> <button class="btn btn-danger">Button</button> ~~~ ### 尺寸大小 从大到小的尺寸 ~~~html <p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-default">（默认尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p> ~~~ ### 块级按钮 块级换行 ~~~html <button class="btn btn-block">Button</button> ~~~ ### 激活状态 ~~~html <button class="btn active">Button</button> ~~~ ### 禁用状态 ~~~html <button class="btn disabled">Button</button> ~~~