Home >Web Front-end >JS Tutorial >How to set table style in Bootstrap
You can set the table style by introducing the Bootstrap file externally. After the introduction, add the class name of the table style in the Bootstrap file to the html code to add the specific style
Today I will introduce to you how to quickly build table styles through Bootstrap. It has certain reference value and I hope it will be helpful to everyone.
【Recommended course: Bootstrap tutorial】
The meaning of Bootstrap:
Bootstrap is a front-end framework for rapid development of web applications and websites. Bootstrap is mainly based on HTML, CSS, and JavaScript language documents.
It has the following characteristics:
In CSS, it has global CSS settings, defining basic HTML element styles, extensible classes and other features. At the same time, it also contains more than a dozen reusable components for creating images, drop-down menus, navigation, alert boxes, pop-up boxes, etc. The JavaScript plug-in included in bootstrap contains more than a dozen custom jQuery plug-ins. In the code, we can directly use
to quickly build table styles through Bootstrap:
(1) Import Bootstrap files from the outside
<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css"> <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>
(2) Create a table through HTML code
<table> <thead> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> </tr> </thead> <tbody> <tr> <td>示例一</td> <td>示例一</td> <td>示例一</td></tr> <tr> <td>示例二</td> <td>示例二</td> <td>示例二</td></tr> <tr> <td>示例三</td> <td>示例三</td> <td>示例三</td></tr> </tbody> </table>
Rendering:
(3) Next, introduce Bootstrap externally to quickly build the table style
.table | Add basic Style (only horizontal separators) |
.table-striped | Add zebra stripes in 92cee25da80fac49f6fb6eec5fd2c22a (not supported by IE8) |
.table-bordered | Add borders to all table cells |
.table-hover | in 9acacfffbbc2d33c33d794768c55be1f |
.table-condensed | Make the table more compact |
Apply the hover color to a specific row or cell | |
Indicates a successful or positive action | |
Indicates a warning that requires attention | |
Indicates a dangerous or potentially negative action |
Summary: The above is the entire content of this article. I hope that this article can help everyone learn how to quickly create table styles by introducing Bootstrap externally
The above is the detailed content of How to set table style in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!