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以上,高清或宽屏用户

原文地址:https://www.cnblogs.com/fannylovo/p/4823297.html