将 Django 作为 bootstrap 的后台框架

最新推荐文章于 2024-08-12 08:37:17 发布

根红苗正的码农

最新推荐文章于 2024-08-12 08:37:17 发布

阅读量2.8k

点赞数

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