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

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>         

image-20200821215354849

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

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

2.1轮播


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

3.1. 徽章

主要

次要
成功
危险
警告
信息
浅色
深色

总结:华为官网杀我!!

标签

web前端开发工程师 云创动力 云创集训 开发喵 成都云创动力 成都前端开发工程师 成都物联网 教育生态服务商

评论

this is is footer