<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>bootstrap</title>
<link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist\css\bootstrap.min.css">
<style>
/* div{
height: 50px;
background-color: pink;
} */
</style>
</head>
<body>
<!-- bootstrap是前UI框架，提供大量编写好的CSS样式允许开发者结合一定HTML结构
及JavaScript，快速编写功能完善的网页及常见交互效果
看文档复制代码-->
<!-- 使用步骤
1.引入bootstrap css文件
2.调用类名，如container：响应式布局版心类
-->
<!-- <div class="container">1</div> -->
<!-- bootstrap 栅格系统
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
xs < 576 col-
sm > 576 col-sm-
md > 720 col-md-
lg > 992 col-lg-
xl > 1200 col-xl-
xxl > 1400 col-xxl-
常见布局类
col-*-*:列（例如：col-xxl-3）
row:行
-->
<!-- <div class="container">
视口宽度大于等于1200px,一行排4个盒子
视口宽度大于等于760px，一行2个盒子
<div class="row">
<div class="col-xl-3 col-md-6">1</div>
<div class="col-xl-3 col-md-6">1</div>
<div class="col-xl-3 col-md-6">1</div>
<div class="col-xl-3 col-md-6">1</div>
</div>
</div> -->
<!-- bootstrap 全局样式
button类
bin：默认样式
bin-success:成功
bin-warning:警告
...
按钮尺寸:btn-lg/btn-sm
-->
<button class="btn btn-success">1</button>
<button>2</button>
<!-- 全局样式 表格类
table:默认样式
table-striped:隔行变色
table-success:表格颜色
...
-->
<!-- bootstrap 组件（components）
1.引入样式表
2.引入js文件
3.复制结构，修改内容
-->
<!-- bootstrap 字体图标
下载：导航/Extend:图标库，安装，下载安装包bootstrap-icons-1
使用：
1.复制fonts文件夹到项目目录
2.网页引入bootstrap=icons。css文件
3.调用css类名
bi-图标类名
-->
</body>
</html>