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.

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 toBootstrap video tutorial.

1. Basic table

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:

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 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:

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 to give it to the Add a zebra stripe pattern to each row.

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 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:

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

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:

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

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:

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

Related labels:
source:php.cn
Statement of this 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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!