Bootstrap4--Contains容器
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: VS
作者:小益
撰写时间:2021年6月8日
一、介绍container容器:
container容器是窗口布局的最基本元素,我们推荐所有样式都定义在.container
或.container-fluid
容器之中,这是启用整个栅格系统必不可少的前置条件, 它们分别对应选择一个响应式的、固定宽度的容器,或者选择一个流式自适应浏览器或容器最大合法宽度的窗口(意味着任何时候它的宽度总是100%)
下面的表格描述了container在不同的屏幕的 max-width
(最大宽度)
规范,以及 .container
、 .container-fluid
的断点区别
二、解释表中各个类的意思
.container:
当屏幕小于576px时,占满屏幕百分之百,当屏幕为≥576px时,则占满屏幕的540px并居中,当屏幕为≥768px时,则占满屏幕的720px并居中,当屏幕为≥992px,则占满屏幕的960px并居中,当屏幕为≥1200px时,则占满屏幕的1140px并居中
.container-sm:
意思跟.contains一样
.container-md:
当屏幕小于576px时,占满屏幕百分之百,当屏幕为≥576px时,则占满屏幕的百分之百,当屏幕为≥768px时,则占满屏幕的720px并居中,当屏幕为≥992px,则占满屏幕的960px并居中,当屏幕为≥1200px时,则占满屏幕的1140px并居中
.container-lg:
当屏幕小于576px时,占满屏幕百分之百,当屏幕为≥576px时,则占满屏幕的百分之百,当屏幕为≥768px时,占满屏幕百分之百,当屏幕为≥992px,则占满屏幕的960px并居中,当屏幕为≥1200px时,则占满屏幕的1140px并居中
.container-xl:
当屏幕小于576px时,占满屏幕百分之百,当屏幕为≥576px时,则占满屏幕的百分之百,当屏幕为≥768px时,占满屏幕百分之百,当屏幕为≥992px,占满屏幕百分之百,当屏幕为≥1200px时,则占满屏幕的1140px并居中
.container-fluid:
屏幕不管在多少像素下始终为百分之百
三、代码写法和用途
默认的.container是一个响应式容器,它有固定宽度和最max-width设置,并支持响应式断点,使用如下:
这是一组响应式外部容器,它允许在指定的屏幕下定义100%宽(这更适合移动等场景),max-width属性会在不断的断点有表现不同,比如.container-sm则只在sm屏幕下显示100%宽,其他断点包括.container-md、.container-lg、.container-xl,使用如下:
.container-fluid支持全屏的流式布局,使用如下:
以上就是我的分享,请多多指教