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

Django 的母板及布局(Bootstrap)的更多相关文章

  1. [布局]bootstrap基本标签总结2

    缩略图 <div class="container"> <div class="row"> <div class="co ...

  2. [布局] bootstrap基本标签总结

    文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  3. django的母板系统

    一.母板渲染语法 1.变量 {{ 变量 }} 2.逻辑 {% 逻辑语 %} 二.变量 在母板中有变量时,母板引擎会去反向解析找到这个传来的变量,然后替换掉. .(点),在母板中是深度查询据点符,它的查 ...

  4. django的母板和继承

    Django模板中只需要记两种特殊符号: {{  }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 母板 <!DOCTYPE html> & ...

  5. django管理界面使用与bootstrap模板使用

    一.bootstrap模板使用 1.去bootstrap官网找一个合适的模板,下载下来,右键另存为即可 bootstrap官网---->bootstrap中文文档3-------->起步- ...

  6. Django——静态文件（如bootstrap）的配置

    静态文件如CSS, javascript(如bootstrap), 图片等文件在django中的配置官方文档写的比较模糊,自己通过实验验证后并整理如下,以防遗忘,目前只整理了关于本地开发中的设置方式, ...

  7. rem 自适应布局 bootstrap 移动端适配

    移动端适配用:rem 自使用布局用:bootstrap

  8. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  9. 响应式布局 Bootstrap（01）

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

随机推荐

  1. java 同时安装多版本问题（转）

    描述:刚到新公司,自己安装了jdk1.7和开发工具myeclipse10,但是由于公司项目的需要(具体原因不详细描述了),需要使用myeclipse6.5和jdk1.6.于是在切换jdk1.7和jdk ...

  2. [题解]luogu_P2155_BZOJ_2186沙拉公主的困惑

    题意求1~N!中与M!互质的数的个数, 首先证明gcd(a,b)=1时gcd(a-kb,b)=1 gcd(a,b)=1 gcd(a%b,b)=1 gcd(a-kb,b)=1 即a-kb与b互质 这样由 ...

  3. Jmeter （二十六）逻辑控制器 之 Module Controller and Include Controller

    Module Controller ---模块控制器 测试计划设置“独立运行没每个线程组” 线程组2中使用Module Controller执行线程组1中的Sampler: 紧接着,将线程组1disa ...

  4. Django-Rest-Framework的解析器和渲染器

    Django-Rest-Framework的解析器和渲染器  restful framework 解析器 解析器的作用就是服务端接收客户端传来的数据,把数据解析成自己想要的数据类型的过程 本质就是对请 ...

  5. [Andoird]Andoird之Log

    一.Log Android中的日志工具类是 Log(android.util.Log),这个类中提供了如下几个方法来供我们打印日志. Log.v() 这个方法用于打印那些最为琐碎的,意义最小的日志信息 ...

  6. 练习三十二：用python实现:按相反的顺序输出列表的每一位值

    用python实现:按相反的顺序输出列表的每一位值 1. 使用list[::-1] list1 = ["one","two","three" ...

  7. eclipse Java项目如何修改包名

    选中你的包名右键-->Refactor -->Rename -->勾选以下两个选项(必须选两个,只选第一个,是新增包) 修改以后,同时要修改.xml..properties文件内的引 ...

  8. springmvc httprequest 使用@Autowired注解

    springmvc httprequest 使用@Autowired注解我一直有个疑问,就是注解后每次的httprequest 是不是都一样的了,然后会不会引发多线程问题? 代码如下: import ...

  9. mysql非常全的和完整的总结

    (1)数据类型 类型 备注 tinyint/smallint/mediumint/int/bigint 1B/2B/3B/4B/8B float/double 单精度/双精度浮点型 decimal 不 ...

  10. <img/>标签属性

    属性        属性值               描述 src            url               图像的路径 alt             文本            ...