bootstrap实现选项卡

Question

前端的实现选项卡，一共包括三部分首页、垃圾分类、关于作者。使用轮播图实现

Answer 1

在HTML中创建选项卡的框架，包括选项卡的标题和内容。使用Bootstrap的Tab组件可以实现

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
  <li><a data-toggle="tab" href="#garbage">垃圾分类</a></li>
  <li><a data-toggle="tab" href="#about">关于作者</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>首页</h3>
    <p>这里是首页的内容。</p>
  </div>
  <div id="garbage" class="tab-pane fade">
    <h3>垃圾分类</h3>
    <p>这里是垃圾分类的内容。</p>
  </div>
  <div id="about" class="tab-pane fade">
    <h3>关于作者</h3>
    <p>这里是关于作者的内容。</p>
  </div>
</div>

然后，在JavaScript中添加轮播图的代码。使用Bootstrap的Carousel组件可以实现：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 指示符 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/slide1.jpg" alt="轮播图1">
      <div class="carousel-caption">
        <h3>轮播图1标题</h3>
        <p>轮播图1描述</p>
      </div>
    </div>

    <div class="item">
      <img src="img/slide2.jpg" alt="轮播图2">
      <div class="carousel-caption">
        <h3>轮播图2标题</h3>
        <p>轮播图2描述</p>
      </div>
    </div>

    <div class="item">
      <img src="img/slide3.jpg" alt="轮播图3">
      <div class="carousel-caption">
        <h3>轮播图3标题</h3>
        <p>轮播图3描述</p>
      </div>
    </div>
  </div>

  <!-- 左右切换按钮 -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

其中，data-ride="carousel"表示自动播放轮播图，carousel-indicators表示指示符，carousel-inner表示轮播图片，carousel-caption表示轮播图的标题和描述，left carousel-control和right carousel-control表示