给django增加bootstrap前端框架

来源：互联网发布：mac系统和windows切换编辑：程序博客网时间：2024/06/10 11:15

django虽好,就是前端太难看了..

于是找到两个专门对付前端的模块

1.django-bootstrap-toolkit

主页:https://github.com/dyve/django-bootstrap-toolkit

用法主要参考里面的demo,基本如下:

1) settings.py

1
2
3
4
5
INSTALLED_APPS = (
    ..
    'bootstrap_toolkit',
    ..
)

在模版中需要添加下面东西:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmllang="en">
 
{%loadbootstrap_toolkit%}
{%blockextra_head%}
    {{form.media}}
{%endblock%}
 
<head>
    <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
    <title>氪金眼</title>
    {%bootstrap_stylesheet_tag%}
    {%bootstrap_stylesheet_tag"responsive"%}
    <styletype="text/css">
        body{
            padding-top:8px;
            bgcolor:"#CCCCCC"
        }
    </style>
 
        <!--[ifltIE9]>
    <scriptsrc="//www.ysgh.net/myfiles/html5.js"></script>
    <![endif]-->
    <scriptsrc="//www.ysgh.net/myfiles/jquery.min.js"></script>
    {%bootstrap_javascript_tag%}
</head>
 
<body>
<divclass="navbar navbar-fixed-top">
    <divclass="navbar-inner">
        <divclass="container">
            <aclass="brand"href="/">氪金眼</a>
            <ulclass="nav">
                <li><ahref="http://www.ysgh.net"class="">返回首页</a></li>
                <li><ahref="http://www.ysgh.net"class="">工具说明</a></li>
            </ul>
        </div>
    </div>
</div>        
 
</div>
    <hr>
    <br><br>
    <divclass="container">
        {%bootstrap_messages%}
    </div>
 
    <p>{{result}}</p>
    <formclass="form-horizontal"action=""method="post">
        <table>
            {%csrf_token%}
            {{form|as_bootstrap:"horizontal"}}
        </table>
        <pclass="form-actions">
            <inputtype="submit"value="开始监视!"class="btn btn-primary">
        </p>
    </form>
 
    alluser:<br>
    <table>
        {{alldata}}
    </table>
 
</body>
</html>

自己摘着看吧..

注意这里的

<div class=”container”>
{% bootstrap_messages %}
</div>

需要在view里面设置message,如下:

1
2
3
4
5
6
7
fromdjango.contribimportmessages
 
deftestmail(request):
  ...
  messages.success(request,'服务器运行正常!.')
  ...
  messages.error(request,'由于下列原因,这个URL不能被监听.<br>'+str(e))

更多的还是参考demo,毕竟是所见所得的东西.

2.django-admin-bootstrapped

这个就更简单了,参考https://riccardo.forina.me/bootstrap-your-django-admin-in-3-minutes/

没有任何需要配置的.

上面两个记得要 manage.py collectstatic

否则css和js可能不正常

0 0