bootstrap4之栅格系统
栅格系统
虽然原先一直用bootstrap3，可是也只是表面上了解的使用。随着现代浏览器的普及，以及大型应用页面的交互功能和需求愈来愈复杂，清楚的了解bootstrap的工做原理十分有必要。css
弹性盒子系统的出现，使的前端人员纷纷趋之若鹜。他是那么的简洁与快速。而后出现了bootstrap4以及bulma这样的css项目，极大的方便了页面布局和样式。html
今此，从网上查阅相关信息，没查到专门的中文版本，即便官网也只是部分翻译。因而专门翻译了bootstrap4的栅格系统部分，供本身学习查阅之用，也分享与有须要的人。（输入法问题错别字不免）前端
点击查看原文bootstrap
得益于12列的系统，五个默认的自适应等级，sass的变量和mixins，以及一些列预约义的classes，加上强大的移动优先的弹性盒子栅格，来建立全部形状和尺寸的布局。浏览器
如何工做（实现）
bootstrap栅格系统使用一系列的的containers，rows以及columns来呈现内容以及设置内容的边距。它基于弹性盒子而且彻底是自适应的。下面是一个能够说明他们是如何组织的比较深刻的例子。sass
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
上述例子使用咱们的预约义类能够在small,medium,large,extra large设备上建立三个宽度相等的columns。（注：咱们固然能够设置不一样的界点——breakpoint，可是这个例子使用的sm，因此凡是大于sm的界点均可以实现宽度相等的效果。）这些columns在父级的.container中间。app
细拆一下，看它是如何工做的。ide
- 容器的做用是居中和水平话你的网站内容。请使用
.container来自适应物理的像素宽度，或者.container-fluid的width:00%到全部的宽度的硬件。 - Rows用来包裹columns。每一个column都有水平的
padding（乘坐槽——gutter），用来控制他们之间的距离。这个水平padding抵消了row的负margins。这样一来，全部的columns中的内容看起来在左边是有距离的。 - 在栅格系统中全部的内容必须在columns中，而且columns必须是row的直系子孙。
- 得益于弹性盒子，栅格系统的columns在没有指定宽度的状况下会自动均分宽度。例如，例子中的
.col-sm将会在breakpoint在什么sm已经更高时宽度为25%。 - column使用每行12列中的数字作一个符号。若是你想使三个列宽度相等，你可使用
.col-4。 - columns的宽度使用的是百分比，所以他们永远是流动的而且相对于父级取值。
- 每一个column都有本身的水平方向的
.padding，可是，你可使用在row中使用.no-gutters来去除row的margin，以及其下columns的padding。 - 为了使栅格系统可以自适应，bootstrap提供了五个界点——breakpoints。他们是:xs(适应全部的),sm,md,lg,xlg。
- 栅格系统的界点的媒体查询基于屏幕的最小宽度值。其效果是应用于当前的breakpoint或者高于他的宽度。（例如，
.col-sm-4会应用于small，medium，large以及extra large的设备。可是不适用xs的breakpoint）。 - 你可使用预约义的栅格class（例如
.col-4）或者sass mixins来设置更多类。
要留意使用弹性盒子的限制和bugs，好比哪些不能使用弹性盒子的html元素。布局
栅格设置 Grid options
boostrap使用em或者来时定义大多数的尺寸，px用来定义栅格系统breakpoint或者容器的宽度。这是为视口的宽度是基于px而且不会随font size变化。学习
经过下面表格看下bootstrap栅格系统在各个方面是如何工做的。
自动布局列 Auto-layout columns
使用特殊的组合columns类能够很容易设置column的尺寸而不用明确的设置column的宽度的数字，例如.col-sm-6。
同等宽度
例如这里有两个栅格布局，用来适应从xs到xl的设备或者视口。你须要每一个缺乏数字的界点（breakpoint）组合类的列column都将是同样的宽度。
<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>
宽度相等的column能够断为多行，可是这里又一个safari弹性盒子bug，该bug在没有明确flex-basis或者border的状况下会组织这种效果的实现。这个bug只存在于叫老旧的浏览器版本中，若是你升级到高一点的版本，那么彻底不用担忧。
设置一个列的宽度 Setting one column width
自动适应宽度auto-layout的弹性盒子栅格系统也意味着你能够设置其中一个column的宽度，而且他的相邻的columns将会自动调整本身的宽度。你也可使用预约义的栅格类，混合栅格，或者直接设置元素的宽度。然而其余的columns永远都会自动调整本身的宽度，不管中间的column宽度为多少。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</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 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
根据内容可变的宽度 Variable widht content
经过使用col-{breakpoint}-auto类来设设置column的宽度为其内容的宽度。
<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>
多行宽度相等 Equal-width mutil-row
在你想要断开列column的地方插入一个.w-100，你将得到列宽想的多行效果。
若是想要断开的地方可以实现自适应的效果，你须要掺入一些自适应的组合类。
<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>
自适应类 Responsive classes
bootstrap栅格系统包括五个预约义的等级来创建复杂的自适应布局。定制的列的尺寸用来适应xs、sm、md、lg、xl这样的设备。
全部的断点（breakpoints）
若是想要从xs到xl都是同样的效果可使用.col和.col-*类。
若是你须要一个特别的尺寸，你能够给类添加一个数值；此外，能够随意的使用.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>
水平堆放 Stacked to horizontal
使用一组.col-sm-*类你可建立一个在sm断点（breakpoint）以前一直是水平堆放的基本栅格系统。
（注：水平堆放，即水平方向一个挨着一个，若是大于行宽则自动换行。）
<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>
混合和匹配
混合：不一样的断点混合。匹配：当设备不一样时，匹配不一样的断点效果。
不想让你的columns在一些栅格下只是简单的堆放。那就使用在不一样等级断电下显示不一样效果的断点类的组合吧。看下面的例子，一个显示效果更好的方法。
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <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>
对齐 Alignment
使用弹性盒子方式来对列进行水平和垂直防线的对齐设置。
垂直对齐 Vertical alignment
- align-items-start
- align-items-center
- align-items-end
<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>
- align-self-start
- align-self-center
- align-self-end
<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>
水平对齐 Horizontal alignment
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-around
- justify-content-between
<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>
无间隙 No gutters
列columns之间的间隙是经过栅格系统的类来定义的，能够经过使用.no-gutters来移除。移除的包括.row的负的margins以及其直系子columns的水平的padding。
下面是建立这些样式的源码。注意：列column的覆盖只是在直系子级，而且经过属性选择的范围内。若是定义了更详细的选择器，你仍然能够经过一些控件组合（spacing utilities）来再定义column的padding。
须要一个边缘相挨着的设计?你能够去掉父级的.container或者.container-fluid。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
看看实际上他们的代码样子。注意：你能够继续用这个和全部其余的预先定义的栅格类一块使用。
（包括columns的宽度，自适应等级，reorder，更多）
<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>
列的包裹 columns wrapping
若是超过12columns被放在一个单独的row中，那么超过的columns将被做为一个单元，而后换行为新的一行。
<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>
列的折断 columns breaks
断开columns到一个新的一行须要一点小技巧：添加一个宽度为width:100%的元素到你想要断开的地方局。正常状况下这会变成一个多行效果，可是这个不是实现这个效果的最终方法。
<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>
你也可使用这种在某个界点断块columns的方法。
<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>
从新排序 Reordering
排序类 order classes
使用.order-类来控制你的内容的视觉顺序。这些类也是能够自适应的，因此你能够经过breakpoint设置order（例如，.order-1.order-md-2)。支持从1到12的全部的栅格层级断点。
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
这里也有自适应的.order-first和.order-last类，经过设置样式order:-1以及order:13(order:$columns+1)来自适应。这些类也能够在内部添加宽度数字来达到想要的效果。
位移列 Offsetting columns
你能够经过两种方法来位移列。咱们的自适应.offset-栅格类以及margin组合。栅格类是对应的列的宽度，然而margin能够在宽度更灵活的时候快速布局。
位移类
向右位移使用.offset-md-*类。这些类会以column宽度为单位增长右边的margin为*个。例如，.offset-md-4会向右位移4个column宽度的位置。
<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>
除了在某些界点column的清除以外，你也许须要从新设置位移，看下面的例子。
<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-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配合 Margin utilities
随着v4转移到了弹性盒子，你可使用margin组合类，例如.mr-auto去强制相邻column彼此分开。
<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>
嵌套 Nesting
为了使用默认的栅格系统嵌套组合你的内容。你可在.col-sm-*类column中添加.row而且包裹.col-sm-*。嵌套的rows须要包含一组columns，最多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>
- 1. bootstrap4栅格系统布局
- 2. 栅格系统
- 3. Bootstrap----------栅格系统
- 4. bootstrap 栅格系统
- 5. Bootstrap栅格系统
- 6. Bootstrap 栅格系统
- 7. 栅格系统Bootstrap
- 8. （四）栅格系统
- 9. Bootstrap 栅格系统的精妙之处
- 10. less 实现栅格系统
- 更多相关文章...
- • 操作系统（OS）平台 统计 - 浏览器信息
- • 系统定义的TypeHandler - MyBatis教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • IntelliJ IDEA代码格式化设置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. bootstrap4栅格系统布局
- 2. 栅格系统
- 3. Bootstrap----------栅格系统
- 4. bootstrap 栅格系统
- 5. Bootstrap栅格系统
- 6. Bootstrap 栅格系统
- 7. 栅格系统Bootstrap
- 8. （四）栅格系统
- 9. Bootstrap 栅格系统的精妙之处
- 10. less 实现栅格系统