组件这章需要引入bootstrop.bundle.js
1、折叠
.collapse
data-bs-toggle="collapse"
data-bs-target="#对应元素id"
<a href="" data-bs-toggle="collapse" data-bs-target="#box">展开收起</a>
<div class="collapse" id="box">
白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
</div>
2、手风琴
.accordion 声明div是一个手风琴容器
.accordion-item 手风琴中每个元素
.accordion-header 元素的头部,一般用来表示一级标题
.accordion-button 头部中的按钮,是一个箭头
.accordion-body 元素的身体,一般用来表示二级标题
<div class="accordion w-25">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#box">服装</button>
</h2>
<div id="box" class="accordion-collapse collapse show">
<div class="accordion-body">上衣</div>
<div class="accordion-body">牛仔裤</div>
<div class="accordion-body">卫衣</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#dq">电器</button>
</h2>
<div id="dq" class="accordion-collapse collapse show">
<div class="accordion-body">电视</div>
<div class="accordion-body">冰箱</div>
<div class="accordion-body">洗衣机</div>
</div>
</div>
</div>
3、 警告框
.alert 警告框的基础样式,必须有
.alert-danger 警告框颜色样式
.alert-dismisssible 做关闭按钮的定位
.data-bs-dismiss="alert" 关闭按钮点击时关闭警告框
<div class="alert alert-danger alert-dismissible">
警告
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>
4、徽章消息99+
.badge
<button class="btn btn-info position-relative mt-3">
消息
<span class="badge bg-danger rounded-pill position-absolute start-100 top-0">99+</span>
</button>
5、面包屑导航(有疑问)
.breakcrumb
.breakcrumb-item
<ul class="breakcrumb">
<li class="breakcrumb-item"><a href="">首页</a></li>
<li class="breakcrumb-item"><a href="">个人中心</a></li>
<li class="breakcrumb-item"><a href="">修改密码</a></li>
</ul>
6、卡片
.card 基础样式必须有
.card-header
.card-body
.card-title
.card-text
.card-link
.card-footer
<div class="card w-25 mx-auto">
<div class="card-header text-center">
一只柴犬
</div>
<img src="./柴犬.jpg" alt="">
<div class="card-body">
<div class="card-title">哈哈哈</div>
<div class="card-text">呵呵呵</div>
<a href="" class="card-link">嘿嘿</a>
</div>
<div class="card-footer">这是尾部</div>
</div>
7.轮播图
.carousel
.carousel-inner 轮播图主区域
.carousel-item 放轮播图片
.carousel-caption 图片说明
.active 激活一张图片
.slide 轮播更顺滑
.carousel-fade 逐渐隐现方式实现轮播
data-bs-ride="carousel" 轮播执行
.data-bs-interval="1000" 轮播时间为1秒
.carousel-indicators 指示点
data-bs-target="#id" 绑定轮播图id
data-bs-slide-to="索引" 指示点绑定的图片索引
.carousel-control-prev 导航上一个
.carousel-control-next 导航下一个
data-bs-slide="prev/next" 上一个/下一个
<div class="w-50 mx-auto carousel slide carousel-fade" data-bs-ride="carousel" id="pic">
<!-- 指示点区域 -->
<ul class="carousel-indicators">
<li data-bs-target="#pic" data-bs-slide-to="0"></li>
<li data-bs-target="#pic" data-bs-slide-to="1"></li>
<li data-bs-target="#pic" data-bs-slide-to="2" class="active"></li>
</ul>
<!-- 轮播区域 -->
<div class="carousel-inner">
<div class="carousel-item" data-bs-interval="1000">
<img src="./images/1.jpg" alt="" class="w-100">
<div class="carousel-caption">
<h6>爆炸头</h6>
</div>
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="./images/2.jpg" alt="" class="w-100">
</div>
<div class="carousel-item active" data-bs-interval="1000">
<img src="./images/3.jpg" alt="" class="w-100">
</div>
</div>
<!-- 导航按钮 -->
<a href="#pic" data-bs-slide="prev" class="carousel-control-prev">←</a>
<a href="#pic" data-bs-slide="next" class="carousel-control-next">→</a>
</div>
8.关闭按钮
.btn-close
.btn-close-white 白色,没有其他颜色,默认黑色
<div class="bg-info">
<button class="btn-close btn-close-white"></button>
</div>
9.下拉列表
.dropdown 下拉基础类
.dropdown-toggle 按钮上下拉箭头
.dropdown-menu 下拉菜单类
.dropdpwn-item 下拉菜单中选项的类
data-bs-target="#下拉菜单id" 属性写在按钮上
data-bs-target="dropdown" 属性写在按钮上
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-bs-target="#dropMenu" data-bs-toggle="dropdown">省份</button>
<div class="dropdown-menu" id="dropMenu">
<div class="dropdown-item">河北</div>
<div class="dropdown-item">河南</div>
<div class="dropdown-item">山东</div>
<div class="dropdown-item">陕西</div>
</div>
</div>
10.列表组
.list-group 基础样式
.list-group-item 列表选项类
.list-group-item-action 鼠标悬浮效果类
.list-group-item-danger 选项颜色类
11.分页
.pagination
.page-item
.page-link
<ul class="pagination justify-content-center">
<li class="page-item"><a href="" class="page-link"><span aria-hidden="true">‹</span></a></li>
<li class="page-item"><a href="" class="page-link">1</a></li>
<li class="page-item"><a href="" class="page-link">2</a></li>
<li class="page-item"><a href="" class="page-link">3</a></li>
<li class="page-item"><a href="" class="page-link"><span aria-hidden="true">»</span></a></li>
</ul>