用户板块的实现

用到的BootStrap元素

在用户板块主要用到的BootStrap元素如下：

1. Bootstrap tab——以标签页的方式展示新会员和高分会员
2. 圆形图片区（img-circle）——用于展示用户的头像。

实现过程

用户板块主要使用了BootStrap tab,前面的章节已经介绍过其使用方法。主要包括：

1.在DIV中加入role="tabpanel"，该DIV则会成为tab

    <div role="tabpanel">
    </div>

2.使用列表来制作标签页

    <ul id="myTabregister" class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
             <a href="#newRegister" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">新会员</a>         
         </li>
          <li role="presentation" class="">
              <a href="#highScoreRegister" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">高分会员</a>
         </li>

    </ul>

同样，列表中，超级链接的地址href的值和单个标签内容页的id值一一对应，如最新会员标签项的href="newRegister"。

3.标签内容区域（tab-content）

    <div id="myTabContent" class="tab-content" style="text-align:center;">
        <!--最新会员展示区-->
        <!--高分会员展示区-->
    </div>

4.单个标签页(tabpanel)

    <div role="tabpanel" class="tab-pane fade active in" id="newRegister" aria-labelledby="home-tab">
                        <div class="row" style="margin-top:10px;">
                            <div class="col-md-2" style="height:200px;">
                                <a href="会员主页">
                                    <img class="img-circle" src="图片路径"style="width:80px; height: 80px;" >
                                </a>
                            </div>
                            <!--其他最新会员……-->
                      </div>
                      <!--高分会员-->

该示例代码中主要列出了“最新会员”的展示信息，其ID为newRegister,与其标签项的链接地址相同。其中每个会员信息占有的屏幕宽度为col-md-2(在右侧代码中为了满足屏幕尺寸需要改为col-xs-2),也就是每6个用户占据一行。