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

This article shows you what the bootstrap table classes are, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Bootstrap table classes are: 1, ".table", basic table; 2, ".table-striped", zebra crossing table; 3, ".table-bordered", with a border table; 4, ".table-hover", mouse-over highlighted table, and so on.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap form

Bootstrap provides a clear layout for creating tables. The following table lists some of the table elements supported by Bootstrap:

The label description adds the base style to the table. The container element () of the table header row that identifies the table column. The container element () of the table row in the table body. The container elements (or) of a set of table cells that appear on a single row. The default table cell. A special table cell that identifies a column or row (depending on the range and location). Must be used internally. A description or summary of the contents stored in a table.

Bootstrap provides different class names for different styles of tables, mainly including:

Class description. Table adds basic styles (horizontal separators only). Table-striped adds stripes in the form of zebra stripes (not supported by IE8). Table-bordered adds borders to the cells of all tables. Table-hover enables mouse hover in any row inside. Table-condensed compact table. Table-responsive responsive table. Table-bordered table with border

Basic form

If you want a basic table with only inner margins (padding) and split horizon, add class .table, as shown in the following example:

Example

Basic table layout name city Tanmay Bangalore Sachin Mumbai

The results are as follows:

Optional table class

In addition to basic table tags and .table class, there are also classes that can be used to define styles for tags. You will be introduced to these classes below.

Stripe table

By adding A. table-striped class, you will see stripes on the inner lines, as shown in the following example

Example

Stripe table layout name city zip code Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027

The results are as follows:

Border table

By adding A. table-bordered class, you will see that each element has a border around it, and the entire table is rounded, as shown in the following example

Example

Border table layout name city zip code Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027

The results are as follows:

Hover form

By adding A. table-hover class, a light gray background appears when the pointer hovers over the line, as shown in the following example

Example

Hover form layout name city zip code Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027

The results are as follows:

Simplify the form

By adding A. table-condensed class, the inline margin (padding) is cut in half to make the table look more compact, as shown in the following example. This is useful when you want to make the information look more compact.

Example

Compact table layout name city zip code Tanmay Bangalore 560001 Sachin Mumbai 400003 Uma Pune 411027

The results are as follows:

Context class

The context classes listed in the following table allow you to change the background color of a table row or individual cells.

Class description. Active applies a hover color to a particular row or cell. Success indicates a successful or positive action. Warning indicates a warning that requires attention. Activity indicates a dangerous or potentially negative action.

These classes can be applied to, or.

Example

Contextual table layout product payment date status product 1 23x11 debacle 2013 product to be shipped 2 10plash 11pacer 2013 product in shipment product 3 20xplink 2013 product to be confirmed product 4 20lash 10Compact 2013 has been returned

The results are as follows:

Responsive form

By wrapping any .table in A. table-responsive class, you can scroll the table horizontally to accommodate small devices (smaller than 768px). When viewing on large devices that are larger than 768px width, you will not see any difference.

Example

Responsive form layout Product payment date status Product 1 23 planner 11 debase 2013 products to be shipped 2 10 lap 11 debacle 2013 product in shipment 3 20 debacle 10 soybean 2013 product to be confirmed 4 20thumb 10Compact 2013 has been returned

The results are as follows:

What are the table categories of bootstrap? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.