l-1

WEB教程

主页/Bootstrap V5.3 中文手册/内容样式 Content/

Bootstrap V5.3 中文手册

内容样式 Content

Bootstrap V5.3中文翻译版：内容样式

Bootstrap 5.3 Content内容部分预览介绍

Bootstrap 作为最流行的前端框架之一，其内容排版和基础样式设计是构建响应式网页的基石。Bootstrap 5.3 在内容部分（Content）提供了一系列精心设计的样式和工具类，用于优雅地呈现文本、图像、表格等核心内容。本篇将介绍 Reboot、Typography、Images、Tables 和 Figures 这几个主要模块的特性与用法。

1. Reboot：统一的基准样式

Reboot 是 Bootstrap 的基础样式重置（reset）部分，它建立在 Normalize.css 之上，旨在提供一套一致且固执己见的基准样式，作为所有元素的出发点。

设计理念与特点

  • 使用 rem 替代 em：Reboot 更新了部分浏览器的默认值，在可伸缩的组件间距上使用 rem 而不是 em，这使得组件的间隔缩放更加一致和可控。
  • 避免 margin-top：为了防止垂直边距折叠（margin collapse）导致意想不到的结果，Reboot 避开了 margin-top，采用单向的 margin-bottom 来设置元素间距，这简化了布局的心理模型。
  • 全局 box-sizing：Reboot 将每个元素的 box-sizing（包括 *::before 和 *::after）全局设置为 border-box。这意味着元素的声明宽度包含了其内边距（padding）和边框（border），避免了因添加 padding 或 border 而导致元素超出声明宽度的情况，简化了尺寸计算。
  • 使用 CSS 变量：从 v5.1.1 开始，Bootstrap 逐步在所有 CSS 捆绑包中引入了 :root 级别的 CSS 变量（Custom Properties）。这允许开发者更灵活地进行实时定制，而无需总是重新编译 Sass。例如：
    css :root { --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-body-color: #212529; --bs-body-bg: #fff; /* ...更多变量 */ }
    您甚至可以内联覆盖这些变量：<body style="--bs-body-color: #333;">。

页面默认值

Reboot 更新了 <html> 和 <body> 元素以提供更好的页面级默认值：

  • <html> 上未声明基准 font-size，但假定为 16px（浏览器默认值）。font-size: 1rem 应用在 <body> 上，便于进行响应式缩放。
  • <body> 设置了全局的 font-family、font-weight、line-height、color 和 background-color（默认为 #fff）。这确保了后续元素能正确继承，防止字体不一致。

原生字体栈

Bootstrap 采用 “原生字体栈”或“系统字体栈” 来在不同设备和操作系统上实现最佳文本渲染效果。这些字体针对现代设备设计，具有更好的屏幕渲染和可变字体支持。其 $font-family-sans-serif 包含了跨平台的通用字体族、各平台特定字体（如 macOS 的 San Francisco、Windows 的 Segoe UI）、基本网页回退字体以及表情符号字体。

2. Typography：文本排版与样式

Bootstrap 提供了一套清晰、灵活的文本排版工具，用于设置标题、段落、列表及其他内联元素的样式。

默认设置

  • 全局默认：Bootstrap 5 默认的 font-size 为 1rem（通常在浏览器中为 16px），line-height 为 1.5。
  • 段落：所有 <p> 元素的上外边距（margin-top）被设置为 0，下外边距（margin-bottom）为 1rem（默认为 16px），以形成简单的间距。
  • 标题：所有标题元素（<h1> 到 <h6>）的 margin-top 被移除，设置了 margin-bottom: .5rem 和更粗的 font-weight，并具有响应式的 font-size。

标题类与Display标题

除了使用标准的标题标签，Bootstrap 还提供了 .h1 到 .h6 类，使其他元素（如 <p> 或 <div>）也能呈现为标题样式。

<p class="h1">这是一个看起来像 h1 的段落</p>

对于需要更突出显示（更大、更细）的内容，Bootstrap 提供了 Display 标题类（.display-1 到 .display-6）。

<h1 class="display-1">Display 1</h1>

内联文本元素

Bootstrap 为多种内联文本元素定义了样式：

  • <small>：在任意标题内创建较小的辅助文本。
  • <mark> 和 .mark：具有黄色背景颜色和一些内边距，用于高亮文本。
  • <abbr>：为缩写或首字母缩略词提供底部虚线边框，光标悬停时显示问号图标（若提供了 title 属性）。
  • <blockquote>：引用其他来源的内容块时使用。添加 .blockquote 类到 <blockquote>，并使用 .blockquote-footer 类注明来源。

列表与代码

  • 列表：所有列表（<ul>, <ol>, <dl>）的 margin-top 被移除，并设置了 margin-bottom: 1rem。嵌套列表没有 margin-bottom。<ul> 和 <ol> 的 padding-left 也被重置。
  • 代码：
    • <code>：用于内联代码片段，会用特定样式（如红色字体）标注。
    • <kbd>：用于表示用户输入，通常呈现为黑底白字。
    • <pre>：用于多行代码块，具有特定的边距和字体样式。

实用文本工具类

Bootstrap 提供了丰富的文本工具类，用于快速调整文本对齐、大小写、字体粗细等：

功能工具类示例
对齐.text-start, .text-center, .text-end, .text-justify
大小写.text-lowercase, .text-uppercase, .text-capitalize
字重.fw-light, .fw-normal, .fw-bold, .fw-bolder
其他.fs-* (字体大小), .text-muted, .lead (使段落更突出)

3. Images：响应式图像与样式

Bootstrap 提供了一系列工具类，用于轻松控制图像的响应式行为和添加常见样式。

响应式图像

通过为 <img> 元素添加 .img-fluid 类，可以使图像随其父元素自动缩放。其原理是设置 max-width: 100% 和 height: auto。

<img src="path/to/image.jpg" class="img-fluid" alt="描述性文本">

图像缩略图

使用 .img-thumbnail 类可以为图像添加一个 1px 宽度的边框，使其呈现为相片缩略图的效果。这个样式同样是响应式的。

<img src="path/to/image.jpg" class="img-thumbnail" alt="描述性文本">

图像形状

通过以下类可以为图像快速添加圆角或将其变为圆形：

  • .rounded：为图像添加圆角。
  • .rounded-circle：将图像变为圆形（通常用于头像）。
  • .rounded-top, .rounded-end, .rounded-bottom``, **.rounded-start`：仅对特定边添加圆角。
  • .rounded-pill：添加药丸形状的圆角。
<img src="path/to/image.jpg" class="rounded" alt="圆角图像">
<img src="path/to/avatar.jpg" class="rounded-circle" alt="圆形头像">

对齐方式

使用 浮动类 或 Flexbox 工具类 可以控制图像的水平对齐：

  • .float-start：图像左浮动。
  • .float-end：图像右浮动。
  • .mx-auto + .d-block：使图像在其父元素中水平居中。
<img src="path/to/image.jpg" class="float-end" alt="右对齐图像">
<img src="path/to/image.jpg" class="mx-auto d-block" alt="居中图像">

图片标签（Picture Element）

当需要根据屏幕条件（如视口宽度、像素密度、文件格式支持）提供不同图像时，可以使用 HTML5 的 <picture> 元素。Bootstrap 建议将 .img-* 类（如 .img-fluid）直接应用于 <picture> 内部的 <img> 标签，而不是 <picture> 标签本身。

<picture>
  <source srcset="large-image.jpg" media="(min-width: 1200px)">
  <source srcset="medium-image.jpg" media="(min-width: 768px)">
  <img src="small-image.jpg" class="img-fluid" alt="响应式图片示例">
</picture>

4. Tables：数据表格的样式与变体

Bootstrap 5 为表格提供了丰富而灵活的样式选项。由于 <table> 元素也可能被第三方小部件使用，因此 Bootstrap 的表格样式是可选的，需要添加基类 .table 才能生效。所有表格样式都不会继承，因此嵌套表格可以独立设置样式。

基本表格

为核心表格添加基本样式：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">名</th>
      <th scope="col">姓</th>
      <th scope="col">用户名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

表格变体

Bootstrap 提供了多种上下文类，用于为整个表格、单行或单个单元格着色，从而传达不同的含义或视觉强调。

类名描述
.table-primary深蓝（主）
.table-secondary灰色（次）
.table-success绿色（成功）
.table-danger红色（危险）
.table-warning黄色（警告）
.table-info浅蓝（信息）
.table-light浅灰
.table-dark深灰

这些类可以应用于 <table>, <tr>, <td> 或 <th> 元素上。

<tr class="table-success">...</tr>
<td class="table-warning">...</td>

无障碍提示：使用颜色添加含义仅提供视觉指示，不会自动传达给使用辅助技术的用户。请确保内容本身的含义是显而易见的（例如，使用足够颜色对比的文本），或通过其他方式（如使用 .visually-hidden 类隐藏的附加文本）来传达。

表格修饰

Bootstrap 提供了多种修饰类来增强表格的视觉效果和交互性：

修饰类描述
.table-striped在 <tbody> 内的行上添加斑马条纹（交替的背景色）。
.table-striped-columns为表格的列添加斑马条纹（交替的列背景色）。
.table-hover在 <tbody> 内的行上启用悬停效果（鼠标悬停时高亮）。
.table-active通过 .table-active 类为表格行或单元格添加激活状态的高亮。
.table-bordered为所有表格单元格添加边框。
.table-borderless移除所有边框。
.table-sm通过减少内边距来创建更紧凑的表格。

这些修饰类可以与表格变体类结合使用：

<table class="table table-dark table-striped table-hover">...</table>
<table class="table table-success table-striped-columns">...</table>

5. Figures：图文关联的展示

Bootstrap 的 Figure 组件是一个用于展示相关联的图片和文本内容的语义化容器，特别适用于带标题的图片、图表或插图等场景。

基本用法

使用 <figure> 元素并添加 .figure 类。内部使用：

  • .figure-img：用于 <img> 标签，确保图片与标题样式协调。
  • .figure-caption：用于 <figcaption> 标签，为图片添加标题。
<figure class="figure">
  <img src="path/to/image.jpg" class="figure-img img-fluid rounded" alt="描述性文本">
  <figcaption class="figure-caption">这是一张图片的标题说明。</figcaption>
</figure>

注意：为确保图像是响应式的，务必在 <img> 标签上添加 .img-fluid 类。

标题对齐

使用 Bootstrap 的文本工具类（如 .text-center 或 .text-end）可以轻松调整标题的对齐方式。

<figcaption class="figure-caption text-center">一个居中对齐的标题。</figcaption>
<figcaption class="figure-caption text-end">一个右对齐的标题。</figcaption>

Bootstrap 5.3 的内容部分提供了一套强大、灵活且易于使用的工具，用于构建现代、清晰且响应式的网页内容。

  • Reboot 提供了一个一致、现代的基准样式起点，解决了浏览器默认样式的不一致性。
  • Typography 工具让文本排版变得简单而高效，确保了内容的可读性和视觉层次。
  • Images 相关类轻松解决了响应式图像和常见样式的需求。
  • Tables 的多种变体和修饰类让数据展示既美观又功能丰富。
  • Figures 组件为图文关联展示提供了语义化的解决方案。

通过理解和灵活运用这些样式和组件，并结合 Bootstrap 强大的工具类（Utility API），您可以快速构建出既专业又美观的用户界面，同时保持代码的简洁和维护性。

声明：此栏目页面的正文内容并非源自Bootstrap v5.3官方网站，而是通过Deepseek总结及人工编辑。关于Bootstrap v5.3官方网站内容的翻译请查看详情页面。