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

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

news 2025/6/7 5:55:58

一、文件结构

Bootstrap 4 的文件结构与 Bootstrap 3 相比有显著变化，主要区别在于从 Less 迁移到 Sass，以及图标系统的改变：

bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.min.css
│   │   ├── bootstrap-reboot.css
│   │   └── bootstrap-reboot.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-reboot.css：标准化样式重置
    • .min.css 为对应的压缩版本

  2. ​​JS 文件​​：

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

  3. ​​图标系统​​：

    • Bootstrap 4 不再内置 Glyphicons
    • 推荐使用 Font Awesome 或其他图标库

二、基本 API 使用

1. 引入 Bootstrap 4

<!DOCTYPE html>
<html>
<head><title>Bootstrap 4</title><!-- 引入 Bootstrap CSS --><link rel="stylesheet" href="path/to/bootstrap.min.css"><!-- 可选：引入 Font Awesome 图标 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body><!-- 页面内容 --><!-- 引入依赖 --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script><script src="path/to/bootstrap.min.js"></script><!-- 或者使用 bundle 版本（包含 Popper.js） --><!-- <script src="path/to/bootstrap.bundle.min.js"></script> -->
</body>
</html>

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

1. 导航栏 (Navbar)

<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div>
</nav>

2. 卡片 (Card) - 替代 Bootstrap 3 的面板(Panel)

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

3. 模态框 (Modal) - 更新语法

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal
</button><!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>

4. 轮播 (Carousel) - 更新语法

<div id="carouselExampleControls" class="carousel slide" data-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><a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

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

1. 初始化插件

// 工具提示
$('[data-toggle="tooltip"]').tooltip();// 弹出框
$('[data-toggle="popover"]').popover();// 模态框
$('#myModal').modal({backdrop: 'static', // 点击背景不关闭keyboard: false     // 按ESC不关闭
});

2. 事件监听

// 模态框事件
$('#myModal').on('show.bs.modal', function (e) {// 在模态框显示前触发
});// 标签页切换事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {console.log(e.target); // 新激活的标签页console.log(e.relatedTarget); // 之前激活的标签页
});// 轮播事件
$('#myCarousel').on('slide.bs.carousel', function (e) {console.log('滑动开始', e.direction);
});

3. 方法调用

// 模态框方法
$('#myModal').modal('show'); // 显示
$('#myModal').modal('hide'); // 隐藏
$('#myModal').modal('toggle'); // 切换
$('#myModal').modal('handleUpdate'); // 重新计算位置// 标签页方法
$('#myTab a[href="#profile"]').tab('show');// 工具提示方法
$('#element').tooltip('show');
$('#element').tooltip('hide');
$('#element').tooltip('toggle');
$('#element').tooltip('dispose');

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

1. 间距工具

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

2. 边框工具

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

3. 颜色工具

<p class="text-primary bg-dark">蓝色文本，深色背景</p>

4. Flexbox 工具

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

六、自定义 Bootstrap 4

1. 使用 Sass 变量

// 修改主色调
$primary: #0074d9;
$danger: #ff4136;// 修改字体
$font-family-sans-serif: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;// 修改网格断点
$grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px
);// 导入 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 4 与 3 的主要区别

  1. ​​从 Less 迁移到 Sass​​
  2. ​​Flexbox 优先的网格系统​​
  3. ​​卡片组件替代面板和缩略图​​
  4. ​​不再内置 Glyphicons​​
  5. ​​重写的表单控件​​
  6. ​​新的间距工具类​​
  7. ​​重做的工具提示和弹出框（使用 Popper.js）​​
  8. ​​新的浏览器支持策略（放弃 IE9 和 iOS 6）​​

八、常见问题解决

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

    • 确保加载顺序正确：jQuery → Popper.js → Bootstrap JS
    • 检查控制台是否有错误

  2. ​​布局问题​​：

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

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

    • 确保已引入图标库（如 Font Awesome）
    • 检查网络连接是否正常

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

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

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

    • 对于 IE10/11，需要额外的 polyfill
    • 考虑使用 bootstrap-ie11 等兼容包

Bootstrap 4 提供了更现代的布局方式和更强大的自定义能力，是构建响应式网站的强大工具。如需最新特性，可以考虑升级到 Bootstrap 5。

http://www.xdnf.cn/news/901999.html

相关文章：

  • 前端事件循环深度解析
  • 北京大学肖臻老师《区块链技术与应用》公开课：12-BTC-比特币的匿名性
  • LeetCode 热题 100 34. 在排序数组中查找元素的第一个和最后一个位置
  • vscode .husky/pre-commit: line 4: npx: command not found
  • 3 个优质的终端 GitHub 开源工具
  • 408第一季 - 数据结构 - 栈与队列的应用
  • 数的计算，C++实现
  • Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
  • Spring Boot + Prometheus 实现应用监控（基于 Actuator 和 Micrometer）
  • 《C语言·源初法典》---C语言基础（上）
  • DAY45 可视化
  • 实践指南：从零开始搭建RAG驱动的智能问答系统
  • Vue在线预览excel、word、ppt等格式数据。
  • 【递归、搜索与回溯】综合练习（四）
  • 鼠标的拖动效果
  • 麒麟v10系统的docker重大问题解决-不支持容器名称解析
  • 【Bluedroid】蓝牙启动之 SMP_Init 源码解析
  • 提升模型泛化能力：PyTorch的L1、L2、ElasticNet正则化技术深度解析与代码实现
  • MongoDB慢查询临时开启方法讲解
  • elasticsearch基本操作笔记
  • 数据库优化秘籍：解锁性能提升的 “潘多拉魔盒”
  • vue3前端实现导出Excel功能
  • 【设计模式-5】设计模式的总结
  • golang入门
  • SSIM、PSNR、LPIPS、MUSIQ、NRQM、NIQE 六个图像质量评估指标
  • 程序代码篇---智能家居传感器
  • C++.OpenGL （5/64）变换（Transformation）
  • Prompt Engineering Notes
  • GIT(AI回答)
  • K8S认证|CKS题库+答案| 3. 默认网络策略