• BootStrap框架及其他框架布局技术


     负边距实现两栏,三栏布局

    clear:both 清除浮动

    两栏式:
    margin-right:-250px 右边内容覆盖左边250px内容
    margin-right:250px  在左边套用一个div,然后距离后边预留出250px,这样右边覆盖的250px正好布局两栏


    三栏式:
    同理两栏式后
    margin-left:250px  将最左的内容左浮动,留出250px给自己,同时中间的内容自适应,三栏式形成


    圣杯布局:
    特色,先写中间的部分,圣杯杯体部分,再写两边的左右部分,将父元素定位:padding:0 200px 0 250px

    左边:margin-left:-100%  左边的部分相对中间的部分居左覆盖
    右边:margin-right:-200% 右边部分相对中间部分居右
    中间:position:relative 相对定位,将左边部分移除中间覆盖部分
    三栏式布局形成



    960栅格式布局法:
    在1024*768的分辨率下,当宽为960时其分辨率效果达到最好
    通常有12列,16列,24列布局法

    12列式: 间距20px,每格60px,三格式布局
    16列式:间距20px,每格40px,四格式布局
    24列式:间距10px,每格30px,多格式布局



    BootStrap框架是目前应用最广泛的框架之一,是基于JQury的一种框架技术

    container容器,在一个body中,可以并排多个,但一般情况下只有一个,需要固定宽度
            fluid是100%宽度

    row行,必须写在container中,否则会跑出页面

    col列,col-xs-1,在超小屏幕小,占1列
            col-xs-push-2,在超小屏幕下,根据兄弟元素,推2格
            col-xs-pull-2,在超小屏幕下,根据兄弟元素,拉2格
            col-xs-offset-2,针对前后定位后的相对前一元素,推动2格

    xs超小屏幕  像素小于700,手机    
    sm小屏幕       像素在768---900多之间,平板
    md中等屏幕    像素在900--1200之间,普通用户
    lg超大屏幕    像素在1200以上,高清或宽屏用户

  • 相关阅读:
    webpack 多页面支持 & 公共组件单独打包
    svn版本控制方案:多分支并行开发,多环境自动部署
    前端模块系统的演进
    gitignore 不起作用的解决办法
    js 中文长字符截短&关键字符隐藏 自定义过滤器
    UNION和UNION ALL
    @getMapping和@postMapping,@RestController
    java加密
    枚举浅谈
    NPE是什么
  • 原文地址:https://www.cnblogs.com/fannylovo/p/4823297.html
Copyright © 2020-2023  润新知