Django入门指南-第9章：静态文件设置（完结）

http://127.0.0.1:8000

#下一步是告诉Django在哪里可以找到静态文件。打开settings.py，拉到文件的底部，在STATIC_URL后面添加以下内容：
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

<!--现在我们必须在模板中加载静态文件（Bootstrap CSS文件）：-->
<!--只要记住但凡是引用到CSS,JavaScript或图片文件的地方就是要{% load static %}.-->
<!--templates/home.html-->
{% load static %}<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Boards</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    </head>
    <body>
        <h1>Boards</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>Board</th>
                    <th>Posts</th>
                    <th>Topics</th>
                    <th>Last Post</th>
                </tr>
            </thead>
            <tbody>
                {% for board in boards %}
                    <tr>
                        <td>{{ board.name }}<br>
　　　　　　　　　　　　　　　　<small style="color: #888">{{ board.description }}</small>
　　　　　　　　　　　　　　</td>
                        <td>0</td>
                        <td>0</td>
                        <td></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </body>
</html>

<!--现在我们可以编辑模板，以利用Bootstrap CSS：-->
{% load static %}<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Boards</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    </head>
    <body>
        <div class="container">
            <ol class="breadcrumb my-4">
                <li class="breadcrumb-item active">Boards</li>
            </ol>
            <table class="table">
                <thead class="thead-inverse">
                    <tr>
                        <th>Board</th>
                        <th>Posts</th>
                        <th>Topics</th>
                        <th>Last Post</th>
                    </tr>
                </thead>
                <tbody>
                    {% for board in boards %}
                    　　<tr>
                        　　<td>{{ board.name }}
　　　　　　　　　　　　　　　　　　<small class="text-muted d-block">{{ board.description }}</small>
　　　　　　　　　　　　　　　　</td>
                        　　<td class="align-middle">0</td>
                        　　<td class="align-middle">0</td>
                        　　<td></td>
                    　　</tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </body>
</html>