How to set table style in Bootstrap-JS Tutorial-php.cn

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.

How to set table style in Bootstrap

【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>

Copy after login

(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>

Copy after login

Rendering:

Image 10.jpg

(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>

Copy after login

.table	Add basic Style (only horizontal separators)
.table-striped	Add zebra stripes in
.table-bordered	Add borders to all table cells
.table-hover	in < Enable mouseover state for any row within tbody>
.table-condensed	Make the table more compact

Rendering:

How to set table style in Bootstrap

#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>

Copy after login

Rendering:

How to set table style in Bootstrap

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!

Related labels：

bootstrap

source：php.cn

Previous article：How to use JavaScript code? How to introduce HTML page? Next article：What is callback in JavaScript

Statement of this 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