Bootstrap 入门

Bootstrap 5 入门

什么是 Bootstrap？

Bootstrap 是一个功能强大、免费且开源的前端框架（front-end framework），用于更快、更轻松地进行 Web 开发。
它包含基于 HTML、CSS 和 JavaScript 的设计模板，用于排版（typography）、表单（forms）、按钮（buttons）、表格（tables）、导航（navigation）、模态框（modals）、图片轮播（image carousels）以及许多其他组件（components）。
Bootstrap 使您能够轻松创建响应式（responsive）、移动优先（mobile-first）的网站和 Web 应用，这些网站和应用在从小型手机到大型桌面电脑的所有设备上都能呈现出色的外观。
Bootstrap 5 是最新的主要版本，它移除了 jQuery 依赖，增强了网格系统（grid system），更新了表单控件，扩展了实用类（utility classes），并引入了对 CSS 自定义属性（CSS Variables）的支持。

什么是响应式 Web 设计？响应式 Web 设计是一种 Web 设计方法，使网页能够在各种设备和窗口或屏幕尺寸上良好呈现。内容、设计和性能需要在所有设备上保持一致，以确保可用性和用户满意度。

Bootstrap 历史

Bootstrap 最初由 Twitter 的 Mark Otto 和 Jacob Thornton 创建。它于 2011 年 8 月作为开源项目在 GitHub 上发布。它迅速成为最受欢迎的前端框架之一，并持续在社区支持和贡献下发展。Bootstrap 5 是一个重要的里程碑，它现代化了其架构和依赖项。

为什么使用 Bootstrap 5？

使用 Bootstrap 5 的主要优势：

易于使用：任何具有基本 HTML、CSS 和（可选的）JavaScript 知识的人都可以快速开始使用 Bootstrap。
响应式特性：Bootstrap 的响应式 CSS（基于移动优先方法构建）能够无缝地调整布局，使其适应手机、平板电脑和桌面电脑。
移动优先方法：框架从根本上为移动设备设计样式，确保在小屏幕上的最佳性能和显示效果。
无 jQuery 依赖：Bootstrap 5 的 JavaScript 组件使用原生 JavaScript 编写，减少了包体积，并移除了一个常见的依赖项。
丰富的组件：范围广泛的预设样式组件（如导航栏 navbars、卡片 cards、模态框 modals 等）加速开发。
强大的网格系统：基于 Flexbox 构建的灵活的 12 列网格系统，允许创建复杂且响应式的布局。
实用类 API：一套全面的实用类集合，用于处理间距（spacing）、排版（typography）、颜色（colors）、显示（display）等，无需编写自定义 CSS 即可实现快速原型设计和定制。
可定制：可以使用 Sass 变量或 CSS 自定义属性轻松定制。
浏览器兼容性：Bootstrap 5 支持所有现代浏览器（Chrome、Firefox、Safari、Edge、Opera）。已放弃对 Internet Explorer 的支持。

在哪里获取 Bootstrap 5

有两种主要方式开始在您的网站上使用 Bootstrap 5：

下载 Bootstrap：从官方网站 getbootstrap.com 获取编译好的 CSS 和 JS 文件（或源 Sass/JS 文件）。
使用 CDN：从内容分发网络（CDN）引入 Bootstrap，以获得更快的加载速度和更简单的设置。

下载 Bootstrap

如果您倾向于自己托管 Bootstrap 文件，请访问 getbootstrap.com 并下载最新版本。如果您打算使用 Sass 定制 Bootstrap，可以选择下载编译文件或源文件。

Bootstrap CDN

使用 CDN 通常是开始使用的最快方法。它还提供了潜在的性能优势，因为用户可能已经从访问其他网站时缓存了这些文件。流行的 CDN（如 jsDelivr 或 cdnjs）托管着 Bootstrap 文件。

在您的 HTML 中包含 Bootstrap 的 CSS 和 JavaScript 包（其中包括用于下拉菜单 dropdowns、工具提示 tooltips 和弹出框 popovers 的 Popper.js）：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

注意：integrity 和 crossorigin 属性在使用 CDN 时是重要的安全特性。

使用 Bootstrap 5 创建您的第一个网页

添加 HTML5 文档类型声明（Doctype）

Bootstrap 5 要求使用 HTML5 文档类型声明（doctype），以便其 HTML 元素和 CSS 属性能够正常工作。您的 HTML 文档应始终以此开始：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Other head elements -->
</head>
<body>
  <!-- Page content -->
</body>
</html>

为响应性设置视口（Viewport）

Bootstrap 5 被设计为响应式和移动优先的。为了确保在所有设备上正确渲染和触控缩放，请在 <head> 元素内添加响应式视口 <meta> 标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度。initial-scale=1 部分设置了浏览器初次加载页面时的初始缩放级别。

使用容器（Containers）

Bootstrap 需要一个包含元素来包裹网站内容。主要有两种容器类：

.container：提供一个响应式的固定宽度容器。其 max-width 会在每个断点（breakpoint）改变。
.container-fluid：提供一个全宽度的容器，始终跨越整个视口（viewport）宽度。
响应式容器（例如 .container-sm、.container-md）：这些容器在达到指定断点之前是 100% 宽度，之后则像 .container 一样表现。

注意：容器通常不应嵌套。您通常不会在一个容器内部再放置另一个容器。

基本的 Bootstrap 5 页面示例

固定宽度容器示例 (.container)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Fixed Container Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-3">
    <h1>My First Bootstrap 5 Page</h1>
    <p>This page uses a responsive fixed-width container.</p>
    <p>Resize the browser window to see how the container's width changes at different breakpoints.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

全宽度容器示例 (.container-fluid)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Fluid Container Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container-fluid mt-3">
    <h1>My First Bootstrap 5 Page (Fluid)</h1>
    <p>This page uses a full-width container, always spanning the viewport width.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

应用场景：营销网站可能使用 .container 来限制主要内容的宽度，以防止在大屏幕上文本行过长，从而提高可读性。而管理仪表盘则可能使用 .container-fluid 来利用整个屏幕宽度显示数据表格和图表。

常见陷阱：忘记包含视口（viewport）meta 标签。如果没有它，您的响应式设计可能无法在移动设备上按预期工作，通常会显得缩小。