Bootstrap must-learn tables every day_javascript skills-JS Tutorial-php.cn

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

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>

Copy after login

Striped table

Use .table-striped to add a zebra stripe style to everything within

.
Add another style class
to the table element in the example above

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

Mouseover
Use .table-hover to make each row in

respond to the mouse hover state.

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.

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>

Copy after login

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>

Copy after login

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.

Related labels：

bootstrap sheet

source：php.cn

Previous article：Nodejs express usage tutorial (with code) Next article：Javascript implementation of dynamic statistical chart development examples_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn