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

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

news 来源：原创 2025/6/7 5:58:07

一、文件结构

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。

相关文章：

  • 如何使用索引和条件批量更改Series数据
  • 交易系统开发：跨境资本的高速通道架构解密
  • HarmonyOS运动开发：如何用mpchart绘制运动配速图表
  • 父组件prop传向子组件的值，被子组件直接v-model绑定 功能不生效
  • 前端实现视频/直播预览
  • 深入理解 Python `asyncio` 的子进程协议（Subprocess Protocol）
  • Java-IO流之压缩与解压缩流详解
  • 阿里联合上海AI Lab提出DMM！多个模型压缩成一个通用T2I模型！可控任意风格生成!
  • Tomcat全方位监控实施方案指南
  • Python内置函数ord()详解
  • 数据库系统学习
  • M3T联邦基础模型用于具身智能：边缘集成的潜力与挑战
  • 8. 线性表的类型定义
  • 面向开发者的提示词工程④——文本推断（Inferring）
  • Qt（part1）Qpushbutton，信号与槽，对象树，自定义信号与槽，lamda表达式。
  • 人员定位系统解决方案
  • 记录一个用了很久的git提交到github和gitee比较方便的方法
  • 基于Javamail的邮件收发系统设计与实现【源码+文档】
  • NLP学习路线图（二十九）：BERT及其变体
  • 三种读写传统xls格式文件开源库libxls、xlslib、BasicExcel的比较
  • 郑州网站建设网站推广/网络营销活动策划方案模板
  • 有没有做租赁的网站/厦门网络关键词排名
  • 深圳做网站建设月薪多少/今天重大新闻头条新闻
  • python不用框架做动态网站/seo外包大型公司
  • 中央人民政府网站克褔单/百度seo搜索排名
  • 足球外围网站怎么做/网络网站推广优化