赞
踩
Container容器
Bootstrap原生带三种container宽度规范:
4、下面的表格描述了container在不同屏幕的max-width规范,以及.container、.container-fluid的断点区别
.container 超小屏幕 <576px
.container-sm 小屏幕 >=576px
.container-md 中等屏幕 >=768px
.container-lg 大屏幕 >=992
.container-xl 超大屏幕 >=1200px
.container-fluid 100%
5、All-in-one(一个容器的定义)
默认的.container class是一个响应式容器,它有固定宽度和最max-width设置,并支持响应式断点,你应该用它作为整个DIV的最外层容器,如下
<div class="container">
<!-- 网页内容写在这里面 -->
</div>
6.流式布局
.container-fluid则支持全屏的流式布局,如下使用
<div class="container-fluid">
...
</div>
7.响应式外部容器
Bootstrap v4.5带来了一组全新的响应式外部容器,它允许在指定的屏幕下定义100%宽(这更适合移动等场景)max-width属性会在不断的断点有表现不同,比如.container-sm则只在sm屏幕下显示100%宽,其它断点包括.container-md、.container-lg、.container-xl、代码示任免:
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
.container容器可以被嵌套,但是大多数布局并不需要这么做(最少层次的嵌套构建出的网页更优雅),其呈现效果和使用方法如下所示:
<div class="container-fluid">
...
</div>
使用.container-fluid类,可以使div宽度扩展到整个宽度(如果没有其它CSS容器包含,则应是浏览器运行时的宽度,否则是父容器中允许的最大宽度,一般视为100%宽度),示例效果和代码使用方法如下:
<div class="container-fluid">
...
</div>
希望可以帮助到你们。
以上就是我的分享,都是一些很基本的内容,新手上路,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。