持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

Bootstrap是目前世界上最受欢迎的前端开发的组件库，在全球的前端开发者中非常的盛行。这就说明了Bootstrap已经是前端开发者必须要学会的技能了，这篇文章将带你开启对Bootstarp5的了解，希望大家会喜欢。

Bootstrap5简介

Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。Bootstrap5相比于之前的版本增加了非常多优秀、便捷的功能在其中。

下面就是Bootstrap5中文官网的图片。

微信截图_20221014230839.png

引入Bootstrap5

bootstrap5的引入方式有两种，一种是直接将bootstrap文件下载到本地，然后引用本地的bootstrap文件。另一种方式就是使用cnd的方式引入，不过这种方式是需要联网的。

下载方式引入

我们在bootstrap5中文官网点击‘下载Bootstrap’按钮，下载之后有个压缩包，我们解压即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello Bootstrap5</h1>
    <script src="bootstrap-5.1.3-dist//js/bootstrap.bundle.min.js"></script>
</body>
</html>

打开页面

微信截图_20221015000426.png 我们这里能显示出Hello Bootstrap5，但是我们不知道是否成功引入了bootstrap5。验证是否成功引入其实很简单我们添加一个按钮并给它的class属性赋值为btn btn-primary，然后看看该按钮是否具有bootstarp5的一个样式即可判断。

在body中添加按钮

<button class="btn btn-primary">按钮</button>

打开页面

微信截图_20221015000850.png 这时候我们能看到按钮具有一个样式，所以我们已经成功的引入了bootstra5。

cdn引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello Bootstrap5</h1>
    <button class="btn btn-primary">按钮</button>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

cdn的引入方式则更加的便捷，无需我们去下载bootstrap的一些文件，直接引入文件地址即可。同样的，当我们打开页面时也能看到具有样式的按钮，所以使用这种方式我们也能够成功的引入bootstrap5。

总结

这篇文章主要带大家了解并引入bootstarp5，在下一篇文章中，我会介绍bootstarp5的网格系统。希望喜欢的小伙伴们多多支持。

Bootstrap5简介与引入

前言

Bootstrap5简介

引入Bootstrap5

下载方式引入

cdn引入

总结