Boottarp Learning (2) Table, boottarp learning table

Boottarp Learning (2) Table, boottarp learning table
Table

Table is one of the basic components of Bootstrap. Bootstrap provides1 Basic StyleAndFour additional stylesAnd1 responsive table. In the process of using Bootstrap tables, you only need to add the corresponding class name to get different Table Styles. In the following content, we will detail the use of Bootstrap tables.

Similarly, if you are familiar with CSS preprocessors, you can use the preprocessing version provided by Bootstrap:
LESS version, the corresponding file isTables. less
Sass version. The corresponding file is_ Tables. scss

If you do not understand lessor sass, you can find 1,402nd lines in the bootstrap.css file ~ All style codes related to the table can be viewed in Row 3. Because the code is too long, it is not listed here.

As mentioned above, Bootstrap provides different class names for different style styles in the table, including:

. Table: Basic table

. Table-striped: Zebra line table

. Table-bordered: Table with border

. Table-hover: Hover the mouse over the highlighted table

. Table-condensed: Compact table

. Table-responsive: Responsive table

 

<H1> basic table 
Basic table

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Zebra chart

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Table with border

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Hover the mouse over the highlighted table

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Compact table

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Response Table

 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Table-table row class
Bootstrap is also the row element of the table.<Tr>Five different class names are provided, and each class name controls the different background colors of the row, as shown in the following table:


It is very easy to use. You only need to add the class name corresponding to the above table to the <tr> element to achieve the effect you need:
<tr class="active">    <td>…</td></tr>

For the source code, please refer to the 1,484th lines in the bootstrap.css file ~ 1,583rd rows.
Note: ". Four other class names and ". when table-hover is used together, Bootstrap also sets the floating state styles for these styles. Therefore, if you need to add other color styles to the tr element ". the table-hover table must be adjusted accordingly.
Note that you must add the <table> labeltable-hoverClass.
The following code:
<table class="table-hover">
<Table class = "table-bordered"> <thead> <tr> <th> class name </th> <th> description </th> </tr> </ thead> <tbody> <tr class = "active"> <td>. active </td> <td> indicates the information of the current activity </td> </tr> <tr class = "success"> <td>. success </td> <td> indicates successful or correct behavior </td> </tr> <tr class = "info"> <td>. info </td> <td> indicates neutral information or behavior </td> </tr> <tr class = "warning"> <td>. warning </td> <td> indicates a warning. Special attention is required </td> </tr> <tr class = "danger"> <td>. danger </td> <td> indicates dangerous or possibly incorrect behavior </td> </tr> </tbody> </table>



 

 
  
 
   
 
    
Class Name
 
    
Description
 
   
 
  
 
  
 
   
 
    
. Active
 
    
Indicates information about the current activity.
 
   
 
   
 
    
. Success
 
    
Indicates successful or correct behavior
 
   
 
   
 
    
. Info
 
    
Indicates neutral information or behavior
 
   
 
   
 
    
. Warning
 
    
Indicates a warning. Special attention is required.
 
   
 
   
 
    
. Danger
 
    
Dangerous or possibly incorrect behavior
 
   
 
  

 
Table-basic table
You are not familiar with tables, but you may be unfamiliar with how to use tables in Bootstrap. Next, we will introduce the actual usage of Bootstrap tables based on different table types.
The structure of the table is the same as that of the table we usually use:
<Table> <thead> <tr> <th> table title </th>... </Tr> </thead> <tbody> <tr> <td> table cell </td>... </Tr>... </Tbody> </table>

If there is no special declaration, the structure is similar to the above Code when we introduce the table Type below.
Basic table
In Bootstrap, the basic table is controlled by the class name ". table. If no class name is added to the <table> element, the table has no style effect. To get the basic table, you only need to add the ". table" class name on the <table> element to get the basic table of Bootstrap:
<table class="table">…</table>
The basic Bootstrap table looks like this:

The main source code is 1,402nd lines ~ The code is too long and is not listed here.
". Table" has three main functions:
Set the margin-bottom: 20px for the table and set the unit spacing.
Set a 2px light gray solid line at the bottom of thead.
A light gray solid line of 1px is set at the top of each cell.



 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Table-zebra crossing table
Sometimes to make a table more readable, you need to make it look similar to a zebra crossing. To put it simply, the table has a background stripe. It is not difficult to implement this table in Bootstrap.<Table class = "table">Add the class name". Table-striped:
<table class="table table-striped">…</table>
Compared with the basic tableThere is a light gray background color on the line.. The implementation principle is also very simple. It is implemented using the CSS3 structural selector ": nth-child". Therefore, for IE8 and its following browsers, there is no background stripe effect.
For the source code, refer to the 1,465th lines of the bootstrap.css file ~ Row 3:
.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background-color: #f9f9f9;}



 

 
  
 
   
 
    
