Bootstrap的基礎表格

2019-08-14 17:48 更新

Bootstrap 表格

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

標簽描述
<table>為表格添加基礎樣式。
<thead>表格標題行的容器元素（<tr>），用來標識表格列。
<tbody>表格主體中的表格行的容器元素（<tr>）。
<tr>一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>）。
<td>默認的表格單元格。
<th>特殊的表格單元格，用來標識列或行（取決于范圍和位置）。必須在 <thead> 內使用。
<caption>關于表格存儲內容的描述或總結。

表格類

下表樣式可用于表格中：

類描述實例
.table為任意 <table> 添加基本樣式 (只有橫向分隔線)嘗試一下
.table-striped在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)嘗試一下
.table-bordered為所有表格的單元格添加邊框嘗試一下
.table-hover在 <tbody> 內的任一行啟用鼠標懸停狀態(tài)嘗試一下
.table-condensed讓表格更加緊湊嘗試一下
聯(lián)合使用所有表格類嘗試一下

<tr>, <th> 和 <td> 類

下表的類可用于表格的行或者單元格：

類描述實例
.active將懸停的顏色應用在行或者單元格上嘗試一下
.success表示成功的操作嘗試一下
.info表示信息變化的操作嘗試一下
.warning表示一個警告的操作嘗試一下
.danger表示一個危險的操作嘗試一下

基本的表格

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

<!DOCTYPE html><html><head>
   <title>Bootstrap 實例 - 基本的表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果如下所示：

基本的表格

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號