#下一步是告诉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>

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

  1. Django入门指南-第10章：Django Admin 介绍（完结）

    在浏览器中打开该URL:http://127.0.0.1:8000/admin/ 我们可以检查一切是否正常,打开URL http://127.0.0.1:8000 我们首先创建一个管理员帐户: pyt ...

  2. Django入门指南-第8章：第一个测试用例（完结）

    python manage.py test python manage.py test --verbosity=2 # boards/tests.py from django.core.urlreso ...

  3. Django入门指南-第7章：模板引擎设置（完结）

    http://127.0.0.1:8000/ <!--templates/home.html--> <!DOCTYPE html> <html> <head& ...

  4. Django入门指南-第6章：第一个视图函数（完结）

    http://127.0.0.1:8000/ # boards/views.py from django.http import HttpResponse from .models import Bo ...

  5. django 简易博客开发 3 静态文件、from 应用与自定义

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...

  6. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  7. 完整的Django入门指南学习笔记2

    part2: 前沿 在第一节中,我们安装了项目所需要的一切:Python3.6以及在虚拟环境中运行的Django2.0,这部分教程继续在项目上编写代码. 开始写代码前,先讨论下项目的相关背景知识,然后 ...

  8. 完整的Django入门指南学习笔记7 网页自动翻译

    转自[https://simpleisbetterthancomplex.com/series/2017/10/16/a-complete-beginners-guide-to-django-part ...

  9. Django入门与实践 17-26章总结

    Django入门与实践-第17章:保护视图 Django 有一个内置的视图装饰器 来避免它被未登录的用户访问: 现在如果用户没有登录,将被重定向到登录页面: 现在尝试登录,登录成功后,应用程序会跳转到 ...

随机推荐

  1. 使用spring注解——定义bean和自动注入

    对于java bean的定义和依赖配置,使用xml文件真心是不方便. 今天学习如何用注解,解决bean的定义和注入. 常用注解: 1.自动注入:@Resources,@Autowired 2.Bean ...

  2. xe7 控件升级

    rm.ehlib.synedit OK SynSQLSyn1->TableNames 为NULL,导致添加数据失败,XE6正常 放在按钮里也不正常,就不说初始化次序引起的.

  3. 边框（border）宽度样式颜色 和基本属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Putty全屏/退出全屏快捷键

  5. LaiFeng-code

    https://github.com/LaiFeng-Android/SopCastComponent https://github.com/LaiFengiOS/

  6. 从底层谈WebGIS 原理设计与实现(五)：WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图

    从底层谈WebGIS 原理设计与实现(五):WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:2063    更 ...

  7. mysql创建定时器（event），查看定时器，打开定时器，设置定时器时间

    由于项目需要创建定时器(evevt),所以就百度了一下,发现基本都是来源于一个模板,有些功能还不全,现在自己总结一下. 注:mysql版本是从5.1开始才支持event的.如果你的版本低于5.1就先升 ...

  8. Java Thread.interrupt interrupted

    Java Thread.interrupt @(Base)[JDK, 线程, interrupt] 原文地址,转载请注明 下面这个场景你可能很熟悉,我们调用Thread.sleep(),conditi ...

  9. MySQL中实现Oracle里面 rank()over ( PARTITION BY ORDER BY) 分类分组功能

    各班级学生成绩测试表 select * from TMP_A; 实现目的: 按照班级分类后按照分数倒序排序 采用MySQL变量简单实现,SQL如下: SELECT  a.stu_id,a.point, ...

  10. HTML鼠标悬浮显示隐藏 JS方法

    CSS样式表: @charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; top:200px; left ...