组件

项目中各种通用的 UI 组件的示例

选项卡

组件来自 Bootstrap 3,使用方法参见官方文档

在 Bootstrap 2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
<!-- HTML -->

<div>
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#tabExampleTab1" role="tab" data-toggle="tab">我的关注</a></li>
    <li role="presentation"><a href="#tabExampleTab2" role="tab" data-toggle="tab">标签回答</a></li>
    <li role="presentation"><a href="#tabExampleTab3" role="tab" data-toggle="tab">我的课题</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active fade in" id="tabExampleTab1" role="tabpanel"></div>
    <div class="tab-pane" id="tabExampleTab2" role="tabpanel"></div>
    <div class="tab-pane" id="tabExampleTab3" role="tabpanel"></div>
  </div>
</div>