bootstrap学习笔记bootstrap组件_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

bootstrap学习笔记bootstrap组件_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

、

标签

描述

），用来标识表格列。）。内使用。


为表格添加基础样式。

表格标题行的容器元素（

表格主体中的表格行的容器元素（

一组出现在单行上的表格单元格的容器元素（	或	）。
		默认的表格单元格。
		特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在

关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

, 内的行上看到条纹，如下面的实例所示：

<div class="row">            <table class="table table-striped">                <caption class="text-center">条纹表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<div class="row">            <table class="table table-bordered">                <caption class="text-center">边框表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

<div class="row">            <table class="table table-hover">                <caption class="text-center">悬停表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div class="row">            <table class="table table-condensed">                <caption class="text-center">精简表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

类

描述

.table

为任意添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.table-condensed	让表格更加紧凑

和

类

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table ，如下面实例所示：

<div class="row">            <table class="table">                <caption class="text-center">基本表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

可选的表格类

除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class，您将在

类	描述
.active	对某一特定的行或单元格应用悬停颜色
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

这些类可以用到

、

中，如下面实例所示：

<div class="row">            <table class="table">                <caption class="text-center">上下文表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr class="active">                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr class="success">                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr class="warning">                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr class="danger">                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

 <div class="table-responsive">        <table class="table">            <caption class="text-center">响应式表格布局</caption>            <thead>                <tr>                    <th>编号</th>                    <th>城市</th>                </tr>            </thead>            <tbody>                <tr>                    <td>No.1</td>                    <td>北京</td>                </tr>                <tr>                    <td>No.2</td>                    <td>上海</td>                </tr>                <tr>                    <td>No.3</td>                    <td>苏州</td>                </tr>                <tr>                    <td>No.4</td>                    <td>南京</td>                </tr>            </tbody>        </table>    </div>

显示效果：

Statement

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

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles

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

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

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

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),