bootstrap前端框架的容器简介

bootstrap是js前端开发框架,是基于HTML、css、javascript的,swiper是js的库
bootstrap有响应式布局的解决方案是他的亮点!!!
框架是一套规范就是研发的时候必须按照原有的写。
bootstrap栅格系统是bootstrap的核心一部分
bootstrap栅格系统:
bootstrap将页面横向分为12等分,按照12等分定义了适合不同宽度等分的样式类,这些样式
类组成了一套响应式、移动设备优先的流式栅格系统:
容器默认有15的padding值
浏览器宽度大于1200容器宽度为1170,浏览器宽度小于1200大于992容器宽度为970,如果浏览器宽度小于992大于768容器宽度为750,
如果浏览器宽度小于768容器宽度为970
1.col-lg-大于1200排成一行,小于1200分别占一行
2.col-md-大于992排成一行,小于992分别占一行
3.col-sm-大于768排成一行,小于768分别占一行
4.col-xs-始终排列成一列
在bootstrap中如果不用bootstrap的动态效果直接用css文件就行
引入js之前要先引入jQuery因为js依赖于jQuery
如果想做到一个界面pc端、平板、手机都兼容的话
在加上meta:vp然后table,代码:

bootstrap容器分为:

响应式固体宽体的容器:
container:
宽度采用浏览器:
1170
970
750
100%
容器里面系统用:
.col-lg-3{col-lg-3}*4

col-lg-3

col-md-3

col-sm-3

col-xs-3

col-lg大于1200在一行,小于1200的话各占一行
lg小于1200先变成独立一行然后就是md变成独立一行接下来就是sm变成独立一行接下来就是xs
xs是始终不变的
这些功能的出现主要是为了左右排排不下就上下排然后让信息正常显示!!!
流体布局容器:
container-fluid
宽度采用浏览器100%

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值