栅格系统
Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕),支持Sass mixins自由调用,并结合自己预定义的CSS、Js类,用来创建各种形状和尺寸的布局。
机制原理
Bootstrap的网格系统使用一系列div
容器的行、列来布局和对齐内容,不同于旧版3.0,新版是完全基于flexbox流式布局构建的,完全支持响应式标准。下面的示例,可以让我们深入了解网格如何组合在一起。
新手不熟悉flexbox? 阅读这篇关于flexbox布局文章,可以了解其背景、术语、规则和示例代码。
<div class="container">
<div class="row">
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
</div>
</div>
上面的例子使用BootStrap预定义的栅格系统,演示了在.container
容器内建立了三个等宽的列,并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何,这三个列都是恒在呈现的。
让我们来慢慢揭开它的工作原理:
- 栅格系统提供了集中内容居中、水平填充网页内容的方法,使用
.container
(严格意义上也包括.container-fluid
,后文相同不再备注-译者)应答网页宽度,或使用.container-fluid
使网页能够以100%
宽度呈现在所有的浏览器窗口或设备尺寸上。
换一个说法就是:.container
实现固定的宽度并居中呈现,.container-fluid
实现全宽度,并和其它网格实现对齐(译者注)。 - 行(
.row
)是列(.col-*
)的横向组合和父容器(它们有效组织在.row
下),每列都有水平的padding
值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。 - 网页开发者的呈现内容必须放置在列(
.col-*
中,而且只有列可以是行的直接子元素,否则都是违法的(不可以在.col-*
以上添加呈现内容。 - 这一切都要感谢
flexbox
流式布局,从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列,比如我们在.container
中置入初始化的四个.col-sm
就能实现各自25%宽度并左对齐形成一行的排列。更多示例,请参阅本文档 自动布局列部分。 - 你可能注意到
.col-*
后面有不同的数字,如.col-sm-4
或.col-xl-12
,这些css类后面的数字用于表明定义div空间想要占用列的数量,每行最多有12列。如果你想用三个等宽的列,则取12的三分之一,即.col-sm-4
就是正确的(后文会有详细的介绍)。 .col-*
的width
属性(即列宽)是用百分比来表现和定义的,所以它们总是流式的,其尺寸大小受父元素的定义影响(这正是flexbox
布局的特征,子元素的宽比和排列受父元素定义)。- 列具有水平
padding
定义,用于创建列与列之的间隙。 .row
上带有margin-left: -15px;margin-right: -15px;
属性,你可以在.row
上上定义.no-gutters
属性,从而消除这个属性,使页面不会额外宽出30px,即<div class="row no-gutters"...
。(译者原意拆成两行表述)。- 总共有五个栅格等级,每个响应式分界点隔出一个等级:特小
.col
、小.col-sm-*
、中.col-md-*
、大.col-lg-*
、特大(大、特大也可以称为宽、超宽).col-xl-*
。 - 栅格断点的媒体查询基于宽度的最小值,意味着它们应用到某一等级以及这一等级之上的所有(如
.col-sm-4
的的定义可以在小型、中型、宽、超宽设备上呈现,但不适用于能在超小型.col-sx
上呈现)。 - 用户不需要自行定义网格,可以直接使用系统预定义的栅格类(如
.col-4
)或采用Sass mixins来进行更多的语义标记满足开发需要。
请注意:Flexbox布局虽然很先进,但也有一定的限制和错误,如无法使用某些HTML元素作为弹性容器,点此可扩展相关知识。
栅格选项
Bootstrap使用ems
或rems
来定义大多数属性的规格大小、px
用于全局层面网格断点和容器宽度(因为浏览器和设备的宽度是以像素px
为单位,且不会随字体大小而变化)。
通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定:
超小屏幕 (新增规格)<576px |
小屏幕 次小屏≥576px |
中等屏幕 窄屏≥768px |
大屏幕 桌面显示器≥992px |
超大屏幕 大桌面显示器≥1200px |
|
---|---|---|---|---|---|
.container 最大宽度 |
None (auto) | 540px | 720px | 960px | 1140px |
类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
列(column)数 | 12 | ||||
列间隙 | 30px (每列两侧各15px) | ||||
可嵌套性 | Yes | ||||
可排序性 | Yes |
译者注:
1、在Bootstrap 4中,屏幕的大小是真正的“断点”,即如果只定义一个屏幕规格即可向上覆盖所有设备,向下如果没有定义则默认为12栅格占位-译者注。
2、有版本将540px断点翻译为平板,目前业界平板(如ipad)进入高清屏幕时代,故本翻译不作此处理以符发展需求。
3、实践中,一个<div class="col"></div>
或<div class="col-N"></div>
代表手机断点
自动布局列
利用栅格断点特性进行排版,可以简化列的大小,而不需要批定显式的列宽,如强制写为:.col-sm-6
。
等宽布局
下面的列子,展示了一行两列与一行三列的布局,从xs
(如上表如见,实际上并不存在xs这个空间命名,是以.col
表示,下同不再注)到xl
(即.col-xl-*
)所有设备上都是等宽并占满一行,只要简单的应用.col
就可以完成。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
等宽列可以分成多行,但是有一个Safari旧版浏览器的flexbox错误,阻止它在没有显示flex-basis
或border
(影响到边框效果)。
Bootstrap非官方的一个实例,已经介绍了两种解决方法,但如果是最新safri浏览器下,则不需要这样做。
下面是等宽列两行的处理方法,引用w-100
进行切割分行:
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
设置一列宽度
在Flexbox的布局上,拥有很多现代特征,比如自动布局和列宽处理。你可以在一行多列的情况下,特别指定一列并进行宽度定义,同时其它列自动调整大小,可以使用预定义的栅格类(如下所示),从而实行栅格宽或行宽的优化处理。注意在这种民琣上,无论中心定义列的宽度如何,其他列都将调整大小。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (更宽-12格中占6格,其它6格另外两列平分)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
可变宽度的弹性空间
使用 col-{breakpoint}-auto
断点方法,可以实现根据其内容的自然宽度来对列进行大小调整。.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
等宽多行
创建跨多个行的等宽列,方法是插入.w-100要将列拆分为新行。通过混合.w-100
一些还可以影响一些显示状态效果,如按钮排序等。
译者注:这部份其实和上面safri浏览器bug讲解重复了,但官网如此保持尊重。
又注:.w100
似乎与.clearfix
有时可以达到同样的网页效果。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
响应式的class选择器
Bootstrap的栅格系统包括五种宽带预定义,用于构建复杂的响应布局,你可以根据需要定义在特小.col
、小.col-sm-*
、中.col-md-*
、大.col-lg-*
、特大.col-xl-*
五种屏幕(设备)下的样式。
覆盖所有设备
如果要一次性定义从最小设备到最大设备相同的网格系统布局表现,请使用.col
和.col-*
类。后者是用于指定特定大小的(如.col-6
),否则使用.col
就可以了。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
水平堆砌
使用单一的.col-sm-*
类方法,可以创建一个基本的网格系统,此时如果没有指定其它媒体查询断点宽度,这个栅格系统是成立的,而且会随着屏幕变窄成为超小屏幕.col-
后,自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果:
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
混合布局
设计师们当然不会简单的把各个屏幕下的栅格都做成一样,那将是单调乏味的,所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理:
<!-- 定义在超小屏幕下1列全宽、1列半宽,而其它场景以8:4比例并行排列 -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
对齐
flexbox布局可以轻松的实现DIV空间布局的垂直、水平对齐。
垂直对齐示例
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
水平对齐示例
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
间隙沟槽(gutters)清除
BootStrap默认的栅格和列间有间隙沟槽,一般是左右-15px的margin
或padding
处理,您可以使用.no-gutters
类来消除它,这将影响到.row
行、列平行间隙及所有子列。
以下是创建这些样式的源代码。注意,列替换仅限于第一个子列,并通过属性选择器进行定位。当这产生一个更具体的选择器时,列填充仍然可以使用间隔实用程序进一步定制。
如果你需要无边缝设计(edge-to-edge design),则请在父DIV中放弃.container
与.container-fluid
容器。
下方为实际效果展示,您可以继续使用所有BootStrap预定义的栅格系统(包括列宽、响应层、属性、排序等):
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
列换行
如果在一行内子DIV定义的栅格总数超过12列,BootStrap会在保留列完整的前提下,将无法平行布局的多余列,重置到下一行,并占用一个完整的新行。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
换行
一般换行推荐使用添加多个.row
来达成,否则你可以使用系统提供的.w-100
方法处理,其思路是强行插入一个width:100%
的DIV进行隔离切断(前文有两处提到,这是Flexbox流式布局的一个Hack,目前没有更好的方案)。
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
也可以结合响应式实用程序来换行(切割)。
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
重排序
Class顺序重定义
使用 .order-*
class选择符,可以对DIV空间进行 可视化排序,系统提供了.order-1
到.order-12
12个级别的顺序,在五种浏览器和设备宽度上都能生效。
<div class="container">
<div class="row">
<div class="col">
1号空间-未定义序号,位置不变。
</div>
<div class="col order-12">
2号空间-排最后。
</div>
<div class="col order-1">
3号空间-放第1但受1号空间不变影响居第2位。
</div>
</div>
</div>
还可以使用.order-first
,快速更改一个顺序到最前面,同时其它元素也相应的获得了order:-1
的属性,这个属性也可以与。.order-*
混合使用。
<div class="container">
<div class="row">
<div class="col">
1号空间-未定义顺序。
</div>
<div class="col">
2号空间-未定义顺序。
</div>
<div class="col order-first">
3号空间-优先排序,占第1位。
</div>
</div>
</div>
列偏移
可以使用两种方式进行列偏应:
1、使用响应式的.offset-*
栅格偏移方法。
2、使用边界处理实用程序,它内置了诸如.ml-*
、.p-*
、.pt-*
等实用排工具。
class偏移选择器
使用.offset-md-*
类可以使列向右偏移,通过定义*
的数字,则可以实现列偏移,如.offset-md-4
则是向右偏移四列。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
除了在响应断点处清除列,您可能需要重置偏移量,下面的栅格示例展示了这一点:
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
Margin移动布局
在BootStrap V4中,你可以使用.ml-auto
与.mr-auto
来强制隔离两边的距离,实现类水平隔离的效果。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
列嵌套
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row
元素和一系列 .col-sm-*
元素到已经存在的 .col-sm-*
元素内。被嵌套的行(row)所包含的列(column)数量推荐不要超过12个(其实,没有要求你必须占满12列-否则应对页面进行重新规划布局)。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Sass mixins
用Bootstrap的源Sass文件时,你可以选择使用Sass变量,或者mixins,以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins,为快速响应布局提供整个现成的套件。
变量
变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点,们用这些来生成上文提及的预定义网格列,定制出如下所示的自定义mixins:
Mixins
MMixins用来联合网格变量,为每个网格列生成语义化的CSS。
应用案例
你可以将变量修改为你自己定义的值,或者直接使用mixins的默认值。下面例子即使用默认设置创建两列布局以及一个列与列之间的缝隙:
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
自定义栅格系统
使用BootStrap v4内置的栅格系统之Sass变量和 maps文件,可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度,然后重新编译。
自定义列和间隙
以通过修改Sass变量、重定义栅格系统列的数量,使用$grid-columns
命令可生成每个单独列的宽度(以百分比表示),同时$$grid-gutter-width
允许在平行排列$padding-left
和$padding-right
对于平台间隔均匀分割的断点特定宽度。
自定义栅格
超越自我,您还可以自定义网格层数。如果你只想要四个格子层,只要更新$$grid-breakpoints
和$$container-max-widths
等类参数。
对Sass变量或map文件进行任何更改,都需要保存更改并重新编译。这样做将为列宽度,偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点,同时濂晨设置网格值时是采用px
单位(而不是rem
、em
或%
)。