Bootstrap4的栅格系统详解和与3的异同

最新推荐文章于 2024-06-15 23:06:25 发布
最新推荐文章于 2024-06-15 23:06:25 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： Bootstrap3、4 文章标签： bootstrap4 bootstrap3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969777/article/details/105431347
版权

一、大小尺寸

bootstrap4的栅格系数

与bootstrap3相比多了一个576px的断点，其表示为.col-
在这里插入图片描述

bootstrap3的栅格系数

在这里插入图片描述
下面为了简写我就用b4代表bootstrap4了

二、容器

b4的容器与b3的容器差别不大，唯一有差别的是b4的固定容器（container）可以增加断点，如.container-{breakpoint}，其含义就是不同的断点就对应着不同的媒体查询
如图：
在这里插入图片描述

三、原理

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准

四、列的布局方式

列的平均分（col、col-sm、col-md、col-lg、col-xl）

<div class="container">				/*固定容器*/
  <div class="row">
    <div class="col-lg">			/*在lg模式下平均分成3份，col、col-sm、col-md、col-xl也是相同的意思*/
      三分之一空间占位
    </div>
    <div class="col-lg">
      三分之一空间占位
    </div>
    <div class="col-lg">
      三分之一空间占位
    </div>
  </div>
</div>
结果图:

在这里插入图片描述
但是当使用col、col-sm、col-md、col-lg、col-xl的时候列数就不一定是12列了，如：(这里就不写代码了)
在这里插入图片描述
当然还有另一个例子

<div class="container">
  <div class="row">
    <div class="col">						/*剩余平均分*/
      1 of 3
    </div>
    <div class="col-6">						/*在col-模式下占据6列*/
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">						/*剩余平均分*/
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">						/*奇偶不影响*/
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

col-{breakpoint}-auto

使用 col-{breakpoint}-auto ，可以实现根据其内容的自然宽度来对目标列进行大小调整。.

<div class="container">
  <div class="row">
    <div class="col">						/*剩余的列数平均分*/
      1 of 3
    </div>
    <div class="col-md-auto">				/*该列的大小为内容的宽度*/
      可变宽度内容自由伸张，左右宽度不变。
    </div>
    <div class="col">						/*剩余的列数平均分*/
      3 of 3
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

五、行的布局方式

行的分割（w-100类）

这里利用的是w-100类，意思是width：100%，强制把一行分成了两行

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>					/*使用w-100类进行强制分割*/
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

在这里插入图片描述
当然推荐使用row来分隔行，因为利于阅读

.row-cols-*

使用 .row-cols-* 类能够定义一个row空间中可放的列数，并支持不同的断点如.row-cols-md-4, .row-cols-3，注意需要要写在 .row空间之中

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
  <div class="row row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
结果图：

在这里插入图片描述
在这里插入图片描述

六、对齐

因为b4是基于flexbox流式布局构建的，所以有类似于flex里面的justify-content、align-items、align-self

align-items-start、align-items-center、align-items-end（针对容器内的目标行）

<div class="container">
  <div class="row align-items-start">			/*上*/
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">			/*中*/
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">				/*下*/
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

align-self-start、align-self-center、align-self-end（针对特定行内的目标列）

<div class="container">
  <div class="row">
    <div class="col align-self-start">			/*上*/
      One of three columns
    </div>
    <div class="col align-self-center">			/*中*/
      One of three columns
    </div>
    <div class="col align-self-end">			/*下*/
      One of three columns
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between（针对容器内的特定列）

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

七、沟槽的清除

在行内使用no-gutters类即可

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
结果图：

在这里插入图片描述

八、重排序

使用 .order-* 选择符，可以对DIV空间进行 可视化排序，系统提供了.order-1到.order-12的12个级别的顺序，也有.order-first来快速更改一个顺序到最前面，但如果没有定义顺序则按照原来的顺序（类似与b3内的.col-md-push- 和 .col-md-pull-*）*

<div class="container">
  <div class="row">
    <div class="col">
      1号空间-未定义序号，位置不变。
    </div>
    <div class="col order-12">
      2号空间-排最后。
    </div>
    <div class="col order-1">
      3号空间-放第1但受1号空间不变影响居第2位。 
    </div>
    <div class="col order-first">
      4号空间-优先排序，占第1位。
    </div>
  </div>
</div>
结果图：

在这里插入图片描述

九、列偏移

使用响应式的.offset-*栅格偏移方法，也可以增加断点（与b3的.col-md-offset-*类似）

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
结果图：

在这里插入图片描述

十、Margin移动布局

在b4内可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>
结果图：

在这里插入图片描述

（上面内容是根据个人理解与官网的资料整理而成的）

其他内容也可以参考这里

本文只用与个人学习与记录

