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. 数据库路由中间件MyCat - 源代码篇(14)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 对于表的dataNode对应关系,有个特殊配置即类似dataNode="distributed(d ...

  2. 推荐一款让你纵横Github的读码神器

    当我们想深入了解一个开源项目的时候,通常我们有以下几种姿势: 懒汉型 通过Web的方式,逐个的点击页面寻找和查看具体的源码内容. 优点:不依赖任何工具,无须任何额外的操作 缺点:效率低下,查找文件不便 ...

  3. IDEA如何找到接口的实现类

    如何找到接口的实现类 (IDEA))在ApplicationContext上右击 Diagrams ->show diagram 可以看到继承关系: 在ApplicationContext上右击 ...

  4. 493. Reverse Pairs(BST, BIT, MergeSort)

    Given an array nums, we call (i, j) an important reverse pair if i < j and nums[i] > 2*nums[j] ...

  5. CentOS 安装Perl环境

    参考博文:https://blog.csdn.net/weixin_40192129/article/details/78610974 vmware tools需要perl环境的支持 安装perl支持 ...

  6. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  7. Hexo瞎折腾系列(8) - 添加评论系统

    前言 Hexo的NexT主题本身就集成了一些评论系统,多说啊之类的已经关闭服务的略过不提,目前比较多人用的有畅言.来必力livere.Gitment.Gitalk.Disqus等. 我刚用的评论系统的 ...

  8. 使用echo命令向文件写入内容

    0.前言     本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符.     echo向文件中输出内容 ...

  9. 8.聚集函数 ---SQL

    一.AVG()函数 A VG()通过对表中行数计数并计算其列值之和,求得该列的平均值.A VG()可用来返回所有列的平均值,也可以用来返回特定列或行的平均值. 警告:只用于单个列 AVG()只能用来确 ...

  10. Jenkins权威指南

    https://jenkins.io/doc/   ---官网 https://www.cnblogs.com/leefreeman/p/4226978.html