Bootstrap5的使用进行适配

文章目录

• • 概要
  • 技术名词解释
  • 技术细节
  • 小结

概要

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

从官网 getbootstrap.com 下载 Bootstrap 5。

你可以去官网 Bootstrap · The most popular HTML, CSS, and JS library in the world. 下载 Bootstrap5 资源库。

npm install bootstrap     通过npm 实现
yarn add bootstrap        通过yarn 实现
gem install bootstrap -v 5.1.1 


composer require twbs/bootstrap:5.1.1     通过composer 来实现

国内推荐使用 Staticfile CDN 上的库：

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 
<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

bootstrap.bundle.js （未压缩版）或 bootstrap.bundle.min.js（压缩版） 包含了捆绑的插件如 popper.min.js 及其他依赖脚本，所以我们也可以直接使用以下代码：