在栅格系统中,我们在 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 | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
实例:从堆叠到水平排列
使用单一的一组 .col-md-*
栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row
内。
col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1
.col-md-8 .col-md-4
.col-md-4 .col-md-4 .col-md-4
.col-md-6 .col-md-6
给大家分享一些关于HTML的面试题。
CYz-1718165213689)]
[外链图片转存中…(img-BOogT6Hd-1718165213691)]