BootstrapⅡ

最新推荐文章于 2024-08-26 10:56:40 发布

原创最新推荐文章于 2024-08-26 10:56:40 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

这篇内容介绍了Bootstrap栅格系统在不同屏幕尺寸下的应用，包括超小屏、小屏、中屏和大屏的响应式布局。媒体查询用于根据设备屏幕宽度应用不同的CSS样式，确保布局在各种设备上都能良好展示。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 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12
最大列宽	自动	~62px	~81px	~97px
槽宽	30px （每列左右均有 15px）
可嵌套	是
偏移	是
列排序	是