Home > Article > Web Front-end > How can bootstrap achieve interlaced color change?

How can bootstrap achieve interlaced color change?

WBOYOriginal: 2021-12-28 09:44:273468browse

In bootstrap, you can use the ".table-striped" table class to achieve alternate row color change. This table class is used to set the background of odd rows to gray in the tbody tag. You only need to add "class=" to the table element. table table-striped "" style is enough.

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

What can be achieved with bootstrap Alternate row color change

By adding the .table-striped class, you will see stripes on the rows within

You can use the ".table-striped" table class to achieve alternating row colors. You only need to add the "class="table table-striped"" style to the table element.

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 实例 - 条纹表格</title>
<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 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>
</body>
</html>

Output result:

How can bootstrap achieve interlaced color change?

Recommended study: "bootstrap usage tutorial"

The above is the detailed content of How can bootstrap achieve interlaced color change?. 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

Previous article：What can make an element float left in bootstrap?Next article：What can make an element float left in bootstrap?

See more

How can bootstrap achieve interlaced color change?

Related articles