## 表格 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> ~~~