Bootstrap5入门

Bootstrap 5 入门教程

目录

1. Bootstrap 简介
2. 环境配置
3. 布局与网格系统
4. 常用组件
5. 工具类与工具函数
6. 定制化与主题
7. 项目实战示例

---

1. Bootstrap 简介

• 什么是 Bootstrap？
  • 开源前端框架，用于快速构建响应式网页。
  • 基于 HTML、CSS、JavaScript。
• Bootstrap 5 新特性
  • 移除 jQuery，依赖原生 JavaScript。
  • 新增实用工具类（Utilities）。
  • 改进网格系统（如新的 xxl 断点）。
  • 图标库更新为 Bootstrap Icons。

---

2. 环境配置

2.1 快速入门

• CDN 引入（推荐新手）

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• 本地安装（适用于正式项目）

  npm install bootstrap@5
  

2.2 开发工具

• 浏览器开发者工具（调试响应式布局）。
• VS Code + Live Server 插件。

---

3. 布局与网格系统

3.1 响应式断点

断点代号	屏幕宽度
xs	<576px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px (新增)

3.2 网格布局示例

<div class="container">
  <div class="row">
    <div class="col-md-4">左侧栏（中屏及以上占4列）</div>
    <div class="col-md-8">主内容区（中屏及以上占8列）</div>
  </div>
</div>

3.3 常用布局类

• .container / .container-fluid（流式全宽容器）。
• .row（行）与 .col（列）。
• 偏移（.offset-md-3）、间距（g-*）。

---

4. 常用组件

4.1 导航栏（Navbar）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</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>
      </ul>
    </div>
  </div>
</nav>

4.2 卡片（Card）

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容示例</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

4.3 其他组件

• 按钮（.btn、.btn-primary）。
• 表单控件（输入框、下拉菜单、验证状态）。
• 模态框（Modal）、轮播图（Carousel）。

---

5. 工具类与工具函数

5.1 常用工具类

• 间距工具：mt-3（margin-top）、p-4（padding-all）。
• 文本对齐：text-center、text-md-end。
• 颜色与背景：text-danger、bg-dark。

5.2 响应式工具

• 显示/隐藏元素：d-none、d-md-block。
• 浮动：float-start、float-lg-end。

---

6. 定制化与主题

6.1 修改默认变量

// 自定义 _variables.scss
$primary: #2c3e50;
$enable-rounded: false;

// 引入 Bootstrap
@import "bootstrap/scss/bootstrap";

6.2 使用 Bootstrap Icons

<i class="bi bi-heart-fill"></i>

---

7. 项目实战示例

7.1 响应式企业官网

• 使用导航栏、轮播图、卡片布局。
• 适配移动端与桌面端。

7.2 后台管理系统

• 侧边栏折叠、表格组件、表单验证。

---

资源推荐

• Bootstrap 5 官方文档
• Bootstrap Icons
• 优极限原博客地址

---