Bootstrap4布局（简要）

什么是Bootstrap
布局基础
网格系统
弹性盒子

什么是Bootstrap

Bootstrap是目前最流行的一套前端开发框架，集成了HTML、CSS和JavaScript技术，为网页快速开发提供了包括布局、网格、表格、按钮、表单、导航、提示、分页等组件。

它的构成模块从大的方面可以分为页面布局、页面排版、通用样式、基本组件和jQuery插件等各部分。

布局基础

布局容器

容器时Bootstrap中最基本的布局元素，在使用默认网格系统时时必需的。Bootstrap中定义了两个容器类，分别是.container和.container-fluid。它们的区别在于宽度的设定。

container容器根据屏幕宽度不同，利用媒体查询设定固定的宽度，当改变浏览器大小时，页面会呈现阶段性变化。

.container{

    width:100%;

    padding-right:15px;

    padding-left:15px;

    margin-right:auto;

    margin-left:auto;

}

在不同的设备屏幕宽度下container的最大可宽度也会变化：

@media(min-width: )	.container
576px	540px
768px	720px
992px	960px
1200px	1140px

container-fluid容器则保持全屏大小，当需要一个元素横跨视口的整个宽度时可以采用。

.container-fluid{

    width:100%;

    padding-right:15px;

    padding-left:15px;

    margin-right:auto;

    margin-right:auto;

}

虽然容器可以嵌套，但大多数布局不需要嵌套容器。

相应断点

Bootstrap使用媒体查询为布局和接口创建合理的断点。这些断点主要基于最小的视口宽度，并且允许随着视口的变化而扩展元素。

/*默认不写为对一切尺寸有效*/

/*小型设备sm*/

@media (min-width:576px){}

/*中型设备md*/

@media (min-width:768px){}

/*大型设备lg*/

@media (min-width:992px){}

/*超大型设备xl*/

@media (min-width:1200px){}

z-index

z-index属性设置一个定位元素沿z轴的位置，正数例用户更近，负数离用户更远。Bootstrap中定义了相应工具的层级，不推荐自定义。

网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

12栅格

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。响应式变化使用.col-+sm/md/lg/xl+n，其中n为在分成12列的基础上所占列数，默认为1，它的分布请看下图：（如不接n而接auto，则代表按照内容自动调整宽度）

例：

<div class="col-md-4 col-sm-6 col-xs-12">

上述代码意思为中型设备时占4列，小型设备时占6列，特小型设备占12列。如果有许多同样的元素结构，则可以呈现不同的排列方式，非常灵活。

还可以混合搭配，如：

<div class="row">

	<div class="col-12 col-md-8"></div>

	<div class="col-6 col-md-4"></div>

</div>

<div class="row">

	<div class="col-6"></div>

	<div class="col-6"></div>

</div>

建议实际操作一下。

注：

1.可以使用.no-gutters类来删除边距。

2.如果在一行中放置超过12列，则超出的那一组将作为新的一行，后续的列沿着新行继续排列。

重排序

使用.order-n类选择符，可以对空间进行可视化排序，n可以是1~12，没有定义该类的元素将默认排在前面。数字越大排得越靠右。n还可以用first/last代替。

列偏移

使用响应式的.offset-n类偏移方法，使列向右偏移n列
使用边距通用样式处理，内置诸如.ml-*、.p-n、.pt-n等，如.ml-auto、.mr-auto水平隔离。

弹性盒子

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，称为Flex项目（Flex item），简称“项目”。

.d-flex为弹性伸缩盒子，.d-inline-flex为内联块级弹性伸缩盒子。

水平方向排列：.flex-row 左对齐 .flex-row-reverse 右对齐

垂直方向排列：.flex-column 垂直方向显示 .flex-column-reverse 翻转后垂直显示

内容排列：.justify-content-* * 号允许的值有：start (默认), end, center, between 或 around

等宽：.flex-fill 强制设置各个弹性子元素宽度一致

扩展：.flex-grow-1 用于设置子元素使用剩下的空间。

排序：.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

包裹：弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。（是否换行）

垂直对齐：使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。这些类在只有一行的弹性子元素中是无效的。

响应式flex，在对应位置加上设备尺寸即可。