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

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

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

Mouseover

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

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.

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.

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.

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.