Bootstrap每天必學(xué)之表格
本文主要講解的是表格,這個(gè)其實(shí)對(duì)于做過(guò)網(wǎng)站的人來(lái)說(shuō),并不陌生,而且可以說(shuō)是最為常用的各種列表的展示,有時(shí)候也會(huì)因?yàn)橛脩艋蛘呃习宓男枨蠖械筋^疼。下面我們來(lái)看一下,Bootstrap已經(jīng)為我們準(zhǔn)備那些類型的表格呢?如下所示:
1.基本案例
2.條紋狀表格
3.帶邊框的表格
4.鼠標(biāo)懸停
5.緊縮表格
6.狀態(tài)class
7.響應(yīng)式表格
8.總結(jié)
基本案例
為任意<table>標(biāo)簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補(bǔ)(padding)和水平方向的分隔線。這種方式看起來(lái)很多余???但是我們覺(jué)得,表格元素使用的很廣泛,如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件,所以我們選擇將其樣式獨(dú)立出來(lái)。
一個(gè)簡(jiǎn)單的Table示例
<div class="container"> <table class="table"> <caption>Table基本案例</caption> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tbody> <tr> <td>aehyok</td> <td>leo</td> <td>@aehyok</td> </tr> <tr> <td>lynn</td> <td>thl</td> <td>@lynn</td> </tr> </tbody> </table> </div>
條紋狀表格
利用.table-striped可以給<tbody>之內(nèi)的每一樣增加斑馬條紋樣式。
在上面示例的table元素上再添加一個(gè) 樣式類
<table class="table table-striped">
看現(xiàn)在的效果,還是有點(diǎn)變化的。
帶邊框的表格
利用.table-bordered為表格和其中的每個(gè)單元格增加邊框。
還是將第一個(gè)示例中的table元素上再添加一個(gè)樣式類
<table class="table table-bordered">
鼠標(biāo)懸停
利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。
<table class="table table-hover">
將鼠標(biāo)移到那一行那一行就會(huì)有效果的
緊縮表格
利用.table-condensed可以讓表格更加緊湊,單元格中的內(nèi)部(padding)均會(huì)減半。
<table class="table table-condensed">
這個(gè)效果沒(méi)那么明顯,主要就是單元格中內(nèi)容padding減半了。
狀態(tài)Class
通過(guò)這些狀態(tài)class可以為行貨單元格設(shè)置顏色。
<table class="table table-condensed"> <caption>Table</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>aehyok</td> <td>leo</td> <td>@aehyok</td> </tr> <tr class="success"> <td>2</td> <td>lynn</td> <td>thl</td> <td>@lynn</td> </tr> <tr class="warning"> <td>3</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr class="danger"> <td>4</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr > <td class="success">5</td> <td class="danger">Amdy</td> <td class="warning">Amy</td> <td class="active">@Amdy</td> </tr> </tbody> </table>
響應(yīng)式表格
將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格,其會(huì)在小屏幕設(shè)備上(小于768px)水平滾動(dòng)。當(dāng)屏幕大于768px寬度時(shí),水平滾動(dòng)條消失。
<div class="table-responsive"> <table class="table"> <caption>Table</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>aehyok</td> <td>leo</td> <td>@aehyok</td> </tr> <tr class="success"> <td>2</td> <td>lynn</td> <td>thl</td> <td>@lynn</td> </tr> <tr class="warning"> <td>3</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr class="danger"> <td>4</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr > <td class="success">5</td> <td class="danger">Amdy</td> <td class="warning">Amy</td> <td class="active">@Amdy</td> </tr> </tbody> </table> </div>
看滾動(dòng)條出現(xiàn)了額。
簡(jiǎn)簡(jiǎn)單單的幾個(gè)樣式類,可以將頁(yè)面搞到這種程度,很不錯(cuò),以后再也不用愁調(diào)樣式了。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是關(guān)于Bootstrap的表格最為常用的各種列表的展示,希望對(duì)大家的學(xué)習(xí)有所幫助。
- BootStrap iCheck插件全選與獲取value值的解決方法
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- 基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解
- Bootstrap表格和柵格分頁(yè)實(shí)例詳解
- 利用Bootstrap實(shí)現(xiàn)表格復(fù)選框checkbox全選
相關(guān)文章
JS實(shí)現(xiàn)百度搜索接口及鏈接功能實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)百度搜索接口及鏈接功能實(shí)例代碼,需要的朋友可以參考下2018-02-02javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)?lái)一篇javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12DIV層之拖動(dòng)、關(guān)閉、打開(kāi)效果代碼
非常不錯(cuò)的效果,適合在當(dāng)前頁(yè)打開(kāi)測(cè)試窗口,圖片等2008-09-09javascript(jquery)利用函數(shù)修改全局變量的代碼
現(xiàn)在博客系統(tǒng)的評(píng)論遇到一個(gè)問(wèn)題,用戶點(diǎn)擊“最后一頁(yè)”鏈接之后就自動(dòng)調(diào)取最后一頁(yè)的資料來(lái)顯示。2009-11-11淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09