Bootstrap的栅格参数，web前端开发面试技巧

上官夏恋

于 2024-03-16 19:33:01 发布

阅读量831

点赞数 15

分类专栏：前端程序员文章标签：前端 bootstrap 面试

本文链接：https://blog.csdn.net/2301_76328475/article/details/136768231

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在栅格系统中，我们在 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

.col-md-1

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。