Bootstrapp附加功能

时间:2018-11-26 15:58:38

标签: javascript css django django-bootstrap3 django-bootstrap4

如果我将代码从W3Schools复制到我的Web服务器,则只要我引用脚本的CDN路径,“粘滞”菜单就起作用 样式表。

<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>

如果我将其更改为我下载到服务器上的Bootstrap文件的位置,则它将无法正常工作,尽管所有其他引导程序 样式和javascript函数在引用本地文件时有效。我也尝试过从Bootstrap下载最新版本。

很抱歉,我可能缺少明显的东西,但是可以下载使其正常工作所需的功能和样式吗?

1 个答案:

答案 0 :(得分:1)

我建议您尝试以下操作:首先,在这种情况下,您需要设置静态文件Bootstrap(css,js等):

static
....Bootstrap
......CSS
.........bootstrap.min.css
......JS
.........jquery-3.3.1.slim.min.js
.........popper.min.js
.........bootstrap.min.js
....etc
..etc

在这种情况下,我们将用于静态的posible structure文件夹放入该文件夹中,该文件夹包含内容CSS的bootstrap的js文件。 接下来是在模板中设置CSS和js文件的链接,如下所示:

{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'Bootstrap/js/jquery-3.3.1.slim.min.js' %}"></script>
    <script src="{% static 'Bootstrap/js/popper.min.js' %}"></script>
    <script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
  </body>
</html>

现在您需要在settings.py上使用它。

..
..
..
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/static/',
]
...
..

仅用于加载启动模板或您模板中的其他静态文件,请尝试好运。

要下载Bootstrap4,3..etc ..,请访问官方网站:

Official site Bootstrap