Detailed graphic explanation of the use of tables and related styles in the bootstrap framework-CSS Tutorial-php.cn

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

yulia

Release： 2018-10-16 10:56:56

Original

7809 people have browsed it

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>

Copy after login

Rendering:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

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="max-width:90%" >

Copy after login

The effect is as shown in the figure:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

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="max-width:90%" >

Copy after login

The effect is as shown in the picture:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

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="max-width:90%" >

Copy after login

The effect is as shown in the figure:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

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="max-width:90%" >

Copy after login

Compare the above pictures to see the effect of compressing the table:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework 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>

Copy after login

The effect is as shown in the figure:

Detailed graphic explanation of the use of tables and related styles in the bootstrap framework

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