Bootstrap布局系统
阅读 (395)一、布局介绍
- 说明
-
对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;
-
这两种样式是启用布局栅格系统最基本的要素;
-
.contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;
-
容器布局可以嵌套,但一般来说,不推荐且很少使用到;
-
自适应对应的响应式方式如下 media:
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
-
从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。
二、栅格系统
- 说明
-
Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;
-
基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);
-
完全使用 flexbox 流式布局构建的,完全支持响应式标准;
-
具体采用 div 容器的行、列和对齐内容来构建响应式布局;
-
首先,实现一个一行三列的布局,通过浏览器切换屏幕测试;
<div class="container"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div>
-
为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察;
-
row 表示一行,.col-*来表示一列,实现了智能平分三列;
-
sm 表示屏幕类型,下面课程会详细讲解;
-
如果我们采用的是.container-fluid,那么会 100%占用屏幕宽度;
<div class="container-fluid"> ... </div>
-
在.col-sm-*的星号位置,还可以强制设定每列所占有的栅格列;
```html
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">第一列</div>
<div class="col-sm-4">第二列</div>
<div class="col-sm-4">第三列</div>
</div>
</div>
```
-
所占的栅格位正好是 12 列,超过 12 列则会换行,小于 12 列则不能 100%;
-
以上智能计算和强制设置栅格位都是等宽的,我们也可以设置不对称的;
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">第一列</div>
<div class="col-sm-4">第二列</div>
</div>
</div>
三、栅格等级
- 说明
-
栅格系统中有五个栅格等级:
超小屏幕<576px 小屏幕>=576px 中等屏幕>=768px 大屏幕>=992px 超大屏幕>=1200px 前缀 .col .col-sm- .col-md- .col-lg- .col-xl- 列数 12列 12列 12列 12列 12列 -
如果同时是使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则:
<div class="container"> <div class="row"> <div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div> <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div> <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div> </div> </div>
-
剩余平分:栅格系统支持只指定其中一种或几种,其它随机的方式,指定数字奇偶均可:
<div class="container"> <div class="row"> <div class="c col-sm">第一列</div> <div class="c col-sm-7">第二列</div> <div class="c col-sm">第三列</div> </div> </div>
-
可以通过两个或以上来实现不同设备不同比例的混合布局:
<div class="container"> <div class="row"> <div class="c col-sm-8 col-xl-12">第一列</div> <div class="c col-sm-4 col-xl-12">第二列</div> </div> </div>
-
等宽多列:在希望列换行的位置,通过插入一个
.w-100
来创建跨多行的等宽列,即分行操作:<div class="container"> <div class="row"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="w-100"></div> <div class="c col">第三列</div> <div class="c col">第四列</div> </div> </div>
-
等宽一列:如果强制设置了 所跨的栅格数目(如:col-3 数值),那切割后,将不会自动填充;
<div class="container"> <div class="row"> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="w-100"></div> <div class="c col-3">第三列</div> <div class="c col-3">第四列</div> </div> </div>