What table classes are there in bootstrap?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What table classes are there in bootstrap?

青灯夜游

Jan 10, 2022 pm 12:05 PM

bootstrap

Bootstrap’s table classes include: 1. “.table”, basic table; 2. “.table-striped”, zebra striped table; 3. “.table-bordered”, table with borders; 4. ".table-hover", mouse-over highlighted tables, etc.

What table classes are there in bootstrap?

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

Bootstrap Table

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

Tag	Description

Add basic styles to the table. The container element () of the table header row is used to identify the table columns. Container element () for table rows in the table body. Container element (Default table cell. Special table cell used to identify a column or row (depending on range and position). Must be used within . A description or summary of the table storage content.







	or	) for a group of table cells that appear on a single row.

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

ClassDescription.tableAdd basic styles (only horizontal separators) to any

.table-stripedAdd zebra stripes in (not supported by IE8). table-borderedAdd borders to all table cells.table-hoverEnable mouse on any row within Hover state.table-condensedCompact table.table-responsiveResponsive Formula table.table-borderedBordered table

Basic table

If you want a basic table with just padding and horizontal splitting, add class .table, as shown in the following example:

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script ></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<table class="table">
    <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>
 
</body>
</html>

Copy after login

The result is as follows:

What table classes are there in bootstrap?

Optional table classes

In addition to basic table tags and .table class, there are Classes that can be used to define styles for markup. These classes are introduced to you below.

Striped Table

By adding

.table-striped class you will see stripes on the rows inside

as follows The example above is as shown:

Example

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Copy after login

The result is as follows:

What table classes are there in bootstrap?

Border table

By adding the

.table-bordered class, you will see that each element has a border around it, and the entire table has rounded corners, as shown below The example is as follows:

Example

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Copy after login

The result is as follows:

What table classes are there in bootstrap?

Hover table

By adding the

.table-hover class, a light gray background will appear when the pointer hovers over the row, as shown in the example below:

Example

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Copy after login

The results are as follows:

What table classes are there in bootstrap?

##Simplified form

By adding the

.table-condensed

class, the inline padding is cut in half to make the table look more compact, as shown in the example below. This is useful when you want your information to appear more compact.

Instance

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

Copy after login

The result is as follows:

What table classes are there in bootstrap?

Context Class

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

Class .active.success.warning.dangerThese classes can be applied to ,

Description
For a specific row or Cells apply the hover color
to indicate a successful or positive action
Indicates a warning that requires attention
Indicates a dangerous or potentially negative action
or	.

Example

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

Copy after login

The result is as follows:

What table classes are there in bootstrap?

Responsive form

By wrapping any

.table

within a .table-responsive class, you can make the table scroll horizontally to fit on small devices (less than 768px). You won't see any difference when viewing on large devices larger than 768px wide.

Example

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

Copy after login

The results are as follows:

##[Related recommendations: " What table classes are there in bootstrap? bootstrap tutorial

》】

The above is the detailed content of What table classes are there in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Where to find the Crane Control Keycard in Atomfall

1 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7441

CakePHP Tutorial

1370

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

How to upload files on bootstrap Apr 07, 2025 pm 01:09 PM

The file upload function can be implemented through Bootstrap. The steps are as follows: introduce Bootstrap CSS and JavaScript files; create file input fields; create file upload buttons; handle file uploads (using FormData to collect data and then send to the server); custom style (optional).

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to do vertical centering of bootstrap Apr 07, 2025 pm 03:21 PM

Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.

How to change the size of a Bootstrap list? Apr 07, 2025 am 10:45 AM

The size of a Bootstrap list depends on the size of the container that contains the list, not the list itself. Using Bootstrap's grid system or Flexbox can control the size of the container, thereby indirectly resizing the list items.

How to layout bootstrap Apr 07, 2025 pm 02:24 PM

To use Bootstrap to layout a website, you need to use a grid system to divide the page into containers, rows, and columns. First add the container, then add the rows in it, add the columns within the row, and finally add the content in the column. Bootstrap's responsive layout function automatically adjusts the layout according to breakpoints (xs, sm, md, lg, xl). Different layouts under different screen sizes can be achieved by using responsive classes.

How to write a carousel picture on bootstrap Apr 07, 2025 pm 12:54 PM

Creating a carousel chart using Bootstrap requires the following steps: Create a container containing a carousel chart, using the carousel class. Add a carousel image to the container, using the carousel-item class and the active class (only for the first image). Add control buttons, using the carousel-control-prev and carousel-control-next classes. Add a carousel-indicators metric (small dots), using the carousel-indicators class (optional). Set up automatic playback and add data-bs-ride="carousel&"on the carousel" container.

What is the reason why Bootstrap Table displays garbled code Apr 07, 2025 am 11:30 AM

The main reasons for displaying garbled code on Bootstrap Table are character set mismatch, encoding problems and poor browser compatibility. Solutions include: 1. Confirm character set consistency; 2. Check data transmission encoding; 3. Replace a browser with better compatibility; 4. Update the Bootstrap Table version; 5. Confirm the data format is correct; 6. Clear the browser cache.

See all articles