如何将 Bootstrap 与 Django 一起使用?

2024-01-21

我正在从 PHP 学习 python 和 Django。这一切都非常令人兴奋,我很乐意使用 Bootstrap 和 Django 来创建性感的网页。

据我了解(我正在关注他们网站上的 Django 教程),Django 使用“应用程序”,它可以包含在您的settings.py文件。我进行了快速搜索,发现了几个以引导程序为主题的应用程序,但不知道如何选择合适的应用程序。是否有大多数人使用的标准应用程序?我所需要的只是bootstrap.css and bootstrap.js files.

我确信我可以手动将它们放在我的根目录中,但我希望在 Django 安装中享受“全包”设置。


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

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

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

  1. 使用静态文件

    In your 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 文档,但实际上没有。你最好的选择是看看他们的来源入门模板 http://twitter.github.com/bootstrap/examples/starter-template.html。使用 Django 模板系统有点超出了这个问题的范围,但我会给你这个提示:在起始模板中找到 .css 或 .js 链接的任何位置,将其替换为 STATIC_URL。

    So:

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

    becomes

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

    我使用入门模板作为我的base.html并包括{% block content %}阻塞在base.html可以替换为我的模板中的实际内容,其中{% extend base.html %}.

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

    您可能会调查的是Django 引导工具包 https://github.com/dyve/django-bootstrap3,我自己没用过。不过,我建议您首先自己手动执行此操作,作为探索该项目并真正了解正在发生的事情的一种方式。一点也不难!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Bootstrap 与 Django 一起使用? 的相关文章

随机推荐

  • 修复可滚动 div 顶部的表格标题

    本例中的div是可滚动的 如何使表格的标题固定在div的顶部 div style border 1px solid table tr th A th th B th tr tr td A td td B td tr table div
  • Java 8:列出多个路径中的文件

    如何在 Java 8 中从多个路径搜索文件 这些不是子 同级目录 例如 如果我想搜索路径中的 json 文件 我有 try Stream
  • Python列表打印(格式化)

    有一个清单 x s 2 3 4 5 6 我可以这样打印 for i in x print i 然而 正如我发现的 仅使用一个打印语句会更快一些 如下所示 下面是我如何达到这一点 print n join i class string and
  • Laravel 中如何将数组转换为字符串?

    我使用引导程序形式从数组中的复选框值获取输入 我正在使用数组来存储复选框值 我如何将此数组转换为 string 因为数据库只接受字符串值 这是我的代码 div class form group col md 12 div class cus
  • Kibana 返回“连接失败”

    我正在尝试在 Windows 2008 R2 中使用 Kibana 运行 ElasticSearch 我关注了这篇文章 在带有 kibana 的 Windows 服务器上安装logstash https community ulyaoth
  • 如何使用 Nest 客户端在 elasticsearch 中按数组搜索数组属性

    假设我们有一个名为 acls 的类 该类有一个名为 lprop 的 List 属性 现在假设我有另一个列表 其值为 1 3 5 并且假设该变量名称为 tosearch 我想通过使用 Nest 来搜索 Elasticsearch 索引中的 a
  • 添加到 Windows 的 ios 8 视图的旋转问题

    I have created category for view rotation And added views on controllers view as well as on window for showing custom in
  • 为什么 Honeywell POS4NET 会为两个不同的扫描仪触发相同的事件?

    我想读取两个霍尼韦尔扫描仪的输入 即航行者1202克 and 轨道7190克 对于某些业务需求 需要在同一台计算机上使用这两种设备 Both扫描仪使用 Honeywell POS4NET 驱动程序 我需要知道 which扫描仪正在传送数据
  • 如何在flutter中实现圆角底部Appbar?

    我想创建一个像这样的圆形底部应用栏 圆角底部应用栏 但它看起来像这样 编码的BottomAppBar How do I get rid of that white portion return ClipRRect borderRadius
  • 使用 Swift 通过键盘移动视图

    我有一个应用程序 在视图的下半部分有一个文本字段 这意味着当我在文本字段中输入内容时 键盘会覆盖文本字段 我如何在打字时向上移动视图 以便可以看到我正在输入的内容 然后在键盘消失时将其移回到原来的位置 我到处都看过 但所有解决方案似乎都在
  • 原则 2 按 ASC 和最后的空值排序

    我正在尝试获取结果 并且我需要按升序排序 但有些值可能为空 空 我需要将其放在最后 同时排序从 0 1 2 开始 然后为空值 我尝试了 SortableNullsWalker 但没有帮助 我正在排序的值不是列 它是正在排序的两个值的乘法 这
  • 如果可能的话,如何为 python 3.5+、3.6 构建 .exe?

    现在是否有一个简单的协议可以使用模块 pyqtgraph qt5 theano pymc3 numpy scipy os 和 sys 从 python 3 5 构建 exe 并打开存储在 ui 文件中的简单 GUI 我浪费了几个小时 最终没
  • 如何为每个输入预先计算一个掩码并根据该掩码调整权重?

    我想提供一个与输入图像大小相同的掩码 并根据该掩码调整从图像中学习到的权重 类似于注意力 但为每个图像输入预先计算 如何使用 Keras 或 TensorFlow 做到这一点 Question 如何向图像添加另一个特征层 例如掩模 并让神经
  • java中未选中和选中复选框的httpservlet请求getparameter

    我的表单上有几个复选框 大约 15 个 我遇到的问题是 复选框的名称仅在选中时出现在枚举中 但我希望返回所有复选框 以便在打印数据时将显示复选框的名称并显示 已选中 或 未选中 我曾想过一种方法 我可以手动设置标志来查看存在的内容和不存在的
  • 名称“驱动程序”未定义,Selenium Webdriver python3

    我正在尝试使用 Selenium WebDriver Chrome 打开一个网站 但由于我的代码不断产生错误 所以还没有实现 我已经通过将 Chrome 驱动程序目录中的 加倍来修复了一个问题 我正在使用Pycharm 我想知道为什么会发生
  • 使用 beautifulsoup 'NoneType' 对象进行网页抓取没有属性 'get_text'

    我正在尝试学习 beautifulsoupscrape纽约时报政治文章中的文本 目前使用我现在拥有的代码 它确实设法浏览了两个段落 但在那之后 它吐出了 AttributeError NoneType object has no attri
  • 如何在cordova应用程序中创建“离线模式”?

    我必须为平板电脑 Android 开发一个应用程序 该应用程序将由一些在不同地方的人使用 这些地方的互联网连接并不总是可用 但这个应用程序需要数据才能工作 用户必须能够在有或没有互联网接入的情况下使用该功能 我们将与 cordova 合作构
  • 如何使用发布构建工件任务发布特定文件

    我正在使用 Visual Studio Build In Azure Pipeline 构建 C 应用程序 我的解决方案包含多个项目 Manager Web 和 Web API 我想分别发布两个单独的 Artifact ManagerWeb
  • Jest 的 `it.each()` 描述用于在引用 $predicate 时呈现箭头函数源代码

    问题定义 Jest 允许测试用例的数据用于it each s name via 前缀变量 下面的代码产生如下输出 PASS src array functions find pairwise spec ts findPairwise sho
  • 如何将 Bootstrap 与 Django 一起使用?

    我正在从 PHP 学习 python 和 Django 这一切都非常令人兴奋 我很乐意使用 Bootstrap 和 Django 来创建性感的网页 据我了解 我正在关注他们网站上的 Django 教程 Django 使用 应用程序 它可以包