JS Component Bootstrap table layout detailed _javascript Tips

Bootstrap provides a clear layout for creating tables. The following table lists some of the table elements supported by Bootstrap:

Table class
The following table styles can be used in tables:

<tr>, <th> and <td> class
The following table's classes are available for table rows or cells:

The basic table
If you want a basic table with only the inner margin (padding) and horizontal split, add class. Table, as shown in the following example:

<div class= "Row" >
      <table class= "table" >
        <caption class= "Text-center" > Basic table Layout </caption >
        <thead>
          <tr>
            <th> numbering </th>
            <th> City </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td> Beijing </td >
          </tr>
          <tr>
            <td>No.2</td>
            <td> Shanghai </td>
          </tr >
        </tbody>
      </table>
</div>

Display effect:

Optional Table class
In addition to the basic table tags and. Table class, there are classes that you can use to define styles for tags. These classes are presented to you below.

Stripes Table
by adding. table-striped class, you will see stripes on rows in <tbody>, as shown in the following example:

<div class= "Row" >
      <table class= "Table table-striped" >
        <caption class= "Text-center" > Stripe table layout </caption>
        <thead>
          <tr>
            <th> number </th>
            <th> City </th >
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td> Beijing </td>
          </tr>
          <tr>
            <td>No.2</td>
            <td> Shanghai </ td>
          </tr>
          <tr>
            <td>No.3</td>
            <td> Suzhou </td>
          </ tr>
          <tr>
            <td>No.4</td>
            <td> Nanjing </td>
          </tr>
        </ tbody>
      </table>
    </div>

Display effect:

Border table
by adding. Table-bordered class, you will see that each element has a border around it, and that the entire table is rounded, as shown in the following example:

<div class= "Row" >
      <table class= "Table table-bordered" >
        <caption class= "Text-center" > Border table layout </caption>
        <thead>
          <tr>
            <th> number </th>
            <th> City </th >
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td> Beijing </td>
          </tr>
          <tr>
            <td>No.2</td>
            <td> Shanghai </ td>
          </tr>
          <tr>
            <td>No.3</td>
            <td> Suzhou </td>
          </ tr>
          <tr>
            <td>No.4</td>
            <td> Nanjing </td>
          </tr>
        </ tbody>
      </table>
 </div>

Display effect:

Hover table
by adding. Table-hover class, a light gray background appears when the pointer hovers over a row, as shown in the following example:

<div class= "Row" >
      <table class= "Table Table-hover" >
        <caption class= "text-center" > Hover table layout </caption>
        <thead>
          <tr>
            <th> numbering </th>
            <th> City </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td > Beijing </td>
          </tr>
          <tr>
            <td>No.2</td>
            <td> Shanghai </td>
          </tr>
          <tr>
            <td>No.3</td>
            <td> Suzhou </td>
          </tr>
          <tr>
            <td>No.4</td>
            <td> Nanjing </td>
          </tr>
        </tbody >
      </table>
</div>

Display effect:

Compact Table
by adding. table-condensed class, the inline margin (padding) is cut in half to make the table look more compact, as shown in the following example. This is useful when you want to make the information look more compact.

<div class= "Row" >
      <table class= "Table table-condensed" >
        <caption class= "Text-center" > Streamline table layouts </caption>
        <thead>
          <tr>
            <th> numbering </th>
            <th> City </th >
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td> Beijing </td>
          </tr>
          <tr>
            <td>No.2</td>
            <td> Shanghai </ td>
          </tr>
          <tr>
            <td>No.3</td>
            <td> Suzhou </td>
          </ tr>
          <tr>
            <td>No.4</td>
            <td> Nanjing </td>
          </tr>
        </ tbody>
      </table>
</div>

Display effect:

Context class
the context classes listed in the following table allow you to change the background color of table rows or individual cells.

These classes can be used in <tr>, <td>, <th>, as shown in the following example:

<div class= "Row" >
      <table class= "table" >
        <caption class= "Text-center" > Context table Layout </ caption>
        <thead>
          <tr>
            <th> number </th>
            <th> City </th>
          </ tr>
        </thead>
        <tbody>
          <tr class= "active" >
            <td>No.1</td>
            <td> Beijing </td>
          </tr>
          <tr class= "Success" >
            <td>No.2</td>
            <td> Shanghai </td>
          </tr>
          <tr class= "Warning" >
            <td>No.3</td>
            <td> Suzhou </td>
          </tr>
          <tr class= "Danger" >
            <td>No.4</td>
            <td> Nanjing </td>
          </tr>
        </tbody>
      </table>
    </div>

Display effect:

Response table
You can scroll the table horizontally to fit a small device (less than 768px) by wrapping any. Table in the. Table-responsive class. When viewed on large devices larger than 768px wide, you will not see any differences.

 <div class= "table-responsive" >
    <table class= "table" >
      <caption class= "Text-center" > Response table Layout </caption>
      <thead>
        <tr>
          <th> number </th>
          <th> City </th >
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>No.1</td>
          <td> Beijing </td>
        </tr>
        <tr>
          <td>No.2</td>
          <td> Shanghai </td>
        </tr>
        <tr>
          <td>No.3</td>
          <td> Suzhou </td>
        </tr>
        <tr>
          <td>No.4</td>
          <td> Nanjing </td>
        </tr>
      </tbody>
    </table>
  </div>

Display effect:

If you want to continue to learn, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

The above is the entire content of this article, I hope to help you better learn the JS Table component Artifact bootstrap table.