Bootstrap | 不是第一

布局容器

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

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

.container{
    100%;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto;
}

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

@media(min- )	.container{max- }
576px	540px
768px	720px
992px	960px
1200px	1140px

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

.container-fluid{
    100%;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-right:auto;
}

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

栅格网格系统（row 行 col列）

<div class="container">
    <div class="row">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div>
     </div>
</div>

 <!-- 列组合 两个 row 就是数据分在两行 -->

<div class="container">
    <div class="row">
        <div class="col-md-5"></div>
    </div>
    <div class="row">
        <div class="col-md-5"></div>
     </div>
</div>


<!-- 列偏移 -->

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-4 col-md-offset-4">4列</div>
    </div>
</div> 


<!--  列嵌套 -->

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-9 ">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
                <div>
                </div>
            </div>
        </div>
    </div>
 </div>

相应断点

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

/*默认不写为对一切尺寸有效*/
/*小型设备sm*/
@media (min-576px){}
/*中型设备md*/
@media (min-768px){}
/*大型设备lg*/
@media (min-992px){}
/*超大型设备xl*/
@media (min-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>

建议实际操作一下。

注：

可以使用.no-gutters类来删除边距。
如果在一行中放置超过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。这些类在只有一行的弹性子元素中是无效的。

# 布局容器

# 栅格网格系统（row 行 col列）

# 相应断点

# z-index

# 网格系统

# 12栅格

# 重排序

# 列偏移

# 弹性盒子