Table title
 
    
Table title
 
    
Table title
 
   
 
  
 
  
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
   
 
    
Table Cell
 
    
Table Cell
 
    
Table Cell
 
   
 
  

 
Table-a table with a border
The basic table only has a border for some parts of the table, but sometimes the entire table needs a border effect. For actual use, Bootstrap also considers this table effect, that is, all cells have one1px.
The usage of a table with borders in Bootstrap is similar to that of a zebra chart. You only need to add a". Table-borderedClass Name:
<table  class="table table-bordered">  …</table>
Shows the style:

The source code can be 1,450th rows ~ of the bootstrap.css file ~ Row 3:
. Table-bordered {border: 1px solid # ddd;/* set the border of the entire table */}. table-bordered> thead> tr> th ,. table-bordered> tbody> tr> th ,. table-bordered> tfoot> tr> th ,. table-bordered> thead> tr> td ,. table-bordered> tbody> tr> td ,. table-bordered> tfoot> tr> td {border: 1px solid # ddd;/* set the border for each cell */}. table-bordered> thead> tr> th ,. table-bordered> thead> tr> td {border-bottom-width: 2px;/* border at the bottom of the header */}
Table-Hover the mouse over the highlighted table
When you hover the mouse over the row of a table, there is a highlighted background color. Such a table looks comfortable and always tells the user which row of data is reading the table. Bootstrap did not disappoint you. He also considered this effect and provided a". Table-hoverClass Name to achieve this table effect.
Hover the mouse over the highlighted table. You only need to add the class name "to the <table class =" table "> element.Table-hover:
<table class="table table-hover">…</table>
As follows:

As you can see, when you hover your mouse over a cell, the background color of the row where the cell is located will changeLight gray.
The effect of hovering the mouse over the highlighted mouse is mainly achieved through the "hover" event, and the"Tr: hoverThe background color of th and td is the new color.
For the source code, refer to the 1,469th lines in the bootstrap.css file ~ Row 3:
.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th {background-color: #f5f5f5;}
Note:In fact, hover the mouse over the highlighted table, which can be used together with other Bootstrap tables. To put it simply, if you want your table to have a floating highlight effect, you just need to add"Table-hoverClass Name. For example, you can use the following tables in combination:
<table class="table table-striped table-bordered table-hover">…</table>
Table-compact table
What is a compact table?No inner cell distanceOrThe internal distance is smaller than that of other tables.. In other words, to implement a compact table, you only need to reset the inner distance of the table cells.Padding. In Bootstrap,Table-condensed"Reset the incell distance value.
To use a compact table, you only need to add the class name"Table-condensed":
<table class="table table-condensed">…</table>
As follows:

It can be seen from the above that the compact table in Bootstrap is not much different from the basic table, because only the inner distance of cells is8 Px to 5px.
For the source code, refer to the 1,442nd lines of the bootstrap.css file ~ Row 3:
.table-condensed > thead > tr > th,.table-condensed > tbody > tr > th,.table-condensed > tfoot > tr > th,.table-condensed > thead > tr > td,.table-condensed > tbody > tr > td,.table-condensed > tfoot > tr > td {padding: 5px;}
As described in the previous section in the floating highlighted table, you can combine the preceding table styles in Bootstrap to create more exquisite tables. The combination method is also very simple, that is, add the table style type you need on the basis of <table class = "table">.
In addition, you may also find that no matter which table you create, the class name "table" is required ". Therefore, when using the Bootstrap table, you must note that the class name "table" must not be missing in your <table> element"
Table-Response Table
With the emergence of various handheld devices, to make your Web pages suitable for devices with thousands of images,Responsive DesignMore and more voices. In Bootstrap, the table also provides a responsive effect, which is calledResponse Table.
Bootstrap provides a container and sets the class name ". table-responsive ", the container has a responsive effect, and then put <table class =" table "> in this container, the table also has a responsive effect.
In Bootstrap, responsive tables are shown as follows: when the visible area of your browser is smaller768pxThe horizontal scroll bar appears at the bottom of the table. When the visible area of your browser is greater than 768px, the horizontal scroll bar at the bottom of the table disappears. Example:
<div class="table-responsive"><table class="table table-bordered">   …</table></div>
The running effect is as follows:

(Wide screen effect)

(Narrow screen effect)