title: Django 的母板及布局(Bootstrap)
tags: Django
---

Django 的母板及布局(Bootstrap)

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

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

• css
• content
• js

母板的形式：

{% block css %}{% endblock %}

    ...

{% block content %}{% endblock %}
{% block js %}{% endblock %}

子板中继承母板的内容

{% block css %}
     rel="stylesheet" href="/static/css/classcomments.css" />
{% endblock %}

{% block content %}
    
        子板中添加的内容...
    
{% endblock %}

{% block js %}
    子板自己的js
{% endblock %}

Bootstrap布局

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

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

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

     rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"/>
     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

     .pg-header .avata:hover .user-info  这个是hover后进行的操作

Bootstrap 响应式布局