Bootstrap 5学习教程，从入门到精通，Bootstrap 5 安装及使用（2）
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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>我的第一个 Bootstrap 页面title>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
2. 使用 npm 安装（适合 Node.js 项目）
npm install [email protected]
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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 5a>
<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 5h1>
<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: [email protected]li>
<li>Phone: (123) 456-7890li>
ul>
div>
div>
<hr>
<p class="text-center mb-0">© 2025 Bootstrap 5 示例. 保留所有权利.p>
div>
footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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. 常用组件
- 按钮：
- 卡片：...
- 导航栏：
- 表单控件：
- 警告框：...
- 模态框：...
六、进阶使用
1. 自定义 Bootstrap
你可以通过覆盖 Sass 变量来自定义 Bootstrap：
// 自定义主颜色
$primary: #ff5722;
// 引入 Bootstrap
@import "bootstrap/scss/bootstrap";
2. 使用 Bootstrap Icons
Bootstrap 提供了自己的图标库：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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
})
七、学习资源
- Bootstrap 5 官方文档
- Bootstrap 5 示例
- Bootstrap Icons
- Bootstrap 5 中文文档