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>         

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