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,代码:
响应式固体宽体的容器:
container:
宽度采用浏览器:
1170
970
750
100%
容器里面系统用:
.col-lg-3{col-lg-3}*4
col-lg大于1200在一行,小于1200的话各占一行
lg小于1200先变成独立一行然后就是md变成独立一行接下来就是sm变成独立一行接下来就是xs
xs是始终不变的
这些功能的出现主要是为了左右排排不下就上下排然后让信息正常显示!!!
流体布局容器:
container-fluid
宽度采用浏览器100%