本文主要講解的是表格，這個其實對于做過網(wǎng)站的人來說，并不陌生，而且可以說是最為常用的各種列表的展示，有時候也會因為用戶或者老板的需求而感到頭疼。下面我們來看一下，Bootstrap已經(jīng)為我們準(zhǔn)備那些類型的表格呢?
基本案例
為任意
標(biāo)簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補(bǔ)(padding)和水平方向的分隔線。這種方式看起來很多余!?但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將其樣式獨立出來。
一個簡單的Table示例
條紋狀表格
利用.table-striped可以給之內(nèi)的每一樣增加斑馬條紋樣式。
在上面示例的table元素上再添加一個 樣式類
看現(xiàn)在的效果，還是有點變化的。
帶邊框的表格
利用.table-bordered為表格和其中的每個單元格增加邊框。
還是將第一個示例中的table元素上再添加一個樣式類
鼠標(biāo)懸停
利用.table-hover可以讓中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。
將鼠標(biāo)移到那一行那一行就會有效果的
緊縮表格
利用.table-condensed可以讓表格更加緊湊，單元格中的內(nèi)部(padding)均會減半。
這個效果沒那么明顯，主要就是單元格中內(nèi)容padding減半了。
狀態(tài)Class
通過這些狀態(tài)class可以為行貨單元格設(shè)置顏色。
響應(yīng)式表格
將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格，其會在小屏幕設(shè)備上(小于768px)水平滾動。當(dāng)屏幕大于768px寬度時，水平滾動條消失。
看滾動條出現(xiàn)了額。
總結(jié)
簡簡單單的幾個樣式類，可以將頁面搞到這種程度，很不錯，以后再也不用愁調(diào)樣式了。