#下一步是告诉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. delphi XE7 判断手机返回键

    Using the Android Device's Back Button To make your application handle when users press the Back but ...

  2. margin-top和padding-top

    padding- top 在原有的基础上进一步的扩张 margin - top 在原有的位置上发生上下的平移 <!DOCTYPE html> <html lang="en& ...

  3. 两个关于URL解析的例子

    例一: /* 解析URL查寻串中的name=value参数对 将name=value对存储在对象属性中,并返回对象 alert(getQuery().name) */ function getQuer ...

  4. ADO数据库编程入门

    ADO 是目前在Windows环境中比较流行的客户端数据库编程技术. ADO是建立在OLE DB底层技术之上的高级编程接口,因而它兼具有强大的数据处理功能(处理各种不同类型的数据源.分布式的数据处理等 ...

  5. Functional Java 学习笔记

    Functional Java Functional Java是一个在Java语言中实现函数型编程范式的类库. 从接口上看,该类库似乎与Haskell语言关系密切,接口的方法名很多来自该语言. < ...

  6. Lodash踩坑记录

    一直在用lodash 这个框架,最近踩了一个坑 reverse 这个函数是mutable的 ,后边去查了文档 Note: This method mutates array and is based ...

  7. Spring Boot中启动HTTPS

    一,生成https 的证书 1,在相应的根目录下 keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize -keyst ...

  8. while

    public class TestWhile { /** * 测试循环 */ public static void main(String[] args) { int a=1; while(a< ...

  9. KNN识别手写数字

    一.问题描述 手写数字被存储在EXCEL表格中,行表示一个数字的标签和该数字的像素值,有多少行就有多少个样本. 一共42000个样本 二.KNN KNN最邻近规则,主要应用领域是对未知事物的识别,即判 ...

  10. IntelliJ IDEA SVN

    第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!去电脑管理的软件管理里面可以直接下载,方便迅速 下载之后直接安装就好了,但是要注意这里的这个文件也要安装上,默认是不安装的,如果不安装,svn中的 ...