好吧，本來想單獨寫一章bootstrap的，但是前端確實沒什么好寫的，這里我們直接結合實際直接開搞吧。做WEB我習慣先把想要的頁面模板做完，然后再根據razar或者這里要用到的django template修改。美工確實不太好，P得一手爛圖，所以一般都用現成的開源框架，這里我們選用了現在很流行的bootstrap，由于懶得改CSS，所以全部用原生的代碼，基本不加修改。
這里在強調一下我們的目標，做一個簡單的開發錯誤查詢網站，同時需要提供相應錯誤的解決方案
帶著這樣的目標，我們大概需要如下幾個web頁面：
對的，灰常的簡單，頁面很少，先給出幾個頁面的圖吧（維護頁面后面站點管理部分會介紹）
這里頁面共有的 Header和Footer我們可以放到一個base.html頁面，內容頁通過模板繼承實現，具體代碼如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>模板- {% block title %}{% endblock %}</title>
<script src="/media/javascript/jquery-1.11.1.js"></script>
<script src="/media/bootstrap/js/bootstrap.js"></script>
<link href="/media/bootstrap/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="/media/image/icon.png"> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav nav-d"> <li> <a href="/">首頁</a> </li> <li> <a href="#">推薦</a> </li> </ul> <form class="navbar-form pull-right form-inline" action="/search/" > <div class="form-group"><input type="text" class="form-control" name="q" value="{{ q | default:'' }}" ></div> <div class="form-group"><button type="submit" class="btn btn-default" >Go</button></div> </form> </div> </div> </div> </div></nav><div class="spliter"></div><div class="container"> <div class="row"> <div class="col-md-3"> <div> </div> {% block widget-nav %} {% endblock %} </div> <div class="col-md-6"> <div> </div> {% block content %} {% endblock %} </div> </div></div><footer class="footer"> <p>XXXXXXXXXXXXXXXX | Powered By | <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP備XXXXXX號</a> | 京公網安備XXXXXXXX</p></footer></body></html>
前面我們已經定義了/media/作為靜態文件的根目錄（Django 開發環境搭建及配置），因此我們把bootstrap整個目錄放在/media/下面，并引入jquery.js, bootstrap.js以及bootstrap.css，注意jquery和bootstrap的順序，同時注意引入相對路徑。
首先說下bootstrap的部分，在大屏幕下顯示效果如上述三幅圖的所示，而切換到小屏幕時就會自動切換成下圖，這是響應式設計的帶來的優勢，可以使我們的站點自適應于各種類型的設備，具體原理和實現方式請自行閱讀bootstrap源碼吧。
再說下django template部分，django tempalte以{% %}表示指令，{{ }}表示變量，指令需要有相應的{%end-op%}塊，這個比起razar有些不方便。base.html中，我們定義了三個block，分別是
{% block title %}{% endblock %}
{% block widget-nav %}{% endblock %}
{% block content %}{% endblock% }簡單說來，和razar中的section一樣，在繼承的子模板中，如果定義了相同名稱的block，那么母版中的相應block之間的內容換完全被替換，上面三個從名字和對應的區域應該很容易看出是干什么的了吧。
block中詳細的實現部分因為涉及到了傳入的參數，因此我們在app的實現中來詳細討論。
PS.
新聞熱點
疑難解答
