There are 7 table styles: 1. ".table" style, which can define basic tables, with only horizontal separators; 2. ".table-striped" style, which can define zebra crossing tables, with a shallow line every other row. Gray background color; 3. ".table-bordered" style, add border style to all table cells, etc.
The operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer
Bootstrap table style
##☑ .table: Basic table, add basic style (only horizontal separators) to any
☑ .table-striped: zebra striped table
##☑ .table-bordered: table with borders
##☑ .table-hover: mouse hover Highlighted table
☑ .table-condensed:Compact table
##☑ .table-responsive:Responsive table
☑ Contextual table
The following is a brief introduction to the above table style:
1. Basic table
In Bootstrap, the basic table is controlled through the class name ".table". If you do not add any class name to the
element, the table will have no style effect. To get the basic table, we only need to add the ".table" class name to the
element to get the basic table of Bootstrap:
Copy after login
Copy after login
Copy after login
Copy after login
基础表格
省份
城市
广东
深圳
广西
桂林
海南
三亚
The rendering is as follows:
".table" mainly has three functions:
Set margin-bottom:20px for the table and set the cell padding
A 2px light gray solid line is set at the bottom of thead
A 1px light gray solid line is set at the top of each cell
2. Striped table
Sometimes in order to make the table more readable, it is necessary to make the table similar to a zebra crossing effect. To put it simply, it is to give the table a background stripe effect. It is not difficult to achieve this kind of table effect in Bootstrap. You only need to add the class name ".table-striped" on the basis of
:
Copy after login
Copy after login
Copy after login
Copy after login
Effect picture:
The effect is compared with the basic table, except that there is a light gray background color in the tbody every other row. The implementation principle is also very simple, using the structural selector ":nth-child" of CSS3 to implement it, so for IE8 and below browsers, there is no background stripe effect. 3. Border table
The basic table only allows some parts of the table to have borders, but sometimes the entire table needs to have a border effect. For practical purposes, Bootstrap also considers this table effect, that is, all cells have a 1px border. The use of bordered tables in Bootstrap is similar to the use of zebra crossing tables. You only need to add a ".table-bordered" class name to the basic table
. Available:
Copy after login
Copy after login
Copy after login
Copy after login
Rendering:
4. Hover the table
When the mouse is hovering over the table There is a bright background color on the rows. This kind of table makes people look comfortable, and it always tells the user which row of data in the table is being read. Bootstrap did not disappoint you. It also considered this effect and provided a ".table-hover" class name to achieve this table effect. The table highlighted by mouse hovering is also easy to use. You only need to add the class name "table-hover" to the
element:
Copy after login
Copy after login
Copy after login
Copy after login
Effect Picture:
The effect of mouse hover highlighting is mainly achieved through the "hover" event. When "tr:hover" is set, the background color of th and td is new. color.
Note: In fact, the mouse hover highlight table can be mixed with other Bootstrap tables. To put it simply, as long as you want your table to have a hover highlight effect, you only need to add the "table-hover" class name to the table. For example, combine the several tables introduced earlier:
By adding styles to tr and td, add styles to rows or cells Specify the background color of the style to highlight the context. Commonly used styles include active, success, info, danger and warning. As shown below:
The above is the detailed content of What are the table styles of bootstrap?. 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