Home>Article>Web Front-end> What are the table styles of bootstrap?
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
##☑ .table: Basic table, add basic style (only horizontal separators) to any
☑ .table-striped: zebra striped table
##☑ .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:
In Bootstrap, the basic table is controlled through the class name ".table". If you do not add any class name to the
| 省份 | 城市 |
|---|---|
| 广东 | 深圳 |
| 广西 | 桂林 |
| 海南 | 三亚 |
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
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
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
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
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.
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:
| 省份 | 省会 | 地级市数量 |
|---|---|---|
| 福建 | 福州 | 9 |
| 广东 | 广州 | 21 |
| 广西 | 南宁 | 14 |
| 海南 | 海口 | 4 |
6. Responsive form
随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：
…
七、紧凑型表格：
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。
紧凑型表格的运用，也只是需要在
Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
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!
