刚开始想自己写工具时就被前台页面给吓倒了，专门去学习了bootstrap。
推荐学习参考freecodecamp 、 Bootstrap 教程 | 菜鸟教程、和官网。

在Django中使用bootstrap ，按照以往的套路，首先是安装。

1. 安装

pip install django-bootstrap3

2. setting中配置

INSTALLED_APPS = [
    'bootstrap3',
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

3. 下载bootstrap，放置项目根目录的static目录下

   
   
   Paste_Image.png

4. 页面上使用

{% extends '_base_create_update.html' %}
{% load static %}
{% load bootstrap3 %}
{% load i18n %}
{% block form %}
    <form action="" method="post" class="form-horizontal" id="pciForm">
        {% csrf_token %}
        <h3>{% trans 'Basic' %}</h3>
         {% bootstrap_field form.pro layout="horizontal" %}
         {% bootstrap_field form.job_name layout="horizontal" %}
         <div class="hr-line-dashed"></div>
         <div class="form-group">
           <div class="col-sm-4 col-sm-offset-2">
            <button class="btn btn-default" type="reset"> {% trans 'Reset' %}</button>
            <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
          </div>
        </div>
        </form>
{% endblock %}

页面效果

Paste_Image.png

使用菜单

{% load static %}
 <li class="nav-header">
     <div class="dropdown profile-element"> <span>
      ![](/static/bootstrap/img/profile_small.jpg)</span>
         <a data-toggle="dropdown" class="dropdown-toggle" href="#">
             <span class="clear">
                 <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong>
                 </span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
         <ul class="dropdown-menu animated fadeInRight m-t-xs">
             <li><a href="profile.html">Profile</a></li>
             <li><a href="contacts.html">Contacts</a></li>
             <li class="divider"></li>
             <li><a href="login.html">Logout</a></li>
         </ul>
     </div>
     <div class="logo-element">
         Chances
     </div>
 </li>
<li id="index">
      <a href="{% url 'index' %}">
        <i class="fa fa-dashboard"></i>
        <span class="nav-label">首页</span>
        <span class="fa arrow"></span>
    </a>
</li>
<li id="bigdata">
    <a href="index_bak.html">
        <i class="fa fa-th-large"></i>
        <span class="nav-label">造数据</span>
        <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level">
        <li><a href="{% url 'bigdata:testcase-list' %}">测试用例</a></li>
        <li><a href="{% url 'bigdata:testaction-list' %}">执行用例</a></li>
    </ul>
</li>
<li id="project">
    <a href="{% url 'projects:project-list' %}"><i class="fa fa-diamond"></i> <span class="nav-label">项目管理</span></a>

菜单的效果

Paste_Image.png