laluneX
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)
qq_39110534的博客
08-07 1285
前言：在bootstrap4出现之后修改了bootstrap3的不方便之处,让使用框架的前端开发者更加便捷.。(bootstrap下文中简称为bs) 一.栅格系统 相对于原来的bs3，bs4具有了范围更大的适应区间.在过去的bs3中的xs sm md lg 中,bs4又增加了一个xl这个区间，为超大屏幕做出了适应。　　   超小&lt;576px小≥576px中等≥768...
bootstrap4和bootstrap3的区别
qq_27009517的博客
06-07 3119
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。下面本篇文章给大家介绍bootstrap4和bootstrap3的区别，希望对你们有所帮助。 bootstrap4和bootstrap3的区别 1、移动优先设置不同 Bootstrap4: Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。下面本篇文章给大家介绍bootstrap4和bootstrap
44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍
Txwtech笛克特科
04-14 2113
在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。
Bootstrap 3和Bootstrap 4之间的区别
cumt30111的博客
07-04 539
Introduction 介绍 In the previous article, we have learned what is .Jumbotron and .page-header class and how to use it? Basically, .page-header class is used in Bootstrap 3, not in Bootstrap 4 and .ju...
Bootstrap4与Bootstrap3的区别
Sumshine12.5
03-05 2835
Bootsrap3采用的float布局，而Bootstrap采用的flex布局 Bootstrap4中的栅格系统可以不用添加指定的列数 如row 里面有2个col 会任何尺寸下均分row Bootstrap3只有4种栅格类 分别为（col-xs特小，col-sm小,col-md,中col-lg大） Bootstrap4有5种栅格类，（col-特小，col-sm-小，col-md-中...
Bootstrap3与Bootstrap4的对比
xuanmeimei123的博客
03-12 1557
一、Bootstrap3 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 1. Bootstrap3有4种栅格； 特小（col-xs-） 适配手机(<768px) 小（col-sm-） 适配...
学习使用bootstrap3栅格系统
09-02
学习使用Bootstrap3栅格系统是Web开发中的一个重要环节，Bootstrap作为一个流行的前端框架，其栅格系统为开发者提供了强大的响应式布局能力。本文将详细介绍如何搭建Bootstrap开发环境以及如何利用栅格系统进行网页...
Bootstrap栅格系统的使用和理解2
08-31
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式的网页设计。这个系统基于12列的网格模型，允许开发者在不同设备和屏幕尺寸上灵活地安排内容。在Bootstrap框架中，栅格系统的设计目的是使页面内容能够...
Bootstrap栅格系统的使用详解
10-19
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下
Bootstrap栅格系统.pptx
03-10
Bootstrap栅格系统
Bootstrap4入门
weixin_30895603的博客
05-02 289
基础样式 颜色 文字颜色以.text-*开头 背景颜色.bg-* primary / seconday / success / danger / warning / info / muted / white / light / dark 文本样式 text-left / text-right / text-center text-nowrap(文本一行显示) / text-tr...
怎么覆盖默认样式_BootStrap5响应式样式栅格系统断点默认值及调整方法
weixin_34474759的博客
12-15 1874
BootStrap5中，按照视口的最小宽度像素数将栅格分为6个宽度档次，设置了5个断点，以便使用相应的样式类名中缀进行样式分组。宽度档次 样式类名中缀 视口宽度（px，即view-port和min-width）超窄 无 <576px窄 sm ≥576px中 md ≥768px宽 lg ≥992px超宽 xl ≥1200px极宽 xxl ≥1400px如需使用其它的视口宽度断点来覆盖上述Boo...
ArkTS开发系列之UI布局用法的学习认识（2.2.1上）
最新发布
jay_chess的博客
06-15 1060
常用函数build() {Column({ space: 20 }) {//组件内组件间距Blank() // 空白填充组件Blank，在主轴方向自动填空空白空间，达到自适应拉伸效果}.width('100%')//组件占比屏幕宽度.alignItems(HorizontalAlign.Center）//子组件的水平对齐方式，有Start/Center/End三种 VerticalAlign.Top 子组件的垂直方向对方方式 有Top/Center/Bottom三种。
【HarmonyOS4.0】第十一篇-ArkUI布局容器组件(三)
weixin_42533732的博客
01-15 1732
参数type：设置侧边栏的显示类型，Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。Overlay：侧边栏浮在内容区上面。@Entry@Componentbuild() {/*** Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。* Overlay：侧边栏浮在内容区上面。*/Column(){Text("侧边栏区域").width("100%").height("100%").fontSize(30).textAlign(TextAlign.Center)
BOOTSTRAP4的栅格系统详解
shanzhihang的专栏
01-04 2544
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 列与列间
CSS第九章 移动端布局-Bootstrap
晓葉斑比
06-05 1055
BootstrapBootstrapContainersGrid system栅格系统Grid optionsAuto-layout columnsEqual-widthSetting one column width 设置列宽度 Bootstrap Bootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 好处：不需要自己写样式，它提供了大量的class样式供选择 我下的最新版本v5.0.1，不同版本提供的内容有改变 特色：1. 响应式布局（不需要自己写media q
harmonyos应用开发者高级认证考试部分答案
weixin_56703682的博客
11-24 8803
6.在Column和Row容器组件中，alignItems用于设置子组件在主轴方向上的对齐格式，justifyContent用于设置子组件在交叉轴方向上的对齐格式（错）8.云函数打包完成后，需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用（错）（ 86-189****1234）3 HarmonyOS应用可以兼容OpenHarmony生态（对）4.下面哪个组件不能包含子组件：（LoadingProgress）1只要使用端云一体化的云端资源就需要支付费用（错）
多终端响应式开发（Bootstrap栅格系统原理及实现)
suixishix的博客
02-15 414
多终端响应式开发（Bootstrap栅格系统原理及实现)
【Web】Bootstrap框架学习笔记之 Bootstrap 3 和 Bootsrap4的区别
LittleFiveSmile的博客
06-23 1131
很多新手都纠结过学Bootstrap 3还是 4 好，我也是一个正在学习的小白，要学就要学最新的嘛，所以就选择了4的版本 查了很多教程说它使用了remCSS 单位，是由 Flexbox Grid 写成的之类的，咱一小白也看不懂这些，只会直接套用一些class啥的，在使用的时候发现有的class名字使用的不一样或者已经废除了，所以这篇文章只是用来记录我在使用Bootstrap 4时 发现的一些...
bootstrap栅格系统
12-02
Bootstrap栅格系统是一种响应式的网格布局系统，它将页面水平划分为12列，并且可以根据不同的屏幕尺寸自动调整列的宽度。通过使用Bootstrap栅格系统，可以轻松地创建出适应不同屏幕尺寸的网页布局。 以下是一个简单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值