Detailed graphic explanation of the use of tables and related styles in the bootstrap framework
yulia
Release: 2018-10-16 10:56:56
Original
7640 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.
After the basic layout is completed, add the class class name.table to the
bootstrap table example: Create a table with six rows and four columns for statistical student information. The specific code is as follows:
学号
姓名
年龄
地址
1
郭靖
25
安徽
2
田秋元
23
上海
3
杨容
24
江西
4
许悦
21
浙江
5
张柏芝
22
新疆
Copy after login
Rendering:
2. Striped table
Based on the basic table, add the class name .table-striped to the
tag to achieve the basic table style (a small amount of content) padding and horizontal dividing lines).
Copy after login
The effect is as shown in the figure:
3. The table with borders
is in In the
tag to give it to the
Add a zebra stripe pattern to each row.
Copy after login
The effect is as shown in the picture:
4. Hover the mouse over the table
In the
tag, add the class class name.table-bordered to add a border to the table and each cell in it.
Copy after login
The effect is as shown in the figure:
5. Compress 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.
Copy after login
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.
学号
姓名
年龄
地址
1
郭靖
25
安徽
2
田秋元
23
上海
3
杨容
24
江西
4
许悦
21
浙江
5
张柏芝
22
新疆
1
郭靖
25
安徽
2
田秋元
23
上海
3
杨容
24
江西
4
许悦
21
浙江
5
张柏芝
22
新疆
Copy after login
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 visitBootstrap Online Manual
tag , adding class name.table-condensed can make the table more compact, and the padding in the cells will be halved.
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!
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