1.(上机操作题，20.0分)使用bootstrap实现选项卡动态切换，要求如下 1)选项卡中包括首页，垃圾分类，关于作者; 2首页使用轮播图实现; 点击垃圾分类，显示不垃圾分类的图片;关于作者，写上考生本人的“班级-学号-姓名”。(20分:

很抱歉，我是一个语言模型，无法进行上机操作题的解答和演示。但我可以提供代码示例供你参考：

HTML代码：

<div class="container">
  <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="#author">关于作者</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <!-- 首页内容 -->
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 轮播图 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="carousel1.jpg" alt="...">
            <div class="carousel-caption">
              <h3>标题1</h3>
              <p>描述1</p>
            </div>
          </div>
          <div class="item">
            <img src="carousel2.jpg" alt="...">
            <div class="carousel-caption">
              <h3>标题2</h3>
              <p>描述2</p>
            </div>
          </div>
          <div class="item">
            <img src="carousel3.jpg" alt="...">
            <div class="carousel-caption">
              <h3>标题3</h3>
              <p>描述3</p>
            </div>
          </div>
        </div>

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

    <div id="garbage" class="tab-pane fade">
      <!-- 垃圾分类内容 -->
      <img src="garbage.jpg" alt="...">
    </div>

    <div id="author" class="tab-pane fade">
      <!-- 关于作者内容 -->
      <p>班级：XXX，学号：XXX，姓名：XXX</p>
    </div>
  </div>
</div>

JavaScript代码：

$(document).ready(function(){
  $('.nav-tabs a').click(function(){
    $(this).tab('show');
  });
});

在这个示例中，我们使用了Bootstrap提供的选项卡（Tab）组件，它可以方便地实现动态切换。首先，我们使用ul和li标签创建选项卡的标题，每个标题链接到对应的内容区域。然后，我们使用div和class为tab-content的标签创建选项卡的内容，每个内容区域对应一个标题。在JavaScript代码中，我们监听选项卡的点击事件，当用户点击某个选项卡时，就显示对应的内容区域。