8-21 组件手风琴轮播徽章

最新推荐文章于 2021-06-22 11:00:13 发布

one橙子

最新推荐文章于 2021-06-22 11:00:13 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/oneorang/article/details/108170165

版权

1.1. 手风琴

结合导航栏和卡片

    <div class="card">
            <div class="card-header">
                     <a href="#d1" data-toggle="collapse">card1</a>
            </div>
            <div class="collapse" id="d1" data-parent="#parent">
                     <div class="card-body">
                               card1 page
                     </div>
            </div>
    </div>
    <div class="card">
            <div class="card-header">
                     <a href="#d2" data-toggle="collapse">card2</a>
            </div>
            <div class="collapse" id="d2" data-parent="#parent">
                     <div class="card-body">
                               card2 page
                     </div>
            </div>
    </div>
    <div class="card">
            <div class="card-header">
                     <a href="#d3" data-toggle="collapse">card3</a>
            </div>
            <div class="collapse" id="d3" data-parent="#parent">
                     <div class="card-body">
                               card3 page
                     </div>
            </div>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62xyRCY0-1598084086118)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200821215354849.png)]

· 1. .collapse 和 .card-body不能写在同一个元素的身上，否则会发生卡顿

· 2. 如果不在卡片的最外层添加div.parent，并且在div.collapse的位置添加data-parent="#parent"，那么当点击多个卡片时，就会出现，其他卡片不收回的情况，所以需要对卡片进行事件绑定设置

2.1轮播

<!-- carousel slide 视窗     carousel-inner背后隐藏溢出的大盒子放图的区域     carousel-item图片区域 -->

<div id="carouselID" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
         <div class="carousel-item active">
                <img src="1.jpg">
         </div>
         <div class="carousel-item">
                <img src="2.jpg">
         </div>
         <div class="carousel-item">
                <img src="3.jpg">
         </div>
    </div>
    // 左侧箭头
    <a class="carousel-control-prev" data-slide="prev" href="#carouselID"> 
          <span class="carousel-control-prev-icon"></span>
    </a>
    // 右侧箭头
    <a class="carousel-control-next" data-slide="next" href="#carouselID">
         <span class="carousel-control-next-icon"></span>
    </a>
   // 轮播指示器
    <ul class="carousel-indicators">
          <li data-target="#carouselID" data-slide-to="0"  class="active"></li>
          <li data-target="#carouselID" data-slide-to="1"></li>
          <li data-target="#carouselID" data-slide-to="2"></li>
    </ul>