#下一步是告诉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. framework4.0 IIS配置支持ashx

    framework4.0 https://www.microsoft.com/zh-cn/download/details.aspx?id=17718 IIS添加对ashx文件的支持 http://w ...

  2. Socket IO Web实时推送

    1服务器pom.xml引入 <!-- 服务端 --> <dependency> <groupId>com.corundumstudio.socketio</g ...

  3. python内存泄漏

    记录: 一个脚本在连续运行后,使用内存越来越大,在循环后手动添加gc.collect()没有作用. 尝试方法: 去除所有函数中当作参数传入的全局变量 使用全局redis对象,不再当作参数传入 循环末尾 ...

  4. 原生js实现三级复选框

    工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head ...

  5. jstatd - Virtual Machine jstat Daemon

    jstatd [options] 参数:options 命令行参数,可以按任何顺序,但如果有多余的或者中有互斥的参数,最后制定的那个参数将有优先权 options: -nr 当一个存在的RMI Reg ...

  6. 从给定字符串中截取n个字节的字符（解决汉字截取乱码问题）

    function GetNBytesChar(s: Ansistring; n: Integer): string;var  aStr: AnsiString;  bStr: WideString;b ...

  7. ssh 免密码登录，以及 本地和远端用户名不一致 问题

    ssh 远程登录 ssh -l u1 u1@192.168.0.7 ssh u1@192.168.0.7 每次远程都要输入 用户名,密码 比较麻烦.所以比较好的是免密码登录 1.安装ssh服务器 su ...

  8. out对象以及网上答题系统

    out对象的主要功能是向客户输出响应信息,其主要方法为“print()”,可以输出任意类型的数据,HTML标记可以作为out输出的内容. 代码: 程序截图

  9. Eclipse出现错误：The selection cannot be launched，and there are no recent launches

    刚装了eclipse,想写个Java程序测试一下能不能用,结果一run就出现错误,Debug也是同样的错误,错误内容为:the selection cannot be launched,and the ...

  10. js 获取input选择的图片的信息

    1JS $("#btn").click(function () { var imageEle = document.getElementById("images" ...