What table classes are there in bootstrap?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What table classes are there in bootstrap?

青灯夜游

Jan 10, 2022 pm 12:05 PM

bootstrap

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.

What table classes are there in bootstrap?

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 (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.







	or	) for a group of table cells that appear on a single row.

Bootstrap provides different class names for different styles of tables, mainly including:

ClassDescription.tableAdd basic styles (only horizontal separators) to any

.table-stripedAdd zebra stripes in (not supported by IE8). table-borderedAdd borders to all table cells.table-hoverEnable mouse on any row within Hover state.table-condensedCompact table.table-responsiveResponsive Formula table.table-borderedBordered 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 ></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>

The result is as follows:

What table classes are there in bootstrap?

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>

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>
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>
The results are as follows:

##Simplified form
By 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>

The result is as follows:

Context Class
The context classes listed in the following table allow you to change the background color of table rows or individual cells.

Class .active.success.warning.dangerThese classes can be applied to ,

Description
For a specific row or Cells apply the hover color
to indicate a successful or positive action
Indicates a warning that requires attention
Indicates a dangerous or potentially negative action
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>

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>
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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn