第五章 组件1

组件这章需要引入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">&leftarrow;</a>
        <a href="#pic" data-bs-slide="next" class="carousel-control-next">&rightarrow;</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">&lsaquo;</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">&raquo;</span></a></li>
</ul>