【BootStrap入门级教程】组件1

前言

上一篇我们介绍了表单的常用类以及验证，这一篇我们继续来介绍组件，BootStrap中的组件相对较多，我们分两个篇幅来介绍，本篇幅介绍组件有：折叠、手风琴、警告框、徽章、面包屑、卡片、轮播图、关闭按钮、下拉列表、列表组和分页，其中轮播图使用类和属性较多，需要多加练习。

组件这部分需要引入bootstrap.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>
<script src="../bootstrap.bundle.js"></script>

2、手风琴

.accordion 声明div是一个手风琴容器

.accordion-item 手风琴中每个元素

.accordion-header 元素的头部，一般用来表示一级标题

.accordion-button 头部中的按钮，是一个箭头

.accordion-body 元素的身体，一般用来表示二级标题

.accordion-collapse 手风琴的折叠效果

.collapse

data-bs-toggle=“collapse”

data-bs-target=“#id”

示例：

<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>

<script src="../bootstrap.bundle.js"></script>

3、警告框

.alert 警告框基础样式，必须有

.alert-danger 警告框颜色样式

.alert-dismissible 做关闭按钮的定位

data-bs-dismiss=“alert” 关闭按钮点击时关闭警告框

示例：

<div class="alert alert-danger alert-dismissible">
    警告
    <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

<script src="../bootstrap.bundle.js"></script>

4、徽章

.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>

<script src="../bootstrap.bundle.js"></script>

5、面包屑导航

.breadcrumb

.breadcrumb-item

示例：

<ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="">首页</a></li>
    <li class="breadcrumb-item"><a href="">个人中心</a></li>
    <li class="breadcrumb-item"><a href="">修改密码</a></li>
</ul>

<script src="../bootstrap.bundle.js"></script>

6、卡片

.card 基础样式必须有

.card-header

.card-body

.card-title

.card-text

.card-link

.card-footer

示例：

<div class="card w-50 mx-auto">
    <div class="card-header text-center">
        一只猫
    </div>
    <img src="../img/4.jpg" alt="">
    <div class="card-body">
        <div class="card-title">这是一个月亮</div>
        <div class="card-text">月黑风高夜</div>
        <a 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="../img/1.jpg" class="w-100" alt="">
            <div class="carousel-caption">
                <h6>爆炸头</h6>
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="1000">
            <img src="../img/2.jpg" class="w-100" alt="">
        </div>
        <div class="carousel-item active" data-bs-interval="1000">
            <img src="../img/3.jpg" class="w-100" alt="">
        </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 下拉菜单类

.dropdown-item 下拉菜单中选项的类

data-bs-target=“#下拉菜单id” 属性写在按钮上

data-bs-toggle=“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 选项颜色

示例：

<ul class="list-group">
    <li class="list-group-item">太极张三丰</li>
    <li class="list-group-item list-group-item-action">疯狂的石头</li>
    <li class="list-group-item list-group-item-danger list-group-item-action">西红柿首富</li>
</ul>

11、分页

.pagination

.page-item

.page-link

示例：

<ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="page-item"><a class="page-link">1</a></li>
    <li class="page-item"><a class="page-link">2</a></li>
    <li class="page-item"><a class="page-link">3</a></li>
    <li class="page-item"><a class="page-link"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

好了，就到这里吧，大家抓紧时间去练习吧😄
后续内容持续更新中，记得给个三连，这样才能找到我😘
祝各位看官万福金安😊

---

⭐️徒手摘星，爱而不得，世人万千，再难遇我。⭐️