如何在Django中使用Bootstrap?


68

我正在学习来自PHP的python和Django。这真的很令人兴奋,我很想将Bootstrap与Django一起使用来创建性感的网页。

据我了解(我正在他们网站上关注Django教程),Django使用了可以包含在settings.py文件中的“应用” 。我进行了快速搜索,找到了几个以启动程序为主题的应用程序,但对如何选择合适的应用程序一无所知。大多数人都使用标准的应用程序吗?我需要的是bootstrap.cssbootstrap.js文件。

我确定我可以手动将它们放置在我的根目录中,但是我会喜欢Django安装中的“全包”设置。


看起来@urbushey在没有任何Django应用的情况下很好地解释了直接方法的基础。如果您想了解有关应用程序的更多想法,请注意,2012年有一个问题在一年后被关闭,因为它超出了stackoverflow的范围。但它也有从后一些有趣的见解则: stackoverflow.com/questions/11821116/...
nealmcb

Answers:


75

重新阅读您的问题,似乎您正在寻找将Twitter Bootstrap安装为Django应用程序的方法。尽管有一些应用程序可以促进将Twitter Bootstrap与Django结合使用,但您实际上并不需要使用其中任何一个。

您只需在项目或应用程序级别包含Twitter Bootstrap CSS和JS,并在Django模板中引用它们即可。

要将Twitter Bootstrap包含在Django应用中,最好的选择是:

  1. 使用静态文件

    在中settings.py,将路径添加到Bootstrap(您应该下载该路径,并将其放置在Django应用中的以下文件夹中static

    STATICFILES_DIRS = (
    
        # Put strings here, like "/home/html/static" or "C:/www/django/static".
        # Always use forward slashes, even on Windows.
        # Don't forget to use absolute paths, not relative paths.
        '/path/to/my_project/my_app/static/',
    )
    

    另外,请确保STATIC_URL已设置前缀:

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

    现在,下载Twitter Bootstrap并将其放在以下路径中:

    /path/to/my_project/my_app/static/bootstrap/
    
  2. 在模板中包括Twitter Bootstrap

    我会链接到Twitter Bootstrap文档,但实际上没有任何文档。最好的选择是看看他们的入门模板的来源。使用Django模板系统超出了此问题的范围,但是我会向您提供以下提示:在入门模板中的任何地方,如果您找到指向.css或.js的链接,请用STATIC_URL替换它。

    所以:

    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    

    变成

    <link href="{{ STATIC_URL }}/bootstrap/css/bootstrap.css" rel="stylesheet">
    

    我将入门模板用作模板,base.html{% block content %}base.html其中包含可以被模板中实际内容替换的块{% extend base.html %}

  3. 或者,使用第三方应用程序来指导您

    您可能要研究的是Django Bootstrap Toolkit,我没有用过。我建议您首先手动进行,以探索项目并真正了解正在发生的事情。一点也不难!


18
这是正确的答案,但是它已经有4年的历史了。至少从Django 1.10开始,您应该在模板顶部使用{%load static%}和“ {%static'path / to / whatever'%}”。参见docs.djangoproject.com/en/1.10/ref/templates/builtins/#static。您不再需要“ static_url”或“ staticfiles”。
Malik A. Rumi

1
另外,请参阅tutorial.djangogirls.org/en/css-整个Django教程真的很容易理解,并且此页面包括集成Bootstrap。
逆向工程师

只是Bootstrap网址的方法2(版本4)的更新。getbootstrap.com/docs/4.0/getting-started/introduction。简单地复制并粘贴其托管网址以进行快速设置的简便方法。
Stephen Romero '18

5

欢迎来到Python / Django的世界。像您一样,在使用PHP进行Web开发多年之后,我已经迁移到使用这种语言/框架对创建动态网站和强大的Web应用程序。

django的真正不错的功能之一是它们的自动管理界面。我使用一个名为Django-Admin-Tools和django-admintools-bootstrap的应用程序,它将默认界面转换为漂亮的管理员。https://bitbucket.org/salvator/django-admintools-bootstrap

安装django应用或其他python模块的最简单方法是使用pip。我会阅读有关使用virtualenv http://readthedocs.org/projects/virtualenv/来管理django项目的信息。设置python虚拟环境时,它允许您在系统上的单独python安装中安装django应用程序和python模块。

然后,安装其他django应用程序很容易-pip install django-admin-tools-django grappelli-南方-都是我的最爱。


1
@MaxMackie还可以查看lincolnloop.com/django-best-practices 很好的资源:)
Hacking

链接断开。
阿米尔

1

如果您仅使用pip安装twitter-bootstrap怎么办:

请按照说明进行操作:

https://pypi.python.org/pypi/django-twitter-bootstrap/

简单的配置。


2
尽管有用的提示,但这似乎不是一个完整的答案。我认为他主要是在寻找大多数人使用的“标准主题应用”。
威尔

此外,该包裹似乎已被放弃。还有一些其他人希望在github上有更多最新活动。它们是: github.com/dyve/django-bootstrap3(安装pip install django-bootstrap3github.com/zostera/django-bootstrap4(安装pip install django-bootstrap4
hlongmore

1

上面提到的答案都不对我有用,我要说的最简单的方法是直接在base.html中添加CDN,该CDN将用于扩展,也可以将其添加到独立/静态页面中

在这里阅读有关引导CDN和集成的信息。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.