Boot——组件（导航和选项卡、分页、卡片、轮播图）

Boot——组件（下）

导航和选项卡

https://v5.bootcss.com/docs/components/navs-tabs/

（1）导航

<ul class="nav"><li class="nav-item"><a href="#" class="nav-link">首页</a></li><li class="nav-item"><a href="#" class="nav-link">学习用品</a></li><li class="nav-item"><a href="#" class="nav-link">私人定制</a></li></ul>

（2）tab面板

.nav控制区外层
.nav-tabs控制区的样式
.nav-link触发按钮每一个的样式
js属性：data-bs-toggle="tab"tab的切换
js属性：data-bs-target="#对应关联展示区的id"
.tab-content展示区的最外层
.tab-pane消失，对应显示应具有.active显示
.fade过渡，过渡的样式.show

 <div class="container"><!-- 触发区按钮区 --><div class="nav nav-tabs"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#one">商品详情</button><button class="nav-link" data-bs-toggle="tab" data-bs-target="#two">商品评价</button></div><!-- 展示区 --><div class="tab-content"><div class="tab-pane fade show active" id="one">默认打开的对应第一个按钮的</div><div class="tab-pane fade" id="two">第二块点击商品评价展示的内容</div></div></div>

（3）面包屑导航

.breadcrumb外层列表基础类
.breadcrumb-item面包屑导航项
改变面包屑的分隔符style="--bs-breadcrumb-divider:'>';"

<ol class="breadcrumb" style="--bs-breadcrumb-divider:'>';"><li class="breadcrumb-item"><a href="#" class="text-decoration-none text-dark">首页</a></li><li class="breadcrumb-item"><a href="#" class="text-decoration-none text-dark">学习用品</a></li><li class="breadcrumb-item"><a href="#" class="text-decoration-none text-dark">笔记本电脑</a></li></ol>

分页

https://v5.bootcss.com/docs/components/pagination/

.pagination最外层列表基础类
.page-item分页项
- .disabled禁用状态
- .active激活状态
.page-link分页链接样式，有间距和字体样式

<ul class="pagination"><li class="page-item disabled"><span class="page-link">上一页</span></li><li class="page-item active"><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">4</a></li><li class="page-item"><span class="page-link">下一页</span></li></ul>

卡片

https://v5.bootcss.com/docs/components/card/

.card卡片的外层父级基础类，有边框有圆角
图片.card-img-top顶部图片，.card-img-bottom底部图片
.card-body卡片的文字部分外包裹标签，有间距
卡片的内容区域可以加.card-title和.card-text文字描述等

轮播图

https://v5.bootcss.com/docs/components/carousel/

.carousel最外层基础类
.slide自动轮播了，平滑过渡样式
js属性：data-bs-ride="carousel"自动轮播定时器
data-bs-interval="2000"轮播图定时器的时间
图片区.carousel-inner最外层
- .carousel-item图片组，都是消失状态
- .active只有一个能显示，js切换这个类

 <div class="carousel slide" data-bs-ride="carousel"><!-- 图片区 --><div class="carousel-inner"><div class="carousel-item active"><img src="./img/index/banner1.png" class="d-block w-100"></div><div class="carousel-item"><img src="./img/banner2.png" class="d-block w-100"></div><div class="carousel-item"><img src="./img/index/banner3.png" class="d-block w-100"></div><div class="carousel-item"><img src="./img/index/banner4.png" class="d-block w-100"></div></div><!-- 向左区 --><!-- 向右区 --><!-- 控制区 --></div>

左右控制

.carousel-control-prev后退区域
.carousel-control-prev-icon后退符号
data-bs-slide="prev"后退按钮js控制轮播图倒退
.carousel-control-next向前区域
.carousel-control-next-icon向前符号
data-bs-slide="next"前进按钮js控制轮播图前进
控制前进和后退必须有目标，是整个轮播图的id,data-bs-target="#lbt"左右控制符的目标都是轮播图本身

 <!-- 向左区 --><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#lbt"><span class="carousel-control-prev-icon"></span></button><!-- 向右区 --><button class="carousel-control-next" data-bs-slide="next" data-bs-target="#lbt"><span class="carousel-control-next-icon"></span></button>

控制符号

.carousel-indicators控制符号的最外层
.active当前激活项
js属性：data-bs-target="#lbt"关联轮播图id
js属性：data-bs-slide-to="0"控制图片的索引

<!-- 控制区 --><ul class="carousel-indicators"><li class="active" data-bs-target="#lbt" data-bs-slide-to="0"></li><li data-bs-target="#lbt" data-bs-slide-to="1"></li><li data-bs-target="#lbt" data-bs-slide-to="2"></li><li data-bs-target="#lbt" data-bs-slide-to="3"></li></ul>