Bootstrap CSS 概览
使用 Bootstrap 之前，需要了解它背后几条关键的 CSS 约定：HTML5 文档类型、移动优先的视口设置，以及全局容器（container）。掌握这些，页面的「地基」才算打对，否则样式可能完全错乱。
HTML5 文档类型与基础结构
Bootstrap 要求页面使用 HTML5 的 <!DOCTYPE html>，否则部分样式在 IE 等老浏览器中会表现异常。标准骨架如下：
<!-- Bootstrap 基础骨架：doctype、视口、CDN 三件套缺一不可 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容写在这里 -->
</body>
</html>
显示效果：此时页面暂无可见内容，但已具备 Bootstrap 的全局样式（字体栈、默认颜色、统一盒模型等）。
移动优先与 viewport
<meta name="viewport" content="width=device-width, initial-scale=1"> 让页面宽度跟随设备屏幕，而不是按桌面宽度缩放，这是**移动优先（Mobile First）**的基础：Bootstrap 的样式默认面向小屏，再在更大的断点上逐步增强。
容器：container 与 container-fluid
Bootstrap 的内容通常放在容器里。.container 在固定宽度与全宽之间按断点切换；.container-fluid 始终占满父级宽度；还可用 .container-md 表示「达到 md 断点前全宽，之后固定宽度」。
<!-- 三种容器对比 -->
<div class="container bg-info">固定宽度容器，居中显示</div>
<div class="container-fluid bg-warning">全宽容器，占满屏幕</div>
<div class="container-md bg-success">md 断点以上才固定宽度</div>
显示效果：三条带背景色的横条依次排列，第一条左右留白居中，第二条贴满屏幕，第三条在中等屏幕以上与第一条同宽。给容器临时加 bg-* 颜色类即可直观看到边界。
常用的基础 CSS 类
Bootstrap 还内置大量原子类：.bg-primary、.text-white、.rounded、.shadow、.border 等，直接组合即可完成配色与圆角，无需写自定义 CSS：
<!-- 用类组合代替手写样式 -->
<div class="bg-dark text-white rounded p-3 shadow-sm">
深色圆角卡片，带内边距和浅阴影
</div>
显示效果：出现一块深灰底、白字、圆角的区块，四周有 1rem 内边距与细微阴影，像一张简易卡片。
小结
Bootstrap 的 CSS 概览可归纳为三件事：写对 HTML5 骨架、保留 viewport 标签、把内容放进容器。之后所有组件与栅格都建立在这套基础之上。