码迷,mamicode.com
首页 > 其他好文 > 详细

个人中心标签页导航

时间:2017-12-16 23:12:55      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:column   nav   样式   tle   lis   nbsp   个人信息   class   icon   

    1. {% extends user.html %}
      {% block title %}-全部问题{% endblock %}
      
      {% block body %}
          <div class="container">
              <div class="row clearfix">
                  <div class="col-md-3 column">
                  </div>
                  <div class="col-md-6 column">
                      <ul class="nav nav-tabs">
                          <li><a href="#">个人资料</a></li>
                          <li><a href="#">全部评论</a></li>
                          <li class="active"><a href="#">全部问题</a></li>
                      </ul>
                      <ul class="list-group">
                          {% for foo in question %}
                              <li class="list-group-item">
                                  <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                                  <a href="#">{{ foo.author.username }}</a>
                                  <span class="badge">{{ foo.creat_time }}</span>
                                  <p>{{ foo.detail }}</p>
                              </li>
                          {% endfor %}
                      </ul>
                  </div>
                  <div class="col-md-3 column">
                  </div>
              </div>
          </div>
      {% endblock %}
      {% extends user.html %}
      {% block title %}-全部评论{% endblock %}
      
      {% block body %}
          <div class="container">
              <div class="row clearfix">
                  <div class="col-md-3 column">
                  </div>
                  <div class="col-md-6 column">
                      <ul class="nav nav-tabs">
                          <li><a href="#">个人资料</a></li>
                          <li class="active"><a href="#">全部评论</a></li>
                          <li><a href="#">全部问题</a></li>
                      </ul>
                      <ul class="list-group">
                          {% for foo in comments %}
                              <li class="list-group-item">
                                  <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                                  <a href="#">{{ foo.author.username }}</a>
                                  <span class="badge">{{ foo.creat_time }}</span>
                                  <p>{{ foo.detail }}</p>
                              </li>
                          {% endfor %}
                      </ul>
                  </div>
                  <div class="col-md-3 column">
                  </div>
              </div>
          </div>
      {% endblock %}
      {% extends user.html %}
      {% block title %}-个人资料{% endblock %}
      
      {% block body %}
          <div class="container">
              <div class="row clearfix">
                  <div class="col-md-3 column">
                  </div>
                  <div class="col-md-6 column">
                      <ul class="nav nav-tabs">
                          <li class="active"><a href="#">个人资料</a></li>
                          <li><a href="#">全部评论</a></li>
                          <li><a href="#">全部问题</a></li>
                      </ul>
                      <ul class="list-group">
                          <li class="list-group-item">用户:{{ username }}</li>
                          <li class="list-group-item">编号:</li>
                          <li class="list-group-item">昵称:</li>
                          {% endfor %}
                      </ul>
                  </div>
                  <div class="col-md-3 column">
                  </div>
              </div>
          </div>
      {% endblock %}

       

      新页面userbase.html,用<ul ><li role="presentation"> 实现标签页导航。
      <ul class="nav nav-tabs">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
      </ul>

    2. 让userbase.html继承base.html。
      重写title,head,main块.
      将上述<ul>的样式放在head块,<ul>放在main块中.
      定义新的块user。

    3. 让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。

    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面

个人中心标签页导航

标签:column   nav   样式   tle   lis   nbsp   个人信息   class   icon   

原文地址:http://www.cnblogs.com/qq724852210/p/8047854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!