Bootstrap441网格实现响应式布局只需要掌握这一点就行

2022年8月29日 0 Comments

实现前端网页实现响应式布局如果是自己写代码来实现真的挺困难的,但是使用bootstrap框架就非常容易了,即使不懂前端开发也可以很好地驾驭。当前最新版本是bootstrap4.4.1,和之前的老旧版本相比较在细节方面做了很多的优化和升级,其中网格系统是实现网页响应式的核心组成部分。

在开始之前先来理解一下概念:响应式和自适应,这两个概念非常容易弄颠倒,只要记住一点就行。响应式网页的URL不论在上面设备上都是不变的,是网页上的代码根据用户使用设备自行判断该怎么布局页面;自适应页面在不同的设备问URL是不一样的,他们之间的区别可以简单地看URL是否一样来判断响应式还是自适应。

bootstrap制作出来的网页是响应式的,URL不会随着用户使用设备的屏幕宽度变化而变化,始终都是同一个URL,是网页中的代码根据屏幕不同宽度来实现如何布局的,bootstrap是响应式的、移动优先的框架。

首先引入bootstrap的css和JS文件,并添加相对应的响应式meta,在前面的文章里面有详细介绍,如果不会请翻阅。上一张bootstrap实现响应式的代码图片:

断点是bootstrap响应式网格系统中的核心组成部分,从屏幕的宽度由小到大的顺序依次是xs(<576px)、sm(≥576px)、md(≥768px)、lg(≥992px)、xl(≥1200px)这5个断点组成,因为是移动优先,所以在超小宽度的屏幕xs这个断点上默认无需指定,一般把md这个断点前的屏幕宽度视为手机屏幕,大于md的视为平板和电脑屏幕。

网格是用于判断显示列数的,为了加深理解,放上3x版本中讲得比较详细的一张图片,下图所示。

bootstrap默认将屏幕平均分为相同的12个小网格,每一个网格占一列宽度,使用col前缀在class中来识别断点和网格数量。

比如col-md-4,其中的col是bootstrap实现响应式的识别前缀,md代表的是断点(大于等于768px的屏幕),而数字4表示所占的网格数量是4列;整个col-md-4的意思就是在宽度大于等于768px的屏幕上占用4个网格,即显示4列,如上面图中所标的格子宽度所示。

如果是在xs(小于576px)的屏幕和适用于所有宽度的屏幕上可以省略断点,即col-6和col-xs-6是相同的意思,在bootstrap4.4.1以上版本不必再指定默认的xs断点。

统一的格式是col-断点名称-网格数,使用从列来识别响应式,断点名称可选择xs/sm/md/lg/xl这5个,网格数是12格中的其中几格。

有了前面的基础准备和理解,是不足以完成一个响应式页面制作的,要实现真正的响应式,必须理解混合使用的原理和方法。

示例代码中第4行-md-8/div,class里面col-md-8指定断点是大于等于md(768px)的屏幕,该div占用8个网格也就是8列,由于总计是12格,剩下的4格分给了第5行代码中的col-md-4,整个运行之后就是上图所示的效果。

把屏幕宽度调整到小于md(768px)的屏幕宽度上,执行效果是上图这样的。因为第4行代码指定的断点是md其他的没有了,所以在小于md的屏幕上默认执行col-12(等同于col-xs-12),如果是默认占满整行(12个网格),col-12可以省略不写,于是就是上图效果了。

第5行代码总的col-6和col-md-4,此时的屏幕宽度是542px,小于md(768px)断点,所以此时md断点不执行,生效的是col-6,占用6个网格,也就是是屏幕的一半,就是上面图中看到的效果,后面还有6个网格是空白的,因为没有写任何内容所以就没有内容。

还有一些示例代码,由于太多后面的文章在接着发吧,关于响应式,重要的就是要深入理解断点和网格,具体的运行的原理,就交给bootstrap自己执行。

发表回复

您的电子邮箱地址不会被公开。