一、利用网格系统搭建响应式布局
Bootstrap 的 12 列网格系统是其核心特性，通过 .container、.row 和 .col-* 类快速实现多设备适配布局。例如，col-md-6 表示在中等屏幕下元素占 50% 宽度。
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- 内容块 -->
</div>
</div>
</div>
二、通过 CDN 快速引入框架
直接在 HTML 文件中添加 Bootstrap 的 CDN 链接，无需本地安装即可使用完整功能，适合快速原型开发。
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
三、图片自适应容器宽度
为 <img> 标签添加 .img-fluid 类（旧版本为 .img-responsive），确保图片自动缩放并适配父容器，防止溢出变形。
<img src="image.jpg" class="img-fluid" alt="响应式图片">
四、使用预定义样式类快速美化元素
Bootstrap 提供了丰富的预定义类，如按钮样式 .btn、文字居中 .text-center 和颜色类 .bg-primary，可直接应用以提升开发效率。
<button class="btn btn-success">提交</button>
<p class="text-center text-muted">居中的灰色文字</p>
五、通过 Sass 变量自定义主题
利用 Bootstrap 的 Sass 源码修改变量（如主色调 $primary、字体 $font-family-base），生成个性化样式文件，实现品牌化设计。
// 自定义变量
$primary: #2A9D8F;
$font-family-base: 'Helvetica Neue', sans-serif;
// 引入 Bootstrap 源码
@import 'bootstrap/scss/bootstrap';
以上技巧覆盖了布局构建、框架引入、组件优化及定制化需求，能显著提升 Bootstrap 开发效率与页面表现力。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。