前端框架 —— bootstrap介绍
bootstrap安装
我们可以通过官网下载bootstrap的代码到本地，也可以通过CDN分发网络引入我们的html文件。
下载到本地
下载压缩包后我们分别打开css文件夹和js文件夹，会发现有很多文件。
而实际上只有蓝色边框的两个文件是核心文件，其他文件可以删除。
然后我们一般选择min.js后缀的js文件和min.css后缀的css文件，因为它们更小一点，可以略微提升加载速度。
将其放在html文件的同一文件夹下，方便我们导入测试：
<!--在head中引入css文件和js文件--->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.bundle.min.js"></script>
导入后，我们可以通过类属性给我们的标签导入bootstrap给我们提供好的样式，可以很快的帮我们搭建起一个比较好看的网站。
cdn分发网络导入
进入页面后复制其最新的link链接和script链接，就可以使用它们的文件基于网络加载到页面中了。
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
官方入门模板
请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>
<!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
-->
</body>
</html>
bootstrap的使用
关于使用，bootstrap官网都有详细的说明，请读者自行查阅。
