1.前言
如果不了解Bootstrap或者想快速入门Bootstrap的小伙伴可以点击下方链接进行学习（转自B站黑马视频）
189-Bootstrap-体验_哔哩哔哩_bilibili
想详细深入了解学习的话可以去菜鸟教程，链接如下：
以下内容是我自己对Bootstrap的理解以及使用方法，希望可以帮助大家！
2.Bootstrap引用方法
(1)Bootstrap5的中文官网
Bootstrap 入门 · ootstrap v5 中文文档 v5.3 | Bootstrap 中文网
(2)引用方法一：下载包文件
进入后，点击左边导航栏的下载，有两种下载文件，我们开发下载上边的文件就行，如对源码感兴趣可以选择下载下边的文件。
文章末尾，我会分享我已经下载好的Bootstrap开发使用到的包文件，包含字体图标、CSS和JS文件，开发直接引用即可。
上边文件包下载好后得到一个压缩包，里边包含了CSS文件夹和JS文件夹解压，开发时只需要
引用 bootstrap.min.css和bootstrap.min.js 这两个文件即可。
(3)引用方法二(推荐)：在线使用
CSS引入
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">JS引入
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>3.Bootstrap使用示例
其实Bootstrap使用起来特别简单，只需要去Bootstrap5的官网找到你想要实现的效果，然后把对应的代码粘贴到你的项目中就可实现css和JS的精美效果。
就拿按钮（css)和轮播图(JS)来举例：
（1）按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap使用</title>
<!-- 引入bootstrap的css文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(218, 192, 255);
padding-top: 15rem;
margin-left: 400px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</body>
</html>效果图如下：
是不是很简单就引入精美的按钮样式。
（2）轮播图
轮播图的实现效果也一样，首先在侧边栏中找到Carousel,找到一个自己喜欢的轮播图样式，复制粘贴官网提供的代码，然后引用到自己的项目中，除此之外，还要引入JS文件和CSS文件（上边有）。我以下面这种样式为例实现简单的轮播图并加以修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap使用</title>
<!-- 引入bootstrap的css文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(218, 192, 255);
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<!-- 多添加了几张就还要添加按钮 -->
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
</div>
<!-- 多添加一张轮播图 -->
<div class="carousel-item">
<img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</html>对原版的样式进行二次加工修改 。比如在原先的基础上，把三张图片变为四张图片，就要添加一个div和button按钮，如下所示：
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<!-- 多添加一张轮播图 -->
<div class="carousel-item">
<img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
</div>使用Bootstrap开发轮播图就是这么简单高效， 当然也不止这些，还有许多弹窗、表单和表格等都可以引用。
4.字体图标引用方法
下面是官网链接：
Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库
学习链接：（视频来自B站黑马）
194-Bootstrap-字体图标_哔哩哔哩_bilibili
（1）方法一：下载包文件
打开官网链接，点击下方的安装
下载下方这个压缩包就是图标库了
（2）方法二：在线引用链接
(这两个链接都可以)
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
5.字体图标使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标</title>
<!-- 引入字体文件 -->
<!-- <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css"> -->
<!-- 字体图标库的引入关键网站 -->
<!-- <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
/* 2.设置样式 */
.bi-android2 {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<!-- 1.引入所要的图标 -->
<i class="bi-android2"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
<!-- 只要类名带有bi，就可以使用图标 -->
<span class="bi bi-4-circle-fill" style="font-size: 2rem;"></span>
</body>
</html>运行效果：
6.总结
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。
-
基本结构：
- 网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。
- CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。
- JavaScript插件：Bootstrap还集成了大量的JavaScript插件，如轮播、模态框、下拉菜单等，可以实现丰富的交互效果，提升用户体验。
-
常用类：
- 文本：Bootstrap提供了多种文本样式类，如对齐方式（text-left、text-center、text-right等）、文本颜色（text-muted、text-primary等）和背景颜色（bg-muted、bg-primary等）。
- 容器属性：如flex-direction和flex-wrap，用于控制元素在页面中的布局方向。
-
常用组件：
- 导航条：Bootstrap提供了丰富的导航条样式，如默认导航条、固定导航条、内嵌式导航条等。
- 按钮：Bootstrap的按钮样式非常丰富，包括不同的大小、颜色和样式。
- 表单：Bootstrap还包含了许多预设的表单样式和组件。
-
使用方法：
- 栅格系统：通过添加class到HTML元素上，可以很容易地指定元素在不同屏幕宽度下的列数和偏移量。
- CSS组件：只需要在HTML元素上添加相应的class，即可使用Bootstrap的CSS组件。
- JavaScript插件：在HTML文件中引入相应的JavaScript文件，并按照文档中的说明使用即可。
-
响应式布局：Bootstrap的响应式布局使得同一套页面可以兼容不同分辨率的设备。
-
主题定制：Bootstrap提供了多种主题，可以通过覆盖默认变量或修改源码进行个性化定制。此外，还可以使用第三方工具如Bootstrap Studio进行可视化定制。
7.资料分享
链接：https://pan.baidu.com/s/1_KHFWeZJ0h5f2KLWVUUPjg?pwd=as3r
提取码：as3r
文件目录：
引用方法：
<!-- 引入字体图标文件 -->
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<!-- 引入bootstrap的js文件 -->
<script src="./Bootstrap/js/bootstrap.min.js"></script>具体引用的路径还是要根据实际的文件目录进行引用，这里仅提供参考。
第一篇博客文章，有问题欢迎各位指正！
2810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
