Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what is the table style of bootstrap and how to achieve it?" in the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

There are 7 table styles: 1, ".table" style, can define the basic table, only horizontal separation line; 2, ".table-striped" style, can define zebra crossing table, table interlacing has a light gray background color; 3, ".table-bordered" style, add border style to all table cells, etc.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap table class style

☑ .table: base table, adding basic styles for any (only horizontal separator lines)

☑. Table-striped: zebra crossing table

☑ .table-bordered: a table with a border

☑ .table-hover: a table highlighted over the mouse

☑. Table-condensed: compact form

☑. Table-responsive: responsive forms

☑ context class table

The following is a brief introduction to the above table styles:

I. basic form

In Bootstrap, the underlying table is controlled by the class name ".table". If you do not add any class names to the element, the table has no styling effect. To get the base table, we just need to add the ".table" class name to the element to get the base table for Bootstrap:

Basic form province city Guangdong Shenzhen Guangxi Guilin Hainan Sanya

The effect picture is as follows:

".table" has three main functions:

Set the margin-bottom:20px for the table and set the cell spacing

A light gray solid line of 2px is set at the bottom of thead.

A light gray solid line of 1px is set at the top of each cell

2. Stripe form

Sometimes in order to make the table more readable, it is necessary to make the table similar to a zebra crossing. To put it simply, let the table have the effect of background stripes. It is not difficult to achieve this table effect in Bootstrap, you just need to add the class name ".table-striped" to it:

Effect picture:

The effect is that compared to the underlying table, there is only a light gray background color in the tbody interlaced. Its implementation principle is also very simple, using CSS3's structural selector ": nth-child" to achieve, so for IE8 and its following browsers, there is no background stripe effect.

III. Border form

The underlying table only has a border in part of the table, but sometimes you need the entire table to have a border effect. For practical use, Bootstrap also takes into account this tabular effect, that is, all cells have a 1px border.

A table with a border in Bootstrap is similar to a zebra crossing table by adding a ".table-bordered" class name to the underlying table:

Effect picture:

4. Hover form

When the mouse hovers over the row of the table with a highlighted background color, such a table looks comfortable, always telling the user which row of the table you are reading. Bootstrap really doesn't let you down, and he takes this effect into account, providing a ".table-hover" class name to achieve this tabular effect.

Hovering over the highlighted table is also easy to use, just add the class name "table-hover" to the element:

Effect picture:

Mouse suspension highlight effect is mainly through the "hover" event to achieve, set the "tr:hover" when the th, td background color for the new color.

Note: in fact, mouse hovering highlighted forms can be mixed with other Bootstrap forms. To put it simply, as long as you want your table to have a floating highlight effect, all you have to do is add the "table-hover" class name to the table. For example, use a combination of several tables described earlier:

...

V. contextual form

Add the background color of a specified style to a row or cell by adding styles to tr and td, highlighting the context. Commonly used styles are active, success, info, danger, and warning. As follows:

Contextual table layout number of provincial capitals prefecture-level cities Fujian Fuzhou 9 Guangdong Guangzhou 21 Guangxi Nanning 14 Hainan Haikou 4

Effect picture:

VI. Responsive form

With the advent of all kinds of handheld devices, the demand for responsive design is getting louder and louder if you want to make your Web page suitable for browsing on a variety of devices. Bootstrap also provides responsive effects for tables, which are called responsive tables.

Bootstrap provides a container, and this container sets the class name ".table-responsive". The container has a responsive effect, and then it will be placed in this container so that the table has a responsive effect.

The responsive table effect in Bootstrap shows that when the visual area of your browser is less than 768px, a horizontal scroll bar appears at the bottom of the form. When the visual area of your browser is larger than 768px, the horizontal scroll bar at the bottom of the table disappears. Examples are as follows:

...

7. Compact form:

What is a compact table, simply understood, is that the cell has no inner distance or the inner distance is smaller than that of other tables. In other words, to implement a compact table, you only need to reset the value of the padding inside the table cell. So in Bootstrap, the cell offset value is reset by the class name "table-condensed".

For the use of compact tables, you only need to add the class name "table-condensed" on the basis:

The compact table in Bootstrap is not much different from the base table because it simply adjusts the inner spacing of the cell from 8px to 5px.

This is the end of the introduction of "what are the table styles of bootstrap and how to implement them?" Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.