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

(not supported by IE8) ##

   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <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>

.table	Add basic Style (only horizontal separators)
.table-striped	Add zebra stripes in
.table-bordered	Add borders to all table cells
.table-hover	in
.table-condensed	Make the table more compact

Rendering:

#In addition, we can also add a background color to the table. The specific code is as follows

.active Apply the hover color to a specific row or cell .success Indicates a successful or positive action .warning Indicates a warning that requires attention .danger Indicates a dangerous or potentially negative action

  <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr class="active">
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr class="warning">
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr class="danger">
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

Rendering:

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!