您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

对bootstrap的container基本认识

时间:09-07来源:作者:点击数:
城东书院 www.cdsy.xyz

01首先

bootstrap中,container容器是一个基本的概念,刚开始看的时候,有一点模糊。不知道为啥要区分这么多。所以,在理解后,发现其实非常简单,这里对其进行一个简单的总结。

bootstrap的文档提供了这样一个表格:

干什么用的呢?

其实就是指定一个容器,在到达不同的指定宽度之前,始终保持100%的宽度。bootstrap中把这个指定的宽度,叫做断点(breakpoint)。

其实,就是min-width。

02.container.container-fluid

.container

bootstrap中,首先引出.container.container-fluid这两个常用的class定义。

.container指定了,在容器的宽度,小于576px的时候,始终保持100%的宽度,

但是如果大于等于576px:

此时的容器最小宽度就是540px,即(content:510px + padding:15x2)。如果设备宽度增加,容器的宽度也会增加,但是,margin值也会增加,如:

.container-fluid

.container-fluid则将指定容器的宽度在任意设备上显示,都是100%的宽度。

03这两个属性有什么用?

发现,这两个class起到的样式效果易于了解。但是,有什么作用呢?

其实,这是bootstrap的“响应式布局”和“移动端优先”体现。

几乎所有响应式站点都是这样,当页面在屏幕较大的时候,有margin值,更加符合人们的视觉习惯:

而当页面小到一定程度的时候,就不需要两侧的margin,影响我们的视觉习惯。此时,.container类就起到了作用,

然后就好理解了

除了.container.container-fluid,bootstrap还预定义了:

  • container-sm
  • container-md
  • container-lg
  • container-xl

这些预定义的class只是为了帮我们实现对于最小设备尺寸要求的不同的情况下,让容器宽度的显示规则更加的灵活。

例如,我希望我的电商平台永远是100%设备宽度,我就应该使用.container-fluid这个class; 再例如,我希望我的博客平台在电脑屏幕上有margin,但是只要小于ipadpro(1024px)的屏幕设备,一概100%屏幕宽度显示,此时我最合适的选择就是,使用.container-xl这个class,因为它在1140px的屏幕下都是全屏显示,超出这个宽度,就会有margin值。

需要注意的是,其中,container-sm的效果和container基本是一样的。

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