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

Bootstrap 5 文件结构与 API 使用指南

news 来源：原创 2025/6/7 8:05:47

一、文件结构

Bootstrap 5 的文件结构与 Bootstrap 4 相比有一些重要变化，主要区别在于不再依赖 jQuery，并改进了 JavaScript 插件架构：

bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.min.css
│   │   ├── bootstrap-utilities.css
│   │   └── bootstrap-utilities.min.css
│   └── js/
│       ├── bootstrap.bundle.js
│       ├── bootstrap.bundle.min.js
│       ├── bootstrap.js
│       └── bootstrap.min.js
├── js/
│   └── src/ (所有插件源文件)
└── scss/ (所有 Sass 源文件)

文件说明

  1. ​​CSS 文件​​：

    • bootstrap.css：完整 CSS（包含网格系统、组件和工具类）
    • bootstrap-grid.css：仅包含网格系统
    • bootstrap-utilities.css：仅包含工具类
    • .min.css 为对应的压缩版本

  2. ​​JS 文件​​：

    • bootstrap.js：所有插件（不包含 Popper）
    • bootstrap.bundle.js：包含所有插件和 Popper
    • .min.js 为对应的压缩版本

  3. ​​图标系统​​：

    • Bootstrap 5 不包含内置图标
    • 推荐使用 Bootstrap Icons（需单独引入）

二、基本 API 使用

1. 引入 Bootstrap 5

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5</title><!-- Bootstrap CSS --><link href="path/to/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap Icons (可选) --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
</head>
<body><!-- 页面内容 --><!-- Bootstrap JS Bundle with Popper --><script src="path/to/bootstrap.bundle.min.js"></script>
</body>
</html>

三、主要组件 API（Bootstrap 5 更新）

1. 导航栏 (Navbar) - 更新语法

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><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 dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown">下拉菜单</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">操作</a></li><li><a class="dropdown-item" href="#">另一个操作</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">其他内容</a></li></ul></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="搜索"><button class="btn btn-outline-success" type="submit">搜索</button></form></div></div>
</nav>

2. 卡片 (Card) - 增强功能

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">一些快速示例文本，用于构建卡片的标题和构成卡片内容的大部分。</p><a href="#" class="btn btn-primary">前往某处</a></div>
</div><!-- 卡片组 -->
<div class="card-group"><div class="card">...</div><div class="card">...</div><div class="card">...</div>
</div>

3. 模态框 (Modal) - 更新 API

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">启动演示模态框
</button><!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">模态框标题</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p>模态框正文文本放在这里。</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button></div></div></div>
</div>

4. 轮播 (Carousel) - 增强控制

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
</div>

四、JavaScript API 方法（Bootstrap 5 更新）

1. 初始化插件

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

2. 事件监听

// 模态框事件
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('show.bs.modal', function (event) {// 在模态框显示前触发
})// 标签页切换事件
var tabEls = document.querySelectorAll('a[data-bs-toggle="tab"]')
tabEls.forEach(function(tabEl) {tabEl.addEventListener('shown.bs.tab', function (event) {event.target // 新激活的标签页event.relatedTarget // 之前激活的标签页})
})// 轮播事件
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function (event) {console.log('滑动开始', event.direction)
})

3. 方法调用

// 模态框方法
var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'))
myModal.show() // 显示
myModal.hide() // 隐藏
myModal.toggle() // 切换
myModal.handleUpdate() // 重新计算位置// 标签页方法
var triggerTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
triggerTabList.forEach(function (triggerEl) {var tabTrigger = new bootstrap.Tab(triggerEl)triggerEl.addEventListener('click', function (event) {event.preventDefault()tabTrigger.show()})
})// 工具提示方法
var tooltip = bootstrap.Tooltip.getInstance(document.querySelector('[data-bs-toggle="tooltip"]'))
tooltip.show()
tooltip.hide()
tooltip.toggle()
tooltip.dispose()

五、实用工具类（Bootstrap 5 新增）

1. 间距工具增强

<div class="mt-3 mb-4 ps-5 pe-2">上下左右间距</div>

2. 边框工具增强

<div class="border border-primary border-3 rounded-3">带边框的圆角元素</div>

3. 颜色工具增强

<p class="text-primary bg-dark bg-opacity-75">蓝色文本，75%透明度的深色背景</p>

4. Flexbox 工具增强

<div class="d-flex justify-content-between align-items-center gap-3"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div>
</div>

六、自定义 Bootstrap 5

1. 使用 Sass 变量

// 修改主色调
$primary: #0074d9;
$danger: #ff4136;// 修改字体
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;// 修改网格断点
$grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px,xxl: 1400px
);// 导入 Bootstrap
@import "bootstrap";

