bootstrap的表格樣式有哪些及怎么實現

Bootstrap的表格樣式有哪些及怎么實現

Bootstrap 是一個流行的前端框架，提供了豐富的組件和樣式，幫助開發者快速構建響應式網頁。表格是網頁中常見的元素之一，Bootstrap 提供了多種表格樣式和功能，使得表格的設計和實現變得更加簡單和靈活。本文將詳細介紹 Bootstrap 中的表格樣式及其實現方法。

1. 基本表格樣式

Bootstrap 提供了基本的表格樣式，只需為 <table> 元素添加 .table 類即可。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

1.1 表格邊框

默認情況下，Bootstrap 的表格沒有邊框。如果需要添加邊框，可以為表格添加 .table-bordered 類。

<table class="table table-bordered">
  <!-- 表格內容 -->
</table>

1.2 表格懸停效果

為表格添加 .table-hover 類，可以在鼠標懸停時改變行的背景顏色。

<table class="table table-hover">
  <!-- 表格內容 -->
</table>

1.3 條紋表格

通過添加 .table-striped 類，可以為表格的奇數行和偶數行添加不同的背景顏色，形成條紋效果。

<table class="table table-striped">
  <!-- 表格內容 -->
</table>

1.4 緊湊表格

如果需要減少表格的內邊距，使表格更加緊湊，可以添加 .table-sm 類。

<table class="table table-sm">
  <!-- 表格內容 -->
</table>

2. 表格顏色樣式

Bootstrap 提供了多種顏色樣式，可以為表格的行、列或單元格添加不同的背景顏色。

2.1 行顏色

通過為 <tr> 元素添加 .table-primary、.table-secondary、.table-success、.table-danger、.table-warning、.table-info、.table-light 或 .table-dark 類，可以為表格的行設置不同的背景顏色。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="table-success">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

2.2 單元格顏色

同樣地，可以為 <td> 或 <th> 元素添加顏色類，為單個單元格設置背景顏色。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="table-warning">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td class="table-info">Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td class="table-dark">@twitter</td>
    </tr>
  </tbody>
</table>

3. 響應式表格

在移動設備上，表格可能會超出屏幕寬度，導致內容無法完整顯示。Bootstrap 提供了響應式表格的功能，通過為表格添加 .table-responsive 類，可以使表格在水平方向上滾動。

<div class="table-responsive">
  <table class="table">
    <!-- 表格內容 -->
  </table>
</div>

還可以根據屏幕寬度設置不同的響應式表格：

• .table-responsive-sm：在小屏幕（≥576px）上啟用響應式表格。
• .table-responsive-md：在中等屏幕（≥768px）上啟用響應式表格。
• .table-responsive-lg：在大屏幕（≥992px）上啟用響應式表格。
• .table-responsive-xl：在超大屏幕（≥1200px）上啟用響應式表格。

<div class="table-responsive-lg">
  <table class="table">
    <!-- 表格內容 -->
  </table>
</div>

4. 表格的排序和分頁

Bootstrap 本身并不提供表格排序和分頁的功能，但可以通過集成第三方插件（如 DataTables）來實現這些功能。

4.1 使用 DataTables 實現表格排序和分頁

DataTables 是一個功能強大的 jQuery 插件，可以為 HTML 表格添加排序、分頁、搜索等功能。

首先，引入 DataTables 的 CSS 和 JS 文件：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

然后，初始化 DataTables：

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

通過以上代碼，表格將具備排序、分頁和搜索功能。

5. 自定義表格樣式

雖然 Bootstrap 提供了豐富的表格樣式，但在實際項目中，可能需要根據設計需求自定義表格樣式?？梢酝ㄟ^覆蓋 Bootstrap 的默認樣式或添加自定義 CSS 來實現。

5.1 覆蓋默認樣式

例如，如果需要更改表格的背景顏色，可以在自定義 CSS 文件中覆蓋 .table 類的樣式：

.table {
  background-color: #f8f9fa;
}

5.2 添加自定義樣式

可以為表格添加自定義類，并在 CSS 中定義樣式：

<table class="table custom-table">
  <!-- 表格內容 -->
</table>

.custom-table {
  border: 2px solid #007bff;
}

.custom-table th {
  background-color: #007bff;
  color: white;
}

6. 總結

Bootstrap 提供了豐富的表格樣式和功能，使得表格的設計和實現變得更加簡單和靈活。通過使用 Bootstrap 的表格類，可以輕松實現基本表格、帶邊框的表格、條紋表格、緊湊表格等樣式。此外，Bootstrap 還支持響應式表格，確保表格在不同設備上都能良好顯示。

對于更復雜的功能，如表格排序和分頁，可以集成第三方插件（如 DataTables）來實現。最后，通過自定義 CSS，可以根據項目需求進一步定制表格樣式。

掌握 Bootstrap 的表格樣式和實現方法，將有助于開發者快速構建美觀、功能豐富的網頁表格。