The bootstrap framework is widely used because of its ease of use, beautiful layout, and responsive layout. This article uses the bootstrap table example to talk about how to use the table in bootstrap, as well as the related styles of the table. It has a certain reference value, and interested friends can refer to it.
Before using the bootstrap framework layout, you must first introduce the relevant jQuery, CSS, and JS files. If you are unclear, you can read my previous article, How to use the bootstrap framework in HTML pages , or refer to Bootstrap video tutorial.
1. Basic table
After the basic layout is completed, add the class class name.table to the
tag to achieve the basic table style (a small amount of content) padding and horizontal dividing lines). bootstrap table example: Create a table with six rows and four columns for statistical student information. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table class="table" style="width: 800px;" >
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>
</body>
</html>Rendering:
2. Striped table
Based on the basic table, add the class name .table-striped to the
tag to give it to the Add a zebra stripe pattern to each row. <table class="table table-striped " style="width: 800px;" >
The effect is as shown in the figure:
3. The table with borders
is in In the
tag, add the class class name.table-bordered to add a border to the table and each cell in it.
<table class="table table-bordered " style="width: 800px;" >
The effect is as shown in the picture:
4. Hover the mouse over the table
In the
tag, add class class name.table-hover to make each row in respond to the mouse hover state. When the mouse passes over the first row, the background color of the first row changes to gray. <table class="table table-hover " style="width: 800px;" >
The effect is as shown in the figure:
5. Compress the table
In the
tag , adding class name.table-condensed can make the table more compact, and the padding in the cells will be halved. <table class="table table-condensed " style="width: 800px;" >
Compare the above pictures to see the effect of compressing the table:
Six,
Six, responsive table
Wrap the element containing the class name .table in the element containing the class name .table-responsive to create a responsive table. When the screen is smaller than 768px, it will scroll horizontally. When the screen is larger than At 768px width, the horizontal scrollbar disappears.
<table class="table" >
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>The effect is as shown in the figure:
#The above uses the bootstrap table example to introduce the use of table tables and related styles. It is relatively simple. If there is If you are not sure, you can visit the official website of the bootstrap framework: http://v3.bootcss.com. I hope this article will be helpful to you! For more related tutorials, please visit Bootstrap Online Manual
The above is the detailed content of Detailed graphic explanation of the use of tables and related styles in the bootstrap framework. 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
