温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

bootstrap栅格化的原理是什么

发布时间:2022-03-10 09:42:09 来源:亿速云 阅读:161 作者:iii 栏目:web开发

本文小编为大家详细介绍“bootstrap栅格化的原理是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“bootstrap栅格化的原理是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在bootstrap中,栅格化的原理就是根据设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局;这样就可以让同一套页面可以适应不同分辨率的设备。

本教程操作环境:Windows10系统、bootstrap3.3.7版、DELL G3电脑

bootstrap栅格化的原理是啥

Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局。

如果你是第一次接触bootstrap,你一定会为他的栅格化布局感到敬佩,他为我们提供了一套响应式的布局方案。

bootstrap栅格系统布局

bootstrap栅格化的原理是什么

简单地讲:
1、Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

2、网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

读到这里,这篇“bootstrap栅格化的原理是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI