将 Django 作为 bootstrap 的后台框架

来源：互联网发布：dnf闪凌网络哪里买编辑：程序博客网时间：2024/05/22 06:51

将 Django 作为 bootstrap 的后台框架

作者: Desmond Chen, 发布日期: 2014-07-06, 修改日期: 2014-07-06

如果你想在Django中使用Bootstrap作为前台框架, 但又不知道如何将他们整合到一起的话, 那么本篇我们就介绍一下使用django自带的staticfiles app将Bootstrip整合到Django中:

首先我们需要在GetBootstrip.com下载Bootstrip. 然后我们解压缩zip文件, 将加压缩的文件放入项目中. 接着在settings.py的STATICFILES_DIRS中添加bootstrip目录. 最后我们使用以下base.html为基础:

    <!DOCTYPE html>    <html lang="en">      <head>        <meta charset="utf-8">        <title>Bootstrap | {% block title %}Untitled{% endblock %}</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta name="description" content="">        <meta name="author" content="">        <!-- Le styles -->        <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">        <style>          body {            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */          }        </style>        <link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->        <!--[if lt IE 9]>          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>        <![endif]-->        <script src="{{STATIC_URL}}js/jquery-1.8.1.min.js" type="text/javascript"></script>        {% block extrahead %}        {% endblock %}        <script type="text/javascript">        $(function(){        {% block jquery %}        {% endblock %}        });        </script>      </head>      <body>        <div class="navbar navbar-inverse navbar-fixed-top">          <div class="navbar-inner">            <div class="container">              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>              </a>              <a class="brand" href="/">Bootstrap</a>              <div class="nav-collapse collapse">                <ul class="nav">                  <li class="active"><a href="/">Home</a></li>                  <li><a href="#about">About</a></li>                  <li><a href="#contact">Contact</a></li>                </ul>              </div><!--/.nav-collapse -->            </div>          </div>        </div>        <div id="messages">          {% if messages %}            {% for message in messages %}              <div class="alert alert-{{message.tags}}">                <a class="close" data-dismiss="alert">×</a>                {{message}}              </div>            {% endfor %}          {% endif %}        </div>        <div class="container">        {% block content %}        {% endblock %}        </div> <!-- /container -->      </body>    </html>

有了以上base.html之后, 我们就可以按照自己的需求修改并获得最佳效果了.

原文链接: http://www.weiguda.com/blog/52/

0 0