Django 的母板及布局(Bootstrap)

Posted on

Django 的母板及布局(Bootstrap)

Django 的母板是作为公共的部分,其他的页面都能利用这个页面，并在其基础上进行添加

Django 的母板中可以嵌入3部分

  • css
  • content
  • js

母板的形式：

1
2
3
4
5
6
{% block css %}{% endblock %}
<body>
    ...
<body/>
{% block content %}{% endblock %}
{% block js %}{% endblock %}

子板中继承母板的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
{% block css %}
    <link rel="stylesheet" href="/static/css/classcomments.css" />
{% endblock %}
{% block content %}
    <body>
        子板中添加的内容...
	<body/>
{% endblock %}
{% block js %}
    子板自己的js
{% endblock %}

Bootstrap布局

文件中有两种，一种是bootstrap.css,这种是用于调试的文件。另一种是min,是经过压缩的版本，最后是应用于生产环境的。

Bootstrap主要应用于css布局，丰富的组件。图标，在图标不够用的情况下，使用font-awesome，使用方法是一样的。

引入Bootstrap和Font-awesome的方法，和引入css文件一致

1
2
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" />

后台管理的布局

页面布局

页面的整体布局分为3部分，头部，左侧菜单，右侧内容

css样式的编写

关键点：

  • 头部使用min-width设置窗口变小的时候出现滚动条
  • line-height设置居中和整体的高度是一致的
  • text-alian:center 设置水平居中
  • 左侧菜单设置绝对定位absolute后可以设置山下左右的具体位置，这里是让菜单栏一直在左侧
  • 为了达到菜单栏一直在左侧，右侧内容content设置overflow:scroll,右侧内容溢出后出现滚动条
  • 内联标签不能用padding设置成inline block
  • 个人信息div使用z-index 设置的值高于content
  • 父标签设置的是relative 子标签就可以用absolute进行定位
  • hover只对标签本身及其子元素生效 上面的设置了none
    1
    .pg-header .avata:hover .user-info  这个是hover后进行的操作
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        .pg-header{
            height: 48px;
            min-width: 1190px; /*宽度默认是100%小于1190px出现左右滚动条 */
            background-color: dodgerblue;
            line-height: 48px;/*设置居中*/
        }
        .menus{
            width: 200px;
{#            float: left;#}
            position: absolute;/*绝对定位*/
            background-color: #dddddd;
            border-right: 1px solid #46b8da;
            left:0;
            top: 48px;
            bottom: 0;
        }
        .content{
            float: left;
{#            background-color: red;#}
            position: absolute;
            left:200px;
            right: 0;
            top: 48px;
            bottom:0;
            overflow: scroll;/*内容溢出后会滚动*/
            z-index: 99;/*主要是要低于个人信息*/
        }
        .pg-header .logo{
            width: 199px;
            text-align: center;
            border-right: 1px solid gray;
            color: white;
            font-size: 18px;
        }
        .pg-header .rmenus a{
            display: inline-block;
            padding:0 15px;/*内联标签不能用padding 设置成inline block*/
            color: white;
        }
        .pg-header .avata{
            padding: 0 20px;  /*设置左右的边距*/
        }
        .pg-header .avata img{
            border-radius: 50%;/*设置头像为圆形*/
        }
        .pg-header .avata .user-info{
            display: none;
            background-color: white;
            border: 1px solid #dddddd;
            position: absolute;/*父标签设置的是relative 子标签就可以用absolute进行定位*/
            top: 48px;
            right: 3px;
            width: 200px;
            z-index: 100;  /*要高于content*/
        }
        .pg-header .avata:hover .user-info{
            display: block;/*hover只对标签本身及其子元素生效  上面的设置了none */
        }
        .pg-header .avata .user-info a{
            display: block; /*设置成块级标签 效果是上下*/
        }
        .pg-body .menus a{
            display: block;
            padding:10px 5px;
        }
    </style>

Bootstrap 响应式布局

© 2018 Peter's Blog Center All Rights Reserved.
Theme by hiero