Bootstrap4.x学习笔记【二】
作者:互联网
布局系统
一、布局介绍
1. 对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;
2. 这两种样式是启用布局栅格系统最基本的要素;
3. .contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;
4. 容器布局可以嵌套,但一般来说,不推荐且很少使用到:
5. 自适应对应的响应式方式如下 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) { ... }
6. 从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。
二、栅格系统
栅格系统有点像田字格本子,大小整齐划一。
1. Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;
2. 基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);
3. 完全使用 flexbox 流式布局构建的,完全支持响应式标准;
4. 具体采用 div 容器的行、列和对齐内容来构建响应式布局;
三、栅格系统展示
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>布局系统</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="../css/bootstrap.css"> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察 --> <style> .row { border: dashed 1px red; } .col-sm,.col-sm-4,.col-sm-8,.col-sm-2 { border: solid 1px blue; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div> <br/> <!-- 采用.container-fluid,那么会 100%占用屏幕宽度 --> <div class="container-fluid"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div> <br/> <!-- sm是屏幕类型 之一--> <!-- 在.col-sm-*的星号位置,还可以强制设定每列所占有的栅格列; --> <div class="container-fluid"> <div class="row"> <div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</div> <div class="col-sm-2">第三列</div> </div> </div> <br/> <div class="container-fluid"> <div class="row"> <div class="col-sm-8">第一列</div> <div class="col-sm-4">第二列</div> </div> </div> <!-- 引入jQuery文件 --> <script src="../js/jquery-3.5.1.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>
四、栅格等级
栅格系统中有五个栅格等级,具体如下表:
超小屏幕 <576px |
小屏幕 >=576px |
中等屏幕 >=768px |
大屏幕 >=992px |
超大屏幕 >=1200px |
|
前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
列数 | 12列 |
如果同时是使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则;
使用.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-sm-4 col-xl-12 col-lg-6">第一列</div> <div class="c col-sm-4 col-xl-12 col-lg-6">第二列</div> <div class="c col-sm-4 col-xl-12 col-lg-12">第三列</div> </div> </div>
标签:media,第二列,笔记,学习,栅格,第三列,Bootstrap4,第一列,col 来源: https://www.cnblogs.com/Small-Windmill/p/13321158.html