Django 的母板及布局(Bootstrap)

最新推荐文章于 2024-04-27 17:30:34 发布

dianyi3179

最新推荐文章于 2024-04-27 17:30:34 发布

阅读量151

点赞数 1

文章标签： python

原文链接：http://www.cnblogs.com/Python666/p/7107784.html

版权

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

Django 的母板及布局(Bootstrap)

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

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

css
content
js

母板的形式：

{% block css %}{% endblock %}
<body>
    ...
<body/>
{% block content %}{% endblock %}
{% block js %}{% endblock %}

子板中继承母板的内容

{% 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文件一致

    <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

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

<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 响应式布局

转载于:https://www.cnblogs.com/Python666/p/7107784.html

dianyi3179

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django 的母板及布局(Bootstrap)

title: Django 的母板及布局(Bootstrap)tags: Django---Django 的母板及布局(Bootstrap)Django 的母板是作为公共的部分,其他的页面都能利用这个页面，并在其基础上进行添加Django 的母板中可以嵌入3部分csscontentjs母板的形式：{% block css %}{% endblock %}&l...
复制链接

扫一扫