Python 使用引导程序和 Django

Using bootstrap and django

提问by user2251164

I am trying to get bootstrap working in my django project and followed the tutorial herebut it did not work. When I visit the my local project in the browser it just shows a blank page with 4 blue links. not exaclty what I was expecting. In pycharm (my ide) it tells me that I have an unresolved refrence to STATIC_URL in my template. I think the problem is that by just placing bootstrap in my project and defining it in my settings wasnt enough. any ideas?

我正在尝试让引导程序在我的 django 项目中工作，并按照此处的教程进行操作，但没有奏效。当我在浏览器中访问我的本地项目时，它只显示一个带有 4 个蓝色链接的空白页面。不是我所期待的。在 pycharm（我的 ide）中，它告诉我我的模板中有一个未解决的 STATIC_URL 引用。我认为问题在于仅仅将引导程序放在我的项目中并在我的设置中定义它是不够的。有任何想法吗？

Sorry, basically here is how my project is set up. Main_Project/ app_1, app_2 , media/, templates/, Main_Project/ so should I put boostrap under the first Main_Project, or the second

抱歉，基本上这就是我的项目的设置方式。Main_Project/ app_1, app_2 , media/, templates/, Main_Project/ 所以我应该把 boostrap 放在第一个 Main_Project 下，还是第二个

Also here is my settings in case it matters.

这也是我的设置，以防万一。

STATIC_ROOT = os.path.join(SITE_ROOT, 'static_files')

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

回答by Gianfranco Lemmo

1. first the static url in the settings.py should be looks like this:

   STATIC_URL = '/static/'

2. After you should be a create 3 folder inside the folder static:

   • img
   • css
   • js

3. Download Bootstrap an put inside each files correctly in above folders

4. Finally in the template import the bootstrap:

   <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap-responsive.min.css"/> 
   <script type="text/javascript" src="{{STATIC_URL}}js/bootstrap.min.js"></script>
   

5. You should put the files outside the app's or inside the app to personalize each app with your static files, the diference is the url of the static.

   5.1 Outside the app the

   STATIC_URL = '/static/'

   5.2 Inside each app:

   STATIC_URL = '/App1/static/'

   STATIC_URL = '/App2/static/'

6. And the STATIC_ROOT put

   STATIC_ROOT = ''

1. 首先 settings.py 中的静态 url 应该是这样的：

   STATIC_URL = '/静态/'

2. 之后你应该在文件夹static里面创建3个文件夹：

   • 图片
   • css
   • js

3. 下载 Bootstrap 并正确放入上述文件夹中的每个文件

4. 最后在模板中导入引导程序：

   <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap-responsive.min.css"/> 
   <script type="text/javascript" src="{{STATIC_URL}}js/bootstrap.min.js"></script>
   

5. 您应该将文件放在应用程序外部或应用程序内部，以使用您的静态文件个性化每个应用程序，区别在于静态文件的 url。

   5.1 在应用程序之外

   STATIC_URL = '/静态/'

   5.2 每个应用程序内部：

   STATIC_URL = '/App1/static/'

   STATIC_URL = '/App2/static/'

6. 和 STATIC_ROOT 放

   STATIC_ROOT = ''

回答by kveroneau

Kevin here, the author of that article from Python Diary. Since I posted that tutorial I have created other methods of enabling Bootstrap in a Django project, including a handy Project template, which can be downloaded from here:

凯文在这里，Python 日记中那篇文章的作者。自从我发布了该教程后，我创建了在 Django 项目中启用 Bootstrap 的其他方法，包括一个方便的项目模板，可以从这里下载：

http://www.pythondiary.com/templates/bootstrap

http://www.pythondiary.com/templates/bootstrap

I have also started a Project on BitBucket since which has a Django bootstrap theme app which is super easy to use, just add it to your "INSTALLED_APPS" and then extend whichever template from the original Bootstrap website, such as starter.html among others to choose from. Of course you can also spin your own bootstrap theme as well. I try to actively update it and am looking for more suggestions to make it the "Django goto app" for developers looking to use Bootstrap in their project, the BitBucket repo can be found here:

我还在 BitBucket 上启动了一个项目，因为它有一个非常易于使用的 Django bootstrap 主题应用程序，只需将它添加到您的“INSTALLED_APPS”中，然后扩展原始 Bootstrap 网站中的任何模板，例如 starter.html 等从中选择。当然，您也可以旋转自己的引导程序主题。我尝试积极更新它，并正在寻找更多建议，使其成为希望在其项目中使用 Bootstrap 的开发人员的“Django goto 应用程序”，可以在此处找到 BitBucket 存储库：

https://bitbucket.org/kveroneau/django-bootstrap-theme

https://bitbucket.org/kveroneau/django-bootstrap-theme

Hope this helps anyone else who may stumble upon this Stackoverflow page.

希望这可以帮助任何可能偶然发现此 Stackoverflow 页面的人。

回答by Luca Giovenzana

This is what worked for me, I followed what is written in the doc:

这对我有用，我遵循了文档中的内容：

https://docs.djangoproject.com/en/1.10/howto/static-files/

https://docs.djangoproject.com/en/1.10/howto/static-files/

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'settings'
]

...

...

STATIC_URL = '/static/'

Static files placed in project/my_app/static/my_app/css/bootstrap.min.css

静态文件放置在 project/my_app/static/my_app/css/bootstrap.min.css

The template placed here in project/my_app/templates/my_app/base.html

放置在这里的模板 project/my_app/templates/my_app/base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Bootstrap Core CSS -->
    <link href="{% static "my_app/css/bootstrap.min.css" %}" rel="stylesheet">

回答by FirePower

Project settings.py file (this lines are default and don't change them):

项目 settings.py 文件（此行是默认值，请勿更改）：

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

In your app folder (templates folder with .html file should be there too):

在您的应用程序文件夹中（带有 .html 文件的模板文件夹也应该在那里）：

Create folder "static" with subfolders (bootstrap files), structure should look like this:

使用子文件夹（引导文件）创建文件夹“static”，结构应如下所示：

In your html template file import bootstrap like this (note CSS go in headand JS go in bodysection):

在你的 html 模板文件中，像这样导入引导程序（注意 CSS 进入 头部，JS 进入主体部分）：

<html>
<head>
    <title> Your title </title> 

    <!-- To prepare django for loading static files -->
    {%load staticfiles %}

    <!-- And with <link> or <script> tag you actualy import bootstrap files in page -->
    <link href={% static "css/bootstrap.min.css" %} rel="stylesheet">
</head>

<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src={% static "js/bootstrap.min.js" %}></script>


<p> Next your page code ............... </p>
<p> Next your page code ............... </p>
<p> Next your page code ............... </p>


</body>