2. 选择性引入模块

// 只引入需要的 Bootstrap 模块
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/grid";
@import "bootstrap/buttons";
@import "bootstrap/utilities";

七、Bootstrap 5 与 4 的主要区别

  1. ​​不再依赖 jQuery​​：所有插件使用纯 JavaScript 重写
  2. ​​改进的网格系统​​：新增 xxl 断点 (1400px)
  3. ​​新的实用工具类​​：如 gap、border-{width} 等
  4. ​​表单控件重写​​：更一致的表单样式和验证
  5. ​​文档改进​​：更清晰的文档结构和搜索功能
  6. ​​RTL 支持​​：内置从右到左布局支持
  7. ​​自定义属性​​：使用 CSS 自定义属性实现主题

八、常见问题解决

  1. ​​JavaScript 插件不工作​​：

    • 确保使用 data-bs-* 属性而不是 data-*
    • 检查是否正确引入了 Popper.js（或使用 bundle 版本）

  2. ​​样式问题​​：

    • 确保使用了正确的文档类型 <!DOCTYPE html>
    • 检查是否正确引入了 bootstrap-reboot.css

  3. ​​图标不显示​​：

    • 确保已引入 Bootstrap Icons 或其他图标库
    • 检查网络连接是否正常

  4. ​​响应式问题​​：

    • 确保 viewport meta 标签正确： 
      <meta name="viewport" content="width=device-width, initial-scale=1">

  5. ​​浏览器兼容性问题​​：

    • Bootstrap 5 放弃了对 Internet Explorer 的支持
    • 确保使用现代浏览器（Chrome、Firefox、Edge、Safari 等）

Bootstrap 5 提供了更现代的 Web 开发体验，是构建响应式、移动优先网站的强大工具。

相关文章：

  • 理解非结构化文档：将 Reducto 解析与 Elasticsearch 结合使用
  • LlamaFactory × 多模态RAG × Chat-BI：万字长文探寻RAG进化轨迹，打造卓越专业AI助手
  • 云服务器中容灾模式的主要用途都有哪些？
  • 如何通过外网访问内网服务器？怎么让互联网上连接本地局域网的网址
  • HashMap的底层实现
  • 6个月Python学习计划 Day 16 - 迭代器、生成器表达式、装饰器入门
  • 视觉分析在人员行为属性检测中的应用
  • Python Pandas库超详细教程：从入门到精通实战指南
  • MySQL安装与配置
  • 四叉树在空间结构建模中的应用
  • 全新Xsens Animate版本是迄今为止最大的软件升级，提供更清晰的数据、快捷的工作流程以及从录制开始就更直观的体验
  • 箭头函数和普通函数的区别？
  • C++总复习
  • 【HarmonyOS 5】教育开发实践详解以及详细代码案例
  • WebDB：一款免费高效的数据库开发工具
  • 软件测试python学习
  • 车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇
  • SON.stringify()和JSON.parse()之间的转换
  • 【计算机网络】HTTP
  • BugKu Web渗透之网站被hei（仅仅是ctf题目名称）
  • 手机百度怎么解除禁止访问网站/东莞服务好的营销型网站建设
  • 万网网站备案流程/总排行榜总点击榜总收藏榜
  • 做兼职的国外网站/山东疫情最新消息
  • 潍坊高端网站建设/百度seo价格查询系统
  • dw如何做网站界面/上海百度推广客服电话多少
  • 电脑做网站怎么解析域名/长尾词挖掘工具爱站网