Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what tables are there in Bootstrap3.0". Many people will encounter such a dilemma in the operation of actual cases. then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Basic case

Adding .table to any tag gives it a basic style-a small amount of padding and horizontal separators. This way seems to be a lot!? However, we feel that table elements are widely used, and if we give them default styles, it may affect plug-ins such as calendar and date selection, so we choose to separate their styles.

A simple example of Table

The code is as follows:

Table basic case

First Name

Last Name

User Name

Aehyok

Leo

@ aehyok

Lynn

Thl

@ lynn

Striped table

Using .table-striped, you can add zebra stripe styles to each of them.

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

The code is as follows:

Look at the current effect, there are still some changes.

A 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

The code is as follows:

Mouse hover

Using .table-hover, you can get each line in to respond to the mouse hover state.

The code is as follows:

Move the mouse to that line and that line will work.

Compact form

Using .table-condensed can make the table more compact, and the padding in the cell will be halved.

The code is as follows:

This effect is not so obvious, mainly because the content padding in the cell has been halved.

Status Class

Through these states, class can set the color for the licensed cell.

The code is as follows:

Table

#

First Name

Last Name

User Name

one

Aehyok

Leo

@ aehyok

two

Lynn

Thl

@ lynn

three

Amdy

Amy

@ Amdy

four

Amdy

Amy

@ Amdy

five

Amdy

Amy

@ Amdy

Responsive form

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

The code is as follows:

Table

#

First Name

Last Name

User Name

one

Aehyok

Leo

@ aehyok

two

Lynn

Thl

@ lynn

three

Amdy

Amy

@ Amdy

four

Amdy

Amy

@ Amdy

five

Amdy

Amy

@ Amdy

Look, there's a scroll bar.

This is the end of the content of "what tables are in Bootstrap3.0". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.