Bootstrap组件

<!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，快速编写功能完善的网页及常见交互效果

中文官网：https://www.bootcss.com/

看文档复制代码-->

<!-- 使用步骤

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>