bootstrap有哪些表格類-前端問答-PHP中文網

首頁

web前端

前端問答

bootstrap有哪些表格類

青灯夜游

Jan 10, 2022 pm 12:05 PM

bootstrap

bootstrap的表格類別有：1、“.table”，基礎表格；2、“.table-striped”，斑馬線表格；3、“.table-bordered”，帶邊框的表格；4、 “ .table-hover”，滑鼠懸停高亮的表格等等。

bootstrap有哪些表格類

本教學操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

Bootstrap 表格

Bootstrap 提供了一個清晰的建立表格的佈局。下表列出了Bootstrap 支援的一些表格元素：

#標籤	描述

為表格新增基礎樣式。表格標題行的容器元素（），用來識別表格列。表格主體中的表格行的容器元素（）。一組出現在單行上的表格單元格的容器元素（預設的表格儲存格。特殊的表格單元格，用來識別列或行（取決於範圍和位置）。必須在內使用。關於表格儲存內容的說明或摘要。







	或	）。

Bootstrap為表格不同的樣式風格提供了不同的類別名，主要包括：

類別描述.table#為任意

新增基本樣式(只有橫向分隔線).table-striped在內加入斑馬線形式的條紋( IE8 不支援). table-bordered為所有表格的儲存格新增邊框.table-hover在內的任一行啟用滑鼠懸停狀態.table-condensed緊湊表格##.table-responsive##回應式表格.table-bordered有邊框的表格

基本的表格

如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請新增class .table，如下面實例所示：

實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

登入後複製

結果如下所示：

bootstrap有哪些表格類

可選的表格類別

#除了基本的表格標記和.table class，還有一些可以用來為標記定義樣式的類別。下面將向您介紹這些類別。

條紋表格

透過新增.table-striped class，您將在

內的行上看到條紋，如下面的實例所示：

實例

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

登入後複製

結果如下圖所示：

bootstrap有哪些表格類

邊框表格

透過新增.table-bordered class，您將看到每個元素周圍都有邊框，且佔整個表格是圓角的，如下面的實例所示：

實例

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

登入後複製

結果如下圖所示：

bootstrap有哪些表格類

# #懸停錶格

透過新增

.table-hover class，當指標停留在行上時會出現淺灰色背景，如下面的實例所示：

實例

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

登入後複製

結果如下所示：

bootstrap有哪些表格類

精簡表格

透過新增

.table-condensed class，行內邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實例所示。這在想讓資訊看起來更緊湊時非常有用。

實例

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

登入後複製

結果如下所示：

bootstrap有哪些表格類

上下文類別

下表中所列出的上下文類別可讓您改變表格行或單一儲存格的背景顏色。

類別描述#.active對某一特定的行或單元格應用懸停顏色.success表示一個成功的或積極的動作.warning表示一個需要注意的警告.danger表示一個危險的或潛在的負面動作

這些類別可應用到、或。

實例

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

登入後複製

結果如下所示：

bootstrap有哪些表格類

回應式表格

透過把任意的

.table 包在.table-responsive class 內，您可以讓表格水平滾動以適應小型裝置（小於768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

實例

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

登入後複製

結果如下圖：

bootstrap有哪些表格類