直接在HTML中引入Bootstrap CDN是最快上手响应式网页的方式，需添加viewport标签、引入bootstrap.bundle.min.js和CSS，并用container-row-col结构布局，配合按钮、导航栏、卡片等组件快速实现响应式效果。
直接在HTML里引入Bootstrap的CDN，是最快上手响应式网页的方式。不用下载、不装工具、写完保存就能跑，适合原型开发和教学练习。
必须加的viewport标签
这是响应式的基础，没它，Bootstrap的栅格和组件在手机上会失效。把它放在
里：<meta name="viewport" content="width=device-width, initial-scale=1">
引入Bootstrap CSS和JS（推荐用bundle版本）
Bootstrap 5起官方推荐使用bootstrap.bundle.min.js，它已内置Popper.js，无需单独引入。把这两行代码分别放到正确位置即可：
- CSS放里：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> - JS放标签前（通常紧贴）：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
用栅格系统快速做响应式布局
Bootstrap默认是12列栅格，靠container→row→col-*三层结构组织内容。比如让两个区块在桌面端并排、手机端堆叠：
立即学习“前端免费学习笔记（深入）”；
<div class="container"><div class="row"><div class="col-md-6">左边</div><div class="col-md-6">右边</div></div></div>-
col-md-6表示：中屏及以上（≥768px）占6列（即一半），小屏自动变成100%宽度
加几个常用组件立刻有样貌
不用写CSS，直接套类名就能出效果。例如：
- 按钮：
<button class="btn btn-primary">主要按钮</button> - 导航栏：
<nav class="navbar navbar-expand-lg bg-body-tertiary">...</nav> - 卡片：
<div class="card"><div class="card-body">内容</div></div>
