计算机网络/计算机科学与应用/系统/运维/开发

Bootstrap4 布局基础

一、断点

超小型  xs  <576px

小型   sm  >=576

中型   md  >=768

大型   lg  >=992

超大型  xl  >=1200


二、布局容器

container容器/container-fluid容器/container-{断点规格}容器

1、container

用于固定宽度并支持响应式布局容器

<div class="container">

</div>

2、container-fluid

保持width为100%、占据全部视口的容器,它在所有的断点处均保持width为100%

<div class="container-fluid">

</div>

3、container-{断点规格}容器

container容器和container-fluid容器的区别:

主要体现在是否存在一个随视口宽度变化而变化的margin值

container容器所谓的自适应是通过margin值的阶段性变化来实现的

container-fluid容器并不关注设备的屏幕尺寸,它始终保持100%宽度


三、弹性布局


四、网格系统

划分12列


无才无以立足,不苦不能成才。

评论

^