bbs博客园之首页搭建

最新推荐文章于 2023-12-13 09:39:21 发布

Bob drudgery

最新推荐文章于 2023-12-13 09:39:21 发布

阅读量786

点赞数 1

分类专栏： Django

本文链接：https://blog.csdn.net/Bobdragery/article/details/93159111

版权

Django 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

三大部分

1、顶部导航栏

2、左右两侧链接信息展示位（栅格各占2位，共4位）

3、中间位置文件列表（栅格占8）

一、顶部导航栏

二、左右两侧链接信息展示位

1.两侧各占栅格的2个

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
    </div>    
</div>

2.bootstrap面板布局
在这里插入图片描述
样式代码拷贝：
本项目一个面板的代码：


<div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">人工智能</h3>
                </div>
                <div class="panel-body">
                    最火就业
                </div>
            </div>

3.中间的文章列表
采取的样式是媒体对象列表
在这里插入图片描述

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

三、中间位置文章列表

代码如下：

<div class="col-md-8">
            {% for article in article_list %}
                <ul class="media-list">
                    <li class="media">
                        <h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
                        <div class="media-left">

                            <a href="#">
{#                                <img class="media-object" src="/static/img/default.png" alt="..." width="60">#}
                                <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." width="60">  #注意点
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </li>
                </ul>
                <span><a href="">{{ article.blog.userinfo.username }}&nbsp;&nbsp;</a></span>

{#                <span><a href="{{ article.blog.userinfo.username }}">&nbsp;&nbsp;&nbsp;</a></span>#}
                <span>发布于{{ article.create_time|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;</span>
                <span><span
                        class="glyphicon glyphicon-comment"></span>评论({{ article.comment_num }})&nbsp;&nbsp;&nbsp;</span>
                <span><span
                        class="glyphicon glyphicon-thumbs-up"></span>点赞({{ article.up_num }})&nbsp;&nbsp;&nbsp;</span>
                <hr>
            {% endfor %}


        </div>