• 样式与UI美化
    • 响应式设计
      • 引入前端框架
    • 页面美化
      • 添加导航
      • 添加标语
      • 优化列表
      • 添加footer

    样式与UI美化

    我们的前端样式实在是太丑了，让我们想办法来美化一下它们吧——这时候我们就需要一个前端框架来帮助我们做这件事。这里的前端框架并不是指那种MV*框架，而是UI框架。

    响应式设计

    考虑到易学程度，以其响应式设计的问题，我们决定用Bootstrap来作为这里的前端框架。Bootstrap是Twitter推出的一个用于前端开发的开源工具包，似乎也是当前“最受欢迎”的前端框架。它提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。并且我们能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。

    它是一个支持响应式设计的框架，即页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。如下图所示：

    响应式设计

    我们在不同的设计上看到的是不同的布局，这会依据我们的设备大小做出调整——使用媒体查询(media queries)实现。

    引入前端框架

    下好Bootstrap，将里面的内容复制到static/目录，如下所示：

    1. .
    2. ├── css
    3. │   ├── bootstrap-theme.css
    4. │   ├── bootstrap-theme.css.map
    5. │   ├── bootstrap-theme.min.css
    6. │   ├── bootstrap-theme.min.css.map
    7. │   ├── bootstrap.css
    8. │   ├── bootstrap.css.map
    9. │   ├── bootstrap.min.css
    10. │   ├── bootstrap.min.css.map
    11. │   └── styles.css
    12. ├── fonts
    13. │   ├── glyphicons-halflings-regular.eot
    14. │   ├── glyphicons-halflings-regular.svg
    15. │   ├── glyphicons-halflings-regular.ttf
    16. │   ├── glyphicons-halflings-regular.woff
    17. │   └── glyphicons-halflings-regular.woff2
    18. └── js
    19.     ├── bootstrap.js
    20.     ├── bootstrap.min.js
    21.     └── npm.js

    它包含了JavaScript、CSS还有字体，需要注意的一点是bootstrap依赖于jquery。因此，我们需要下载jquery并放到这个目录里。然后在我们的head里引入这些css

    1. <head>
    2.     <title>{% block head_title %}Welcome to my blog{% endblock %}</title>
    3.     <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    4. </head>

    在我们的body结尾的地方：

    1. <script src="{% static 'js/jquery.min.js' %}"></script>
    2. <script src="{% static 'js/bootstrap.min.js' %}"></script>
    3. </body>
    4. </html>

    在这里，将Script放在body的尾部有利于用户打开页面的速度。而对于一些纯前端的框架来说，它们就需要放在页面开始的地方。

    页面美化

    现在，我们就可以创建一个导航了。

    添加导航

    根据Bootstrap的官方文档的Demo，我们可以创建对应的导航。

    1. <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
    2.     <div class="container">
    3.         <div class="navbar-header">
    4.             <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
    5.                     data-target=".bs-navbar-collapse">
    6.                 <span class="sr-only">切换视图</span>
    7.                 <span class="icon-bar"></span>
    8.                 <span class="icon-bar"></span>
    9.                 <span class="icon-bar"></span>
    10.             </button>
    11.             <a href="/" class="navbar-brand">Growth博客</a>
    12.         </div>
    13.         <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
    14.             <ul class="nav navbar-nav">
    15.                 <li>
    16.                     <a href="/pages/about/">关于我</a>
    17.                 </li>
    18.                 <li>
    19.                     <a href="/pages/resume/">简历</a>
    20.                 </li>
    21.             </ul>
    22.             <ul class="nav navbar-nav navbar-right">
    23.                 <li><a href="/admin" id="loginLink">登入</a></li>
    24.             </ul>
    26.         </nav>
    27.     </div>
    28. </header>

    它在桌面下的效果大致如下图所示：

    桌面浏览器下的Bootstrap导航

    而在移动浏览器下则是这样的效果：

    移动设备上的导航

    当我们点击右上角的菜单按钮时，会出现我们的菜单

    点击导航后的结果

    添加标语

    接着，我们可以快速的创建一个标语：

    1. <main class="bs-docs-masthead" id="content" role="main">
    2.     <div class="container">
    3.         <div id="carbonads-container">
    4.             THE ONLY FAIR IS NOT FAIR <br>
    5.             ENJOY CREATE & SHARE
    6.         </div>
    7.     </div>
    8. </main>

    这里的代码都比较简单，我想也不需要太多的解释。

    优化列表

    接着，我们可以简单的对首页的博客列表做一个优化，方法比较简单：

    • 为博客列表添加一个row的class，表示它可以滚动
    • 在每一篇博客里添加col-sm-4的class，在不同的大小下会有不同的布局

    代码如下所示：

    1. {% extends 'base.html' %}
    2. {% block title %}Welcome to my blog{% endblock %}
    4. {% block content %}
    5. <h2>博客</h2>
    6. <div class="row">
    7.     {% if posts %}
    8.     {% for post in posts %}
    9.     <div class="col-sm-4">
    10.         <h2><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h2>
    11.         {{post.body | slice:":80"}}
    12.         {{post.posted}} - By {{post.author}}
    13.     </div>
    14.     {% endfor %}
    15.     {% else %}
    16.     <p>There are no posts.</p>
    17.     {% endif %}
    18. </div>
    19. {% endblock %}

    它在桌面和自动设备上的效果如下图所示：

    桌面设备效果

    移动设备效果

    添加footer

    最后，我们可以在页面的最下方添加一个footer，来做一些版权声明：

    1. <footer class="footer">
    2.     <div class="container">
    3.         <p class="text-muted">@Copyright Phodal.com</p>
    4.     </div>
    5. </footer>

    它拥有一些简单的样式，来将footer固定在页面的最下方：

    1. .footer {
    2.   position: absolute;
    3.   bottom: 0;
    4.   width: 100%;
    5.   /* Set the fixed height of the footer here */
    6.   height: 60px;
    7.   background-color: #f5f5f5;
    8. }
    9. .footer .container {
    10.   width: auto;
    11.   max-width: 680px;
    12.   padding: 0 15px;
    13. }
    15. .footer .container .text-muted {
    16.   margin: 20px 0;
    17. }