Contents:

Django18初体验


948 浏览 5 years, 4 months

17.19 添加bootstraps到django

版权声明: 转载请注明出处 http://www.codingsoho.com/

Bootstrap CDN

CDN = content of network

The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css)" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css)" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js)" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

创建 base.html

拷贝该例子的源代码 http://getbootstrap.com/examples/navbar-static-top/

在文件头添加 CDN或者使用文件
将css/js/img文件下载到本地保存到static_in_pro

  • bootstrap.min.css
  • navbar-static-top.css
  • bootstrap.min.js
  • ie10-viewport-bug-workaround.js

将{% load staticfiles %} 添加到base.html开头，改变css/js/img的链接

{% load staticfiles %}
    <!-- <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- <link href="navbar-static-top.css" rel="stylesheet"> -->
    <link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">

{% load staticfiles %}
    <script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js)"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>

执行 python manage.py collectstatic