bootstrap栅格化框架

bootstrap栅格化框架

1.Bootstrap引用方法:使用链接在线引用,或将dist文件夹下的文件复制到开发文件夹下引用。
2.Bootstrap栅格化系统:Bootstrap 的栅格化系统采用将页面布局分为12列,再根据页面宽度采用预定义类控制模块占用宽度比例的思想,实现响应式布局。
布局容器:container或container-fluid(占据100%窗口)先声明一个盒子作为容器,注意由于padding等属性,两个容器不能互相嵌套。
3.一个container可以包含多个row,每个row被默认分为12个列,每个row可以包含多个行。
4.列偏移:偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移,请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
例如:.offset-md-4 是把.col-md-4 往右移了四列格。
注意:对较小的屏幕设置的列偏移在屏幕放大时也适用。
在这里插入图片描述

5.媒体查询:使用 @media 查询,可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是设置设计响应式的页面,@media是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值