脚本宝典收集整理的这篇文章主要介绍了bootstrap栅格化的原理是啥，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

bootstrap栅格化的原理是啥

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

如果你是第一次接触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教程

以上就是bootstrap栅格化的原理是啥的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的bootstrap栅格化的原理是啥全部内容，希望文章能够帮你解决bootstrap栅格化的原理是啥所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。