JS組件Bootstrap Table布局詳解

更新時(shí)間：2016年05月27日 14:39:58 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table布局，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下

Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

表格類
下表樣式可用于表格中：

<tr>, <th> 和 <td> 類
下表的類可用于表格的行或者單元格：

基本的表格
如果您想要一個(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>

顯示效果：

可選的表格類
除了基本的表格標(biāo)記和 .table class，還有一些可以用來(lái)為標(biāo)記定義樣式的類。下面將向您介紹這些類。

條紋表格
通過(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è)元素周圍都有邊框，且占整個(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>

顯示效果：

上下文類
下表中所列出的上下文類允許您改變表格行或單個(gè)單元格的背景顏色。

這些類可以用到<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>

顯示效果：