#下一步是告诉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. String类的intern()方法

    0.引言 什么都先不说,先看下面这个引入的例子: String str1 = new String("SEU")+ new String("Calvin"); ...

  2. 移去OleContainer的黑边框

    //禁止双击打开word编辑 olecontainer1.AutoActivate := aaManual; //禁止右键菜单 olecontainer1.AutoVerbMenu := False; ...

  3. [故障引起的故事]URL中带加号的处理

    问题起因:      客户订购了一关键字为"e+h 变送器" , 在首页推荐广告中,会根据用户在search 搜索过的关键字进行一个匹配投放.技术实现是UED 通过JS 获取coo ...

  4. Python中文件编码的检测

    前言: 文件打开的原则是“ 以什么编码格式保存的,就以什么编码格式打开 ”,我们常见的文件一般是以“ utf-8 ”或“ GBK ”编码进行保存的,由于编辑器一般设置了默认的保存和打开方式,所以我们在 ...

  5. docker问题

    Docker报错 WARNING: IPv4 forwarding is disabled. Networking will not work. 解决办法: # vim /usr/lib/sysctl ...

  6. git仓库搬家

    1). 从原地址克隆一份裸版本库 git clone --bare git://xxxxx.com/xxx.git 2). 然后到新的 Git 服务器上创建一个新项目 3). 以镜像推送的方式上传代码 ...

  7. 格式化java8 LocalDateTime

    DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss", Locale.CHINA).format(time1);

  8. RecycleView实现侧滑删除item

    对于列表空间的侧滑操作,网上有很多开源的空间可以使用,Google在它的新控件RecycleView中增加了侧滑的API,完全遵循Material Design设计规范,下面看看效果演示: 下面看看介 ...

  9. ubuntu 下当前网速查看

    ubuntu下用ethstatus可以监控实时的网卡带宽占用.这个软件能显示当前网卡的 RX 和 TX 速率,单位是Byte 一.安装 ethstatus 软件 #sudo apt-get insta ...

  10. Educational Codeforces Round 58

    D. GCD Counting 题意: 给出n个点的树,每个点有一个权值,找出一条最长的路径使得路径上所有的点的gcd>1 题解: gcd>1的一定不会有很多.所以暴力搞一下就行,不需要点 ...