以下是Bootstrap--表格和按鈕樣式的相關知識，希望對你們有所幫助：
一、表格
1.基本格式
//實現基本的表格樣式
<table class="table">
注：我們可以通過Firebug查看相應的css
例子
引入bootstrap樣式前
引入bootstrap樣式后
2.條紋狀表格
//讓<tbody>里的行產生一行隔一行加單色背景效果
<table class="table table-stripe">
注：表格效果需要基于基本格式.table
例子
引入bootstrap樣式前
引入bootstrap樣式后
3.帶邊框的表格
//給表格增加邊框
<table class="table table-bordered">
例子
引入bootstrap樣式前
引入bootstrap樣式后
4.懸停鼠標
<table class="table table-hover">
例子
引入bootstrap樣式前
引入bootstrap樣式后
5.狀態類
//可以單獨設置每一行的背景樣式
<tr class="success">
注：一共五種不同的樣式可供選擇
樣式 說明
active 鼠標懸停在行或單元格上
success 標識成功或積極的動作
info 標識普通的提示信息或動作
warning 標識警告或需要用戶注意
danger 表示危險或潛在的帶來負面影響的動作
例子
引入以上闡述的bootstrap樣式前
引入以上闡述的bootstrap樣式后
6.隱藏某一行
例子
引入以上闡述的bootstrap樣式前
引入以上闡述的bootstrap樣式后
7.響應式表格
//表格父元素設置響應式，小于768px出現邊框
<body class="table-responsive">
例子
引入以上闡述的樣式前
引入以上闡述的bootstrap樣式后
二、按鈕
Bootstrap提供了很多豐富按鈕
1.可作為按鈕使用的標簽或元素
//轉化成普通按鈕
<a href="###" class="btn btn-default">link</a>
<button class="btn btn-default"></button>
<input class="btn btn-default" type="button" value="input" />
例子
引入bootstrap樣式前
引入bootstrap樣式后
注意事項有三點
（1）針對組件的注意事項
雖然按鈕類可以應用到<a>和<button>元素上，但是，導航和導航條組件只支持<button>元素
（2）鏈接被作為按鈕使用時的注意事項
如果<a>元素被作為按鈕使用--并用于在當前頁面觸發某些功能--而不是用于鏈接其他頁面或鏈接當前頁面中的其他部分--那么，務必其設置role="button"屬性
（3）跨瀏覽器展現
我們總結的最佳實踐是，強烈建議盡可能使用<button>元素來獲得在各個瀏覽器上獲得相匹配的繪制效果
另外，我們還發現了Firefox<3.0版本的瀏覽器上出現的一個bug，其表現是：阻止我們為基于<input>元素所創建的按鈕設置line-height屬性，這導致在firefox瀏覽器上不能完全和其他按鈕保持一致高度。
2.預定義樣式
//一般信息
<button class="btn btn-info">Button</button>
樣式 說明
Btn-default 默認樣式
Btn-success 成功樣式
Btn-info 一般信息樣式
Btn-warning 警告樣式
Btn-danger 危險樣式
Btn-primary 首選項樣式
Btn-link 鏈接樣式
例子
引入bootstrap樣式前
引入bootstrap樣式后
3.尺寸大小
//從大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>
例子
引入bootstrap樣式前
引入bootstrap樣式后
4.塊級按鈕
//塊級按鈕
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>
例子
引入bootstrap樣式前
引入bootstrap樣式后
5.激活狀態
//激活按鈕
<button class="btn active">Button</button>
例子
引入bootstrap樣式前
引入bootstrap樣式后
6.禁用狀態
//禁用按鈕
<button class="btn active disabled">Button</button>
例子
引入bootstrap樣式前
引入bootstrap樣式后
本文作者lilyping
越努力，越幸運
原文鏈接：http://www.lxweimin.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
