2022-04-14 前端开发框架Bootstrap笔记(三) bootstrap组件的使用(以轮拨图组件为例)

1.折叠组件
位置

组件/According

步骤
1.引入文件
2.创建container容器
3.粘贴折叠组件代码
4.把标题和内容改成自己的文本,class名不能改
代码
    <!-- 1.引入文件 -->
    <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="./bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>

</head>

<body>
	<!-- 2.创建container容器 -->
    <div class="container">
        <div class="accordion" id="accordionExample">
        <!-- 3.粘贴折叠组件代码 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <!-- 4.把标题和内容改成自己的文本,class名不能改 -->
                  第一栏
                </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        第一栏
                </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  第三栏
                </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
结果

在这里插入图片描述

2.轮拨图组件

可以自己根据想要实现的功能复制相应的代码

2.1.只有播放功能的轮拨图
    <div class="container">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="../3.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
    </div>
2.2.可以切换上下一张的轮拨图

With indicators

2.3.自带标题的轮拨图

With captions

2.4.淡进淡出的轮拨图

Crossfade

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值