bootstrap 响应式布局常见设计做法 真实网站案例解析

时间:2024-02-22 11:51:04

通常我们做一个网页,通常优先兼容 桌面端、平板端、手机端 三个端,其他则微调,那我们应该如何来做呢?

一般会有设计师 给你三个设计稿,分别是 PC、ipad、mobile 也就是 电脑端、平板端、手机端 这三个设备的。

下面我用 EXLskills 来举个例子,来实际理解一下。

电脑端PC,一般采用 三列、四列布局,你可以去看看 京东 或者 淘宝 就可以发现,当然也不是死的,特殊情况特殊做法,这里指的是一般情况。

平板端iPad,一般采用两列布局,因为相对来说平板的屏幕相对于 手机大一点 但相对于 电脑端又比较小,两列布局的效果无疑是比较常见的做法,下面是一个真实网站的例子。

手机端mobile,一般采用一列布局,手机的屏幕很小,一列可以展示更完整,并且在移动端手势下滑是非常容易的,所以用户体验感也很好,而且不会丢失展示内容,在手机端一般采用 Flex 布局进行一列布局

那怎么实现这个网站的效果呢?
答:采用目前前端流行的 CSS样式 bootstrap 响应式框架 进行开发,他包含了很多实用的类、比如给你做好了 媒体查询、多列布局、还有上面效果中导航收缩功能,你可能已经猜到了,没错上面的示例网站就是 bootstrap 做的,
简单介绍下响应式,响应式简单来说就是 在 不同的设备屏幕上 网站呈现出不一样的布局效果,就像上面举列的三个端一样。
我简单解析一下这个网站是怎么采用 bootstrap 使网站响应式的。
这个网站使用的 bootstrap 版本,你可能看到了,他还是使用了 CSS变量,所以你在实际使用的时候是可以根据自已的情况加代码的,bootstrap只是一个你做网站的一个基础

1.整个网站采用 头部 + 主体 两个布局模块


2. 头部有一个导航,采用 Flex 布局

3. 在 电脑端 有一个导航条

4.当设备是 手机 或者 iPade 时候将导航条收缩


头部布局实现方法:
采用了典型的 bootstrap + collapse + Flex 布局 实现收缩 和 响应式,如果你不知道的话我帮你搜了一遍文章: https://www.cnblogs.com/yangchaojie/p/8120549.html

5.主体 布局模块效果

6.主体在高度上通过 calc 计算,得出高度

7.采用 @media 媒体查询来在不同端变化高度,这是常用的做法,可以实现在不同的设备下,添加不同的样式,让布局改变,所以当然这个网站不止这一处采用了这个做法,如果你不知道媒体查询的法,我也帮你找了一些不错的相关文章
http://www.bubuko.com/infodetail-1045273.html
https://www.cnblogs.com/zhaodifont/p/3858657.html
https://www.cnblogs.com/xcxc/p/4531846.html
https://blog.csdn.net/u010510187/article/details/82790963
翻译不完全,但是介绍的很全,可以搭配上面的看
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries


8.如果你了解 bootstrap 那你一定知道 布局容器




9.头部采用了 row + colbootstap 栅格系统 ,链接: https://v3.bootcss.com/css/#grid

10.使用了 bootstrap栅格系统 来在不同设备屏幕下分成不同的分辨率

解析:
如果你知道 bootstrap 的栅格系统话, 你可能已经发现了,这个网站的做法。
我们知道 bootstrap 的是12栅格系统, 所以我来解析下这个网站分列做法。
col-12 没有加sm这样的媒体查询前缀,则不管屏幕大小始终占满12个格子也就是成了一行一列,因为 CSS 是拥有层叠特性的,所以加了媒体查询前缀的在bootstrap下,优先级是比不加的高的,样式会被加了前缀的覆盖掉。

col-sm-6 则是 2列,因为 12 / 6 = 2 所以一行只能占 2 个div 。
col-lg-4 则是 3列, 因为 12 / 4 = 3 所以一行最终只能占 3 个div,也就是 3列 了。
以此类推 12除于 你的想要分的 列数 加上 不同的sm、lg、xl等屏幕尺寸参数,就可以实现,响应式了。
一遍写这个属性是从小屏幕写到大屏幕的,因为这样更合理更清晰,比如这个网站就是从 手机 > 平板 sm > 电脑 lg



如果你不了解的话bootstrap的话,可以看官方文档非常的简单,上手很快,需要你了解一点 htmlcss的知识,因为他本质上bootstrap还是 CSS 的样式,简单点就是别人写好的 css 样式,你拿来直接用,但你要起来了解一点,才知道怎么使用。
bootstrap中文文档:https://v3.bootcss.com/css/#grid
bootstrap英文文档:https://getbootstrap.com/
另外个人觉得英文文档比 中文 文档新,现在 英文 文档是bootstrapV4版本,中文 文档还是V3,如果你是从没接触过 bootstrap 那我建议你直接看中文文档,为什么呢?因为 英文 文档是比较新的版本,但本质上基础内容和 中文 文档没有什么太大区别,所以不用太担心,文档过时的问题.

好了,大概的解析了一下这个网站,当然这个网站不只是简单的使用了 bootstrap 他加上了自已写的不少样式,所以实际开发 不单单是依靠一个 bootstrap的,他只是一个基石,我们只是踩在上面。

最后附上CSS 手册一本: http://css.doyoe.com/