JS組件Bootstrap Table布局詳解
Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
表格類(lèi)
下表樣式可用于表格中：
<tr>, <th> 和 <td> 類(lèi)
下表的類(lèi)可用于表格的行或者單元格：
基本的表格
如果您想要一個(gè)只帶有內(nèi)邊距（padding）和水平分割的基本表，請(qǐng)?zhí)砑?class .table，如下面實(shí)例所示：
<div class="row">
<table class="table">
<caption class="text-center">基本表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
可選的表格類(lèi)
除了基本的表格標(biāo)記和 .table class，還有一些可以用來(lái)為標(biāo)記定義樣式的類(lèi)。下面將向您介紹這些類(lèi)。
條紋表格
通過(guò)添加 .table-striped class，您將在 <tbody> 內(nèi)的行上看到條紋，如下面的實(shí)例所示：
<div class="row">
<table class="table table-striped">
<caption class="text-center">條紋表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
邊框表格
通過(guò)添加 .table-bordered class，您將看到每個(gè)元素周?chē)加羞吙?，且占整個(gè)表格是圓角的，如下面的實(shí)例所示：
<div class="row">
<table class="table table-bordered">
<caption class="text-center">邊框表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
懸停表格
通過(guò)添加 .table-hover class，當(dāng)指針懸停在行上時(shí)會(huì)出現(xiàn)淺灰色背景，如下面的實(shí)例所示：
<div class="row">
<table class="table table-hover">
<caption class="text-center">懸停表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
精簡(jiǎn)表格
通過(guò)添加 .table-condensed class，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來(lái)更緊湊，如下面的實(shí)例所示。這在想讓信息看起來(lái)更緊湊時(shí)非常有用。
<div class="row">
<table class="table table-condensed">
<caption class="text-center">精簡(jiǎn)表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
上下文類(lèi)
下表中所列出的上下文類(lèi)允許您改變表格行或單個(gè)單元格的背景顏色。
這些類(lèi)可以用到<tr>、<td>、<th>中，如下面實(shí)例所示：
<div class="row">
<table class="table">
<caption class="text-center">上下文表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>No.1</td>
<td>北京</td>
</tr>
<tr class="success">
<td>No.2</td>
<td>上海</td>
</tr>
<tr class="warning">
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr class="danger">
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
響應(yīng)式表格
通過(guò)把任意的 .table 包在 .table-responsive class 內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。
<div class="table-responsive">
<table class="table">
<caption class="text-center">響應(yīng)式表格布局</caption>
<thead>
<tr>
<th>編號(hào)</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>No.1</td>
<td>北京</td>
</tr>
<tr>
<td>No.2</td>
<td>上海</td>
</tr>
<tr>
<td>No.3</td>
<td>蘇州</td>
</tr>
<tr>
<td>No.4</td>
<td>南京</td>
</tr>
</tbody>
</table>
</div>
顯示效果：
如果還想繼續(xù)學(xué)習(xí)的話(huà)大家可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程
以上就是本文的全部?jī)?nèi)容，希望能夠幫助大家更好的學(xué)習(xí)JS表格組件神器bootstrap table。
- JS組件Bootstrap Table使用實(shí)例分享
- JS表格組件神器bootstrap table詳解（強(qiáng)化版）
- JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
- JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
- JS組件Bootstrap Table使用方法詳解
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- 以BootStrap Tab為例寫(xiě)一個(gè)前端組件
相關(guān)文章
基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
javascript FormatNumber函數(shù)實(shí)現(xiàn)方法
如果有一個(gè)數(shù)字498.8573945,如何把它格式化成兩位小數(shù)據(jù)呢？用過(guò)asp的都知道,在vbscript里我們可以調(diào)用formatnumber,即用formatnumber(498.8573945,2)就可以輸出：498.86。2008-12-12
大家好，本篇文章主要講的是JavaScript中深拷貝與淺拷貝詳解，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話(huà)記得收藏一下2022-02-02
所謂“閉包”，指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。2009-12-12
JS遍歷JSON數(shù)組及獲取JSON數(shù)組長(zhǎng)度操作示例【測(cè)試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長(zhǎng)度操作,涉及javascript簡(jiǎn)單json數(shù)組遍歷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
TypeScript 獲取函數(shù)的參數(shù)類(lèi)型、返回值類(lèi)型及定義返回函數(shù)類(lèi)型
這篇文章主要介紹了TypeScript 獲取函數(shù)的參數(shù)類(lèi)型、返回值類(lèi)型及定義返回函數(shù)類(lèi)型,需要的朋友可以參考下2024-02-02
微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問(wèn)題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對(duì)，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問(wèn)題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03
解決Layui中templet中a的onclick參數(shù)傳遞的問(wèn)題
今天小編就為大家分享一篇解決Layui中templet中a的onclick參數(shù)傳遞的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09