Bootstrap3.0 study notes table related

This article mainly explains tables, which are not unfamiliar to people who have made websites. It can be said to be the most commonly used display of various lists. Sometimes it can also be a headache due to the needs of users or bosses. Let's take a look at what types of tables Bootstrap has prepared for us. As shown below:

1. Basic Case

2. Striped table

3. Table with borders

4. Mouseover

5. Tighten the table

6. Status class

7. Responsive Tables

8. Summary

Basic Case

Adding .table to any <table> tag gives it basic styling—a small amount of padding and a horizontal divider. This approach seems redundant! ? However, we feel that table elements are widely used, and if we give them a default style, it may affect plug-ins such as calendars and date selections, so we choose to separate their styles.

A simple Table example

Copy code

The code is as follows:

<div class="container">
<table class="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>
<tr>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
</tbody>
</table>
</div>

Striped table

Using .table-striped, you can add zebra stripe style to everything within <tbody>.

Add another style class to the table element in the above example

Copy code

The code is as follows:

Looking at the current results, there are still some changes.

Table with borders

Use .table-bordered to add borders to the table and each cell in it.

Or add another style class to the table element in the first example

Copy code

The code is as follows:

Mouseover

Use .table-hover to make each row in the <tbody> respond to the mouse hover state.

Copy code

The code is as follows:

Move the mouse to that line and it will take effect.

Compact Table

Using .table-condensed can make the table more compact, and the internal padding of the cells will be halved.

Copy code

The code is as follows:

The effect is not that obvious, the main thing is that the padding of the cell content is halved.

StatusClass

These state classes can be used to set the color of the licensed cells.

Copy code

The code is as follows:

<table class="table table-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr>
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
@Amdy
</tr>
</tbody>
</table>

Responsive tables

Wrap any .table in .table-responsive to create a responsive table that scrolls horizontally on small devices (less than 768px). When the screen is larger than 768px width, the horizontal scroll bar disappears.

Copy code

The code is as follows:

<div class="table-responsive">
<table class="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
@lynn
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
@Amdy
</tr>
<tr>
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
@Amdy
</tr>
</tbody>
</table>
</div>

Look, the scroll bar appears.

Summarize

With just a few simple style classes, you can bring the page to this level, which is great. You don’t have to worry about adjusting the style anymore.

<<: Public multi-type attachment image upload area in Vue page and applicable folding panel (sample code)

>>: Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution