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:
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!
HTML space setting method
IIS unexpected error 0x8ffe2740 solution
Implementation method of js barrage function
A complete list of linux server operation and maintenance commands
C language random function usage
What is the mobile service password?
How to lock screen on oppo11
How to adjust computer screen brightness
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
