WebPage-Bootstrap框架(container类,container-fluid类,栅格系统)

1.Bootstrap

        Bootstrap为页面内容和栅格系统包裹了一个.container容器,框架预先定义类

1.1container类

        响应式布局容器的宽度

手机-小于768px 宽度设置100%;

平板-大于等于768px 设置宽度为750px

桌面显示器-大于等于992px 设置宽度 970px

大屏幕显示器-大于等于1200px 宽度设置为 1170px;

设置宽度比屏幕尺寸小,留取左右空白居中对齐;

在只需在引入class对应的类即可实现屏幕媒体查询

1.2container-fluid类

        流式布局容器百分百宽度,占据全部视口容器,适合单独的移动开发;

1.3栅格系统

        视口宽度平均分为12列,不同的内容在不同的列区域内。等比列缩放效果实现。通过累加对应的类名来进行实现不同屏幕下占列内容多少。

        具体参考Bootstrap来进行实现。

        使用框架来快捷的实现媒体查询,、-响应式布局 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值