底部带标签的工具栏与视图的关联

     底部带标签的工具栏需要配合标签页使用，标签用于控制不同内容区的切换显示。
标签页的布局：

<!-- Tabs容器, 需要带有"tabs"类。必需元素 -->
<div class="tabs">
  <!-- 第一个tab, 需要带有"tab"类和唯一的id -->
  <!-- 第一个tab默认是激活显示状态，通过添加"active"类实现 -->
  <div class="tab active" id="tab1">
    ... Tab 1 内容 ...
  </div>
  <!-- 第二个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab2">
    ... Tab 2 内容
  </div>
  <!-- 第三个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab3">
    ... Tab 3 内容 ...
  </div>
</div>

标签页间的切换：
完成标签组件HTML布局后，我们需要控件，以便用户可以在各标签间切换。
我们需要创建链接（< a >标签），它拥有名为”tab-link”的类，并且href属性值和目标标签页的id相同：

<!-- 关联到第一个标签, 需要设置和第一个标签id名相同的href属性(tab1) active表明激活的卡项-->
<a href="#tab1" class="tab-link active">Tab 1</a>
<!-- 关联到第二个标签, 需要设置和第二个标签id名相同的href属性(tab2) -->
<a href="#tab2" class="tab-link">Tab 2</a>
<!-- 关联到第三个标签, 需要设置和第三个标签id名相同的href属性(tab3) -->
<a href="#tab3" class="tab-link">Tab 3</a>