Bootstrap must-learn tables every day_javascript skills

This article mainly explains tables. This is actually not unfamiliar to people who have done websites, and it can be said to be the most commonly used display of various lists. Sometimes it is also felt due to the needs of users or bosses. Headache. 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. Compression table
6. Status class
7. Responsive form
8. Summary

Basic case
Adding .table to any f5d188ed2c074f8b944552db028f98a1 tag gives it a basic style—a small amount of padding and a horizontal divider. This approach looks very redundant! ? However, we feel that the table element is widely used, and if we give it a default style, it may affect plug-ins such as calendar and date selection, so we chose to separate its style.

A simple Table example

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</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> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

Striped table

Use .table-striped to add a zebra stripe style to everything within 92cee25da80fac49f6fb6eec5fd2c22a.
Add another style class
to the table element in the example above 850aad7c9803f65863edd23ef123b2cc
Looking at the current effect, there are still some changes.

Table with borders
Use .table-bordered to add borders to the table and each cell within it.
Or add another style class
to the table element in the first example 8e6a5157b5b720a6b30bc7886b8a1bae

Mouseover
Use .table-hover to make each row in 92cee25da80fac49f6fb6eec5fd2c22a respond to the mouse hover state.
95df9d71803495963fc38c12f79bae2c
Move the mouse to that line and it will have the effect

Compact table
Use .table-condensed to make the table more compact, and the padding in the cells will be reduced by half.
87aa75fe06d344e98f50958dc170282b
This effect is not that obvious, mainly because the padding of the content in the cell is reduced by half.

Status Class
Colors can be set for licensed cells through these status classes.

<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> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table> 

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

<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> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

Look at the scroll bar appearing.

A few simple style classes can transform the page to this level, which is great. You no longer have to worry about adjusting the style in the future.

The above is a display of the most commonly used lists of Bootstrap tables. I hope it will be helpful to everyone's learning.