当前位置：首页 > ai >正文

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 安装及使用（2）

ai 2025/7/16 7:05:53

Bootstrap 5 安装及使用

一、Bootstrap 5 简介

Bootstrap 是一个开源的前端框架，用于快速开发响应式、移动优先的网站。Bootstrap 5 是 Bootstrap 的最新主要版本，它不再依赖 jQuery，并提供了许多改进和新功能。

二、安装 Bootstrap 5

1. 使用 CDN 引入（最简单的方式）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><title>我的第一个 Bootstrap 页面</title>
</head>
<body><!-- 页面内容将放在这里 --><!-- Bootstrap 5 JS 包（包含 Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 使用 npm 安装（适合 Node.js 项目）

npm install bootstrap@5.3.0

3. 下载源码

可以从 Bootstrap 官网下载编译好的 CSS 和 JS 文件。

三、开发工具推荐

Visual Studio Code (推荐)
- 轻量级、免费、开源
- 丰富的扩展（如 Live Server、Bootstrap 5 Snippets 等）
WebStorm
- 功能强大但收费
- 对前端开发有很好的支持
Sublime Text
- 轻量快速
- 需要安装插件来增强功能
浏览器开发者工具
- Chrome DevTools
- Firefox Developer Edition

四、创建第一个 Bootstrap 5 页面

下面是一个完整的 Bootstrap 5 页面示例，包含常见组件和功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><title>我的第一个 Bootstrap 5 页面</title><style>/* 自定义样式可以写在这里 */.custom-bg {background-color: #f8f9fa;}.feature-icon {width: 4rem;height: 4rem;border-radius: .75rem;}</style>
</head>
<body><!-- 导航栏 --><nav class="navbar navbar-expand-lg navbar-dark bg-primary"><div class="container"><a class="navbar-brand" href="#">Bootstrap 5</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">功能</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li></ul></div></div></nav><!-- 主内容区 --><main class="container my-5"><!-- 英雄区域 --><div class="p-5 mb-4 bg-light rounded-3"><div class="container-fluid py-5"><h1 class="display-5 fw-bold">欢迎来到 Bootstrap 5</h1><p class="col-md-8 fs-4">使用一系列实用工具类快速设计和自定义响应式移动优先网站。</p><button class="btn btn-primary btn-lg" type="button">了解更多</button></div></div><!-- 特性卡片 --><div class="row align-items-md-stretch mb-4"><div class="col-md-6"><div class="h-100 p-5 text-white bg-dark rounded-3"><h2>响应式设计</h2><p>Bootstrap 的响应式 CSS 能够适应手机、平板和桌面。</p><button class="btn btn-outline-light" type="button">示例</button></div></div><div class="col-md-6"><div class="h-100 p-5 bg-light border rounded-3"><h2>组件丰富</h2><p>包含大量可复用的组件，如按钮、导航、卡片等。</p><button class="btn btn-outline-secondary" type="button">示例</button></div></div></div><!-- 特性列表 --><div class="row g-4 py-5 row-cols-1 row-cols-lg-3"><div class="col d-flex align-items-start"><div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 feature-icon"><svg class="bi" width="1em" height="1em"><use xlink:href="#grid"/></svg></div><div><h3 class="fs-2">网格系统</h3><p>Bootstrap 的12列响应式网格系统让布局变得简单。</p><a href="#" class="btn btn-primary">了解更多</a></div></div><div class="col d-flex align-items-start"><div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 feature-icon"><svg class="bi" width="1em" height="1em"><use xlink:href="#speedometer2"/></svg></div><div><h3 class="fs-2">实用工具</h3><p>大量实用工具类可以快速设置边距、填充等样式。</p><a href="#" class="btn btn-primary">了解更多</a></div></div><div class="col d-flex align-items-start"><div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 feature-icon"><svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg></div><div><h3 class="fs-2">组件</h3><p>按钮、卡片、导航栏等组件可以直接使用。</p><a href="#" class="btn btn-primary">了解更多</a></div></div></div><!-- 表单示例 --><div class="row mb-5"><div class="col-md-6 mx-auto"><h2 class="text-center mb-4">联系我们</h2><form><div class="mb-3"><label for="name" class="form-label">姓名</label><input type="text" class="form-control" id="name" required></div><div class="mb-3"><label for="email" class="form-label">邮箱</label><input type="email" class="form-control" id="email" required></div><div class="mb-3"><label for="message" class="form-label">留言</label><textarea class="form-control" id="message" rows="3" required></textarea></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="subscribe"><label class="form-check-label" for="subscribe">订阅新闻</label></div><button type="submit" class="btn btn-primary">提交</button></form></div></div></main><!-- 页脚 --><footer class="bg-dark text-white py-4"><div class="container"><div class="row"><div class="col-md-4"><h5>关于我们</h5><p>学习使用 Bootstrap 5 创建现代化响应式网站。</p></div><div class="col-md-4"><h5>快速链接</h5><ul class="list-unstyled"><li><a href="#" class="text-white">首页</a></li><li><a href="#" class="text-white">文档</a></li><li><a href="#" class="text-white">示例</a></li></ul></div><div class="col-md-4"><h5>联系我们</h5><ul class="list-unstyled"><li>Email: info@example.com</li><li>Phone: (123) 456-7890</li></ul></div></div><hr><p class="text-center mb-0">&copy; 2025 Bootstrap 5 示例. 保留所有权利.</p></div></footer><!-- Bootstrap 5 JS 包（包含 Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

五、Bootstrap 5 核心概念

1. 响应式断点

Bootstrap 5 使用以下媒体查询断点：

xs (<576px) - 超小设备 (默认)
sm (≥576px) - 小设备
md (≥768px) - 中等设备
lg (≥992px) - 大设备
xl (≥1200px) - 超大设备
xxl (≥1400px) - 超超大设备

2. 网格系统

Bootstrap 的网格系统使用容器、行和列来布局和对齐内容。

<div class="container"><div class="row"><div class="col-sm-8">主要内容 (8列)</div><div class="col-sm-4">侧边栏 (4列)</div></div>
</div>

3. 实用工具类

Bootstrap 提供了大量的实用工具类：

边距和填充：m-*, p-* (如 mt-3, pb-4)
文本：text-center, text-primary, fw-bold
背景：bg-primary, bg-light
边框：border, border-top, border-primary
显示：d-none, d-block, d-flex
弹性盒子：justify-content-center, align-items-end

4. 常用组件

按钮：<button class="btn btn-primary">Primary</button>
卡片：<div class="card">...</div>
导航栏：<nav class="navbar navbar-expand-lg navbar-light bg-light">...</nav>
表单控件：<input class="form-control" type="text">
警告框：<div class="alert alert-success">...</div>
模态框：<div class="modal">...</div>

六、进阶使用

1. 自定义 Bootstrap

你可以通过覆盖 Sass 变量来自定义 Bootstrap：

// 自定义主颜色
$primary: #ff5722;// 引入 Bootstrap
@import "bootstrap/scss/bootstrap";

2. 使用 Bootstrap Icons

Bootstrap 提供了自己的图标库：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"><i class="bi bi-heart"></i>

3. 使用 Bootstrap JavaScript 组件

Bootstrap 5 的 JavaScript 组件现在使用纯 JavaScript 而不是 jQuery：

// 初始化工具提示
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})// 模态框示例
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {keyboard: false
})