Teach everyone to easily make bootstrap beautiful table (table) _javascript tips

After learning the content of the bootstrap in the Runoob.com Web site, make a summary of the contents of the website, so as to help the friends who have doubts in this aspect, and also help them to digest the content of the learning.

We should be glad that we live in such an internet age, open and share. Many of the results we have tried to achieve have been predecessors for us to sum up and make a very good framework, shared out let us use, so that we can easily achieve a very beautiful effect.

Here's an example of how to use the bootstrap ready-made CSS style to add directly to our table table, we need to write very little code can easily make beautiful tables.

For example, we're going to make a table like this:

With Bootstrap, just write the HTML content structure, plus the bootstrap-specific class style for the table to achieve the effect in the diagram.
The code is as follows:

 <! DOCTYPE html> 
 

I've added a width of 500px to him here for convenience and beauty. We use a <div class= "container" > to wrap our table as a base panel. Container also belongs to the Bootstrap class style, in Webstorm we hold CTRL + click the left button to enter the container (any script style you look at it inside the implementation, if you want to introduce first), you can see the properties of the bootstrap are as follows:

. container {
 padding-right:15px;
 padding-left:15px;
 Margin-right:auto;
 Margin-left:auto;
}

Containner can be adapted to the browser for us to set the outer margin, set fixed around the inside margin of 15px.

Next, let's say the steps:

First step: introduce the bootstrap script file:
<link type= "text/css" rel= stylesheet "href=". /libs/bootstrap.css ">

This script can be downloaded from the http://getbootstrap.com website.

Step Two: write HTML content structure code.

Only set the width, without adding any other style of naked makeup He was like this:

Step three: Add Bootstrap style to table:
<table style= "width:500px" class= "table table-striped table-hover table-bordered" >

The above three steps can get the result of the first picture.

To explain the effects of these styles, runoob.com lists the more concise parsing:

In the ranks, you can also use the. Active. Success. Danger these styles for rows and columns. For example, I joined the row and column style:

The effect is this:

You can add styles according to your needs.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.