Bootstrap

Bootstrap是最流行的HTML和CSS框架之一，它可以用来开发炫酷的网站:https://getbootstrap.com/ 起初，它由Twitter的程序员编写，现在由来自世界各地的志愿者写的。

安装 Boostrap

要将它添加到你的 .html 文件的 <head> 中：blog/templates/blog/post_list.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

这个时候我们已经可以看到一些变化了。
不过我们这次不用这个，下次研究一下具体怎么用，能实现什么。

Django的静态文件放在`static`

    djangogirls
    ├── blog
    │   ├── migrations
    │   └── static
    └── mysite

Django会自动找到你应用文件夹目录下所有名字叫“static”的文件夹，并能够使用其中的静态文件。

创建一个CSS文件

在blog 目录下面创建一个目录 static再再下面创建一个目录css再在里面创建一个名为 blog.css的文件。

    djangogirls
    └─── blog
         └─── static
              └─── css
                   └─── blog.css

加载 static

在blog/templates/blog/post_list.html的最前面，也就是<html>的前面加上下面的代码。

{% load staticfiles %}

非常重要 如果不加在最前面会报个这样的错误、

链接CSS

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

最后，post_list.html 看起来是这样的

{% load staticfiles %}
<html>
    <head>
        <title>末伏的博客</title>
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
         <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
    <div>    
    <h1>
    <a href="">末伏的博客</a>
    </h1>
    </div>
    {% for post in posts %}
        <div>
            <p>published: {{ post.published_date }}</p>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
    </body>
</html>

编辑CSS

在在 blog/templates/blog/post_list.html 的< head > 中加上google的字体。现在可以去网站https://fonts.google.com/ 找自己喜欢的字体了。选好后点击字体，然后会有方法，告诉如何使用。

<link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu" rel="stylesheet">

到CSS文件 blog/static/css/blog.css 给 h1 a 添加一个样式。

    h1 a {
        color: #16A085;
        font-family: 'Baloo Tammudu', cursive;
    }

标题

添加一个称为 page-header 的类到您的 div中，其中包含您的标题，像这样：

    <div class="page-header">
        <h1><a href="/">末伏的博客</a></h1>
    </div>

文章

将包含一篇博客文章的类post添加到您的 div 。

    <div class="post">
        <p>published: {{ post.published_date }}</p>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>

全部CSS

blog/static/css/blog.css 写在这个文件。

     .page-header {
        background-color: #16A085;
        margin-top: 0;
        padding: 20px 20px 20px 40px;
    }
    .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
        color: #ffffff;
        font-size: 36pt;
        text-decoration: none;
    }
    .content {
        margin-left: 40px;
    }
    h1, h2, h3, h4 {
        font-family: 'Baloo Tammudu', cursive;
    }
    .date {
        float: right;
        color: #16A085;
    }
    .save {
        float: right;
    }
    .post-form textarea, .post-form input {
        width: 100%;
    }
    .top-menu, .top-menu:hover, .top-menu:visited {
        color: #ffffff;
        float: right;
        font-size: 26pt;
        margin-right: 20px;
    }
    .post {
        margin-bottom: 70px;
    }
    .post h1 a, .post h1 a:visited {
        color: #000000;
    }

然后将文章的HTML代码用类声明包裹起来。替换以下内容：

    {% for post in posts %}
        <div class="post">
            <p>published: {{ post.published_date }}</p>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}

在 blog/templates/blog/post_list.html 是这样的：

    <div class="content container">
        <div class="row">
            <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <div class="date">
                            {{ post.published_date }}
                        </div>
                        <h1><a href="">{{ post.title }}</a></h1>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

CSS