Question

我的网站没有正确设置bootstrap设计。我在index.html编写，

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/index.css">
    <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
      ・
　　　 ・

在settings.py

中

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR,'bootflat.github.io'), ]

当我点击href =“/ static / css / bootstrap.min.css”时，会发生404错误。目录结构就像

-PythonServer
  -PythonServer
  -logic
   -static
    -index.css
   -templates
    -index.html
  -boolflat.github.io
  -bower_components

我认为我正确设置了STATIC_URL所以我不知道为什么没有设置bootstrap设计。我的代码出了什么问题？我应该如何解决这个问题？

Answer 1

base.html文件：

{% load staticfiles %}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

...你的css ......

{% block head %}

{% endblock head %}

注意顺序是重要的，你需要先添加bootstrap然后你的css，以便你的所有CSS都能正常工作。

Answer 2

要将静态文件添加到项目中，过程为

在项目文件夹中创建一个名为static的新目录
在该目录中，您可以添加图像文件夹或任何静态内容。
您必须将此目录路径添加到项目的settings.py文件中，并且还会添加一个static_variable。
要将其添加到html文件，您需要模板标记，即{% load staticfiles %}。此行将在doctype html声明之后执行。这将把您的静态内容加载到您的html文件。
在src或href属性中使用模板标记总是好的对于前 - <img src={% static 'images/img.png' %}

因此，根据您的代码，有两个主要要点，首先是添加任何静态内容，您必须包含{% load staticfiles %}，如果您的静态内容位于名为static的文件夹中，则必须包含第二项内容。路径需要添加到项目settings.py文件，如STATIC_DIR = os.path.join(BASE_DIR,'static')这里的'static'指的是项目目录中的主静态文件夹，其中包含所有静态内容。

bootstrap链接不正确

2 个答案: