Fifth Round of Bootstrap3.0 Learning (table)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes tables. This is actually not a stranger to people who have worked on websites. It can be said that it is the most commonly used list display, sometimes users or bosses may have a headache. Next let's take a look at the types of tables that Bootstrap has prepared for us? As follows:

Any<table>Add tags.tableYou can assign a basic style to it-a small number of inner padding and horizontal separation lines. This method looks like a lot more !? However, we feel that table elements are widely used. If we give them a default style, it may affect plug-ins such as calendar and date selection, so we choose to separate the style.

 

A simple Table example

<Div => <table => <caption> Table basic case </caption> <thead> <tr> <th> First Name </th> <th> Last Name </ th> <th> User Name </th> </tr> </thead> <tbody> <tr> <td> aehyok </td> <td> leo </td> <td> @ aehyok </td> </tr> <td> lynn </td> <td> thl </td> <td> @ lynn </ td> </tr> </tbody> </table> </div>

　　

Exploitation.table-stripedYou can<tbody>Add a zebra striped style for each of the items in the Section.

Add another style class to the table element in the preceding example.

 <table =>

The current effect remains a little changed.

Exploitation.table-borderedAdds a border for the table and each cell.

Add another style class to the table element in the first example.

    <table => 

Exploitation.table-hoverAllows<tbody>In the left-side navigation pane.

<table =>

Moving the mouse over that line will work.

Exploitation.table-condensedThis makes the table more compact, and the internal (padding) in the cell will be halved.

<table =>

This effect is not so obvious, mainly because the content of the cell padding is halved.

With these status classes, you can set the color for the row cell.

<table =>        <caption>Table</caption>        <thead>          <tr>            <th>#</th>          <th>First Name</th>            <th>Last Name</th>          <th>User Name</th>          </tr>        </thead>        <tbody>          <tr =>            <td></td>          <td>aehyok</td>            <td>leo</td>           <td>@aehyok</td>          </tr>        <tr =>            <td></td>          <td>lynn</td>            <td>thl</td>           <td>@lynn</td>          </tr>        <tr =>            <td></td>           <td>Amdy</td>            <td>Amy</td>           <td>@Amdy</td>          </tr>        <tr =>           <td></td>           <td>Amdy</td>            <td>Amy</td>           <td>@Amdy</td>          </tr>        <tr >           <td =></td>           <td =>Amdy</td>            <td =>Amy</td>           <td =>@Amdy</td>          </tr>      </tbody>      </table>  

Convert any.tablePackage in.table-responsiveYou can create a response table that will scroll horizontally on a small screen device (less than 768px. When the screen width is greater than 768px, the horizontal scroll bar disappears.

    <div =>    <table =>        <caption>Table</caption>        <thead>          <tr>            <th>#</th>          <th>First Name</th>            <th>Last Name</th>          <th>User Name</th>          </tr>        </thead>        <tbody>          <tr =>            <td></td>          <td>aehyok</td>            <td>leo</td>           <td>@aehyok</td>          </tr>        <tr =>            <td></td>          <td>lynn</td>            <td>thl</td>           <td>@lynn</td>          </tr>        <tr =>            <td></td>           <td>Amdy</td>            <td>Amy</td>           <td>@Amdy</td>          </tr>        <tr =>           <td></td>           <td>Amdy</td>            <td>Amy</td>           <td>@Amdy</td>          </tr>        <tr >           <td =></td>           <td =>Amdy</td>            <td =>Amy</td>           <td =>@Amdy</td>          </tr>      </tbody>      </table>    </div>

Check whether the scroll bar shows a value.

There are several simple style classes that can be used to get the page to this level. It is very good and there is no need to adjust the style in the future.

This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html