Bootstrap’s table classes include: 1. “.table”, basic table; 2. “.table-striped”, zebra striped table; 3. “.table-bordered”, table with borders; 4. ".table-hover", mouse-over highlighted tables, etc.
The operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer
Bootstrap Table
Bootstrap provides a clear layout for creating tables. The following table lists some table elements supported by Bootstrap:
Tag |
Description |
##Add basic styles to the table. |
| The container element () of the table header row is used to identify the table columns. |
| Container element () for table rows in the table body. |
| Container element ( or |
) for a group of table cells that appear on a single row. |
|
|
| Default table cell. |
|
| Special table cell used to identify a column or row (depending on range and position). Must be used within . |
| A description or summary of the table storage content. |
Bootstrap provides different class names for different styles of tables, mainly including:
Class | Description |
.table | Add basic styles (only horizontal separators) to any
|
.table-striped | Add zebra stripes in
(not supported by IE8) |
. table-bordered | Add borders to all table cells |
.table-hover | Enable mouse on any row within
Hover state |
.table-condensed | Compact table |
.table-responsive | Responsive Formula table |
.table-bordered | Bordered table |
Basic table
If you want a basic table with just padding and horizontal splitting, add class .table, as shown in the following example:
Instance
##
<!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>
Copy after login
The result is as follows: Optional table classes
In addition to basic table tags and .table class, there are Classes that can be used to define styles for markup. These classes are introduced to you below. Striped Table
By adding .table-striped class you will see stripes on the rows inside as follows The example above is as shown: Example
<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>
Copy after login
The result is as follows:Border table
By adding the .table-bordered class, you will see that each element has a border around it, and the entire table has rounded corners, as shown below The example is as follows:
Example
<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>
Copy after login
The result is as follows:
Hover table
By adding the .table-hover class, a light gray background will appear when the pointer hovers over the row, as shown in the example below:
Example
<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>
Copy after login
The results are as follows:
##Simplified formBy adding the
.table-condensed class, the inline padding is cut in half to make the table look more compact, as shown in the example below. This is useful when you want your information to appear more compact.
Instance<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>
Copy after login
The result is as follows:
Context ClassThe context classes listed in the following table allow you to change the background color of table rows or individual cells.
Class Description | |
.activeFor a specific row or Cells apply the hover color | |
.success to indicate a successful or positive action | |
.warningIndicates a warning that requires attention | |
.dangerIndicates a dangerous or potentially negative action | |
These classes can be applied to , or | . |
Example<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>
Copy after login
The result is as follows:
Responsive form By wrapping any
.table within a .table-responsive class, you can make the table scroll horizontally to fit on small devices (less than 768px). You won't see any difference when viewing on large devices larger than 768px wide.
Example<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>
Copy after login
The results are as follows:
##[Related recommendations: "bootstrap tutorial
》】
The above is the detailed content of What table classes are there in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!