WEB前端教程：模拟 BootStrap 的栅格布局

理解响应式设计的基础概念以及历史

课程目标

理解响应式设计的基础概念以及历史
学习 boostrap12 栏响应式布局理念，通过实践进行模拟实现
回顾弹性盒子布局和网格布局

阅读学习

网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，把所有的宽度分为固定栏数（常用 12 栏），从而更高效的控制元素宽度。而这功能，我们使用 HTML 和 CSS 就能实现了。

以 BootStrap 的网格系统为例，DOM 元素类名形如 col-md-4；其中 col 是“列” column 的缩写；md 是 medium 的缩写，适用于应屏幕宽度大于 768px 的场景；4 是占四栏的意思。因此，col-md-4 的意思是，在屏幕宽度大于 768px 时，该元素占四栏。

编码

应用 flex 布局，使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局 (opens new window)，根据屏幕宽度，元素占的栏数不同。

需要实现如效果图 (opens new window)所示
调整浏览器宽度查看响应式效果是否符合预期
效果图中的红色的文字是说明，不需要写在 HTML 中。
尽可能多尝试不同的方法来实现，比如分别使用弹性盒子布局或者网格布局来实现，思考他们之间的差异

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-17 11:14
阅读 ( 359 )
分类：WEB前端开发