快速学习Bootstrap前端框架
什么是 Bootstrap？
Bootstrap 是一个开源的前端框架，用于快速开发响应式（Responsive）和美观的网页。它包含：
✅ HTML 组件（导航栏、按钮、表单等）
✅ CSS 样式（网格系统、排版、颜色等）
✅ JavaScript 交互（模态框、轮播图、工具提示等）
官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrap 主要特性
1. 响应式设计（Responsive）
• 适配桌面、平板、手机等不同设备
• 使用 Flexbox & Grid 布局
2. 丰富的 UI 组件
• 按钮、表单、表格、导航栏等
3. 基于 CSS & JavaScript
• CSS 组件（颜色、排版、间距）
• JavaScript 插件（模态框、轮播图、警告框）
4. 易用性
• 只需引入 Bootstrap 的 CSS 和 JS，即可快速构建页面
如何使用 Bootstrap？
方法 1：CDN 引入（推荐）
无需下载，直接在 HTML 头部引入：
<!-- Bootstrap 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>方法 2：本地安装
npm install bootstrap然后在 index.html 引入：
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>1. 网格系统（Grid System）
Bootstrap 使用 row + col 布局，基于 12 列栅格系统：
<div class="container">
<div class="row">
<div class="col-md-4">列1</div>
<div class="col-md-4">列2</div>
<div class="col-md-4">列3</div>
</div>
</div>col-md-4 表示：
• md（medium）屏幕 及以上占 4/12 列
• 适配桌面、平板、手机等不同屏幕尺寸
自适应布局
<div class="row">
<div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
<div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
<div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
<div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
</div>不同设备宽度
| 断点 |
col-sm-* |
col-md-* |
col-lg-* |
|---|---|---|---|
| 小屏（≤576px） |
100% 宽度 |
50% |
33.33% |
2. 按钮（Buttons）
Bootstrap 提供多种按钮样式：
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>按钮大小
<button class="btn btn-lg btn-primary">大按钮</button>
<button class="btn btn-sm btn-secondary">小按钮</button>3. 表单（Forms）
<form>
<div class="mb-3">
<label class="form-label">