Article 6. bootstrap table, Article 6. bootstrap

Article 6. bootstrap table, Article 6. bootstrap

Basic table:

<Table class = "table">

<Tr> <td> User Name </td> <td> password </td> </tr>

<Tr> <td> aha </td> <td> 1111 </td> </tr>

</Table>

In<table>Add tags.tableClass can give it a basic style, a small number of inner padding and horizontal separation lines.

The display effect is as follows:

 

Striped table:

Adding "class =" table-striped "to the table label adds a zebra stripe pattern to each row in the tbody.

<Table class = "table-striped">

<Tr> <td> User Name </td> <td> password </td> </tr>

<Tr> <td> aha </td> <td> 1111 </td> </tr>

</Table>

The display effect is as follows:

 

 

 

Table with border:

Adding class = "table-bordered" to the table label adds a border for each cell in the table.

 

<Table class = "table-bordered">

<Tr> <td> User Name </td> <td> password </td> </tr>

<Tr> <td> aha </td> <td> 1111 </td> </tr>

</Table>

The display effect is as follows:

 

 

 

 

 

Tightening table:

Add.table-condensedClass makes the table more compact, and the padding in the cell will be halved.

<Table class = "table-condensed">

<Tr> <td> User Name </td> <td> password </td> </tr>

<Tr> <td> aha </td> <td> 1111 </td> </tr>

</Table>

The display effect is as follows:

 

 

 

 

Response Table:

Convert any.tableElement wrapped in.table-responsiveElement to create a response table that will scroll horizontally on a small screen device (less than 768px. When the screen width is greater than PX, the horizontal scroll bar disappears

<Div class = "table-responsive">

<Table>

<Tr> <td> User Name </td> <td> password </td> </tr>

<Tr> <td> aha </td> <td> 1111 </td> </tr>

</Table>

</Div>