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

This article mainly explains "how to achieve bootstrap3.0 multiple table effects", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to achieve bootstrap3.0 multiple table effects" bar!

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

#

FirstName

LastName

UserName

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

#

FirstName

LastName

UserName

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.

Thank you for your reading, the above is "how to achieve bootstrap3.0 multiple table effects" of the content, after the study of this article, I believe you on how to achieve a variety of bootstrap3.0 table effects of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.