Django 和 Bootstrap：脱机重新加载页面问题 (netdna.bootstrapcdn.com)

Question

我有一个 Django 项目有效。我在 base_html:

中使用了 "bootstrapped"

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

在settings.py:

INSTALLED_APPS = (
    'bootstrap_toolkit',
    'bootstrap3',
    'django_admin_bootstrapped.bootstrap3',
    'django_admin_bootstrapped',             
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'jquery',
    'jquery_ui',
    'homepage',
    'simpleapp',
)

完美，如果我使用我的 buttons&co 在页面之间浏览。它似乎是自举的，一切正常！

但是...

我注意到，如果我的电脑处于离线状态，（仅）当我 重新加载 页面（或者我在某些 js parent.window.location.reload 中使用时（ true);), 它似乎不是自举的！此外，我注意到当我在线并重新加载页面时，浏览器会搜索 netdna.bootstrapcdn.com... 但这不是我的目标：我必须创建一个项目离线。

如何解决重新加载问题？

Answer 1

如果您的浏览器没有启用缓存，它不会存储从 CDN 下载的 CSS 和 JS。为避免这种情况，

在浏览器中启用缓存
下载缩小的 bootstrap css 和 js 并将它们放在项目的静态目录中。然后link给他们点赞<script src="{% static "bootstrap.min.js" %}"></script>。如果你走这条路，别忘了发布你的静态文件。

Answer 2

django-bootstrap3 的默认设置指向 CDN 作为 documented:

# Default settings
BOOTSTRAP3 = {

    # The URL to the jQuery JavaScript file
    'jquery_url': '//code.jquery.com/jquery.min.js',

    # The Bootstrap base URL
    'base_url': '//netdna.bootstrapcdn.com/bootstrap/3.3.1/',
    ...

您应该将相关文件存储在您的 static 目录中，并设置 bootstrap3 的 jquery_url 和 base_url 设置。例如：

BOOTSTRAP3 = {

    # The URL to the jQuery JavaScript file
    'jquery_url': '/static/js/jquery.min.js',

    # The Bootstrap base URL
    'base_url': '/static/css/',

    # The complete URL to the Bootstrap CSS file (None means derive it from base_url)
    'css_url': '/static/css/bootstrap.min.css',

    # The complete URL to the Bootstrap CSS file (None means no theme)
    'theme_url': '/static/css/bootstrap.theme.min.css',

    # The complete URL to the Bootstrap JavaScript file (None means derive it from base_url)
    'javascript_url': '/static/js/bootstrap.min.js',

另一种方法是将 css 和 js 位置硬编码到您的模板中，例如：

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'css/bootstrap.theme.min.css' %}" rel="stylesheet" type="text/css"/>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

Django 和 Bootstrap：脱机重新加载页面问题 (netdna.bootstrapcdn.com)

Django and Bootstrap: offline reload page issue (netdna.bootstrapcdn.com)

django

offlineapps

twitter-bootstrap-3