1.Bootstrap4 .container 实例
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>
2.Bootstrap4 网格系统
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
第一个例子：创建一行(<div class="row">)。然后， 添加是需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
#等宽响应式列,在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
#不等宽响应式列,在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
#在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>菜鸟教程</p>
</div>
<div class="col-sm-9 col-md-6">
<p>菜鸟教程</p>
</div>
</div>
</div>
#在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>菜鸟教程</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>菜鸟教程</p>
</div>
</div>
</div>
#偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-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>
3.Jumbotron（超大屏幕）
会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
<div class="jumbotron">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
4.Bootstrap 4 通过 flex 类来控制页面的布局。
#使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
#创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
# .flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
#垂直方向:
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素
#内容排列:
.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around
<div class="d-flex justify-content-start">...</div>
# .flex-fill: 强制设置各个弹性子元素的宽度是一样的
# .flex-grow-1: 设置子元素使用剩下的空间,前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间
# .order: 可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)
# .mr-auto: 可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:
# 弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
# 内容对齐:
使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
<div class="d-flex flex-wrap align-content-center">..</div>
# 子元素对齐
设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
<div class="container mt-3">
<h2>子元素对齐</h2>
<p>如果要设置单行的子元素对齐可以使用 .align-content-* 类来控制。</p>
<p>.align-items-start:</p>
<div class="d-flex align-items-center bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
</div>
# 设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
# 响应式 flex 类
* 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。
.d-*-flex 根据不同的屏幕设备创建弹性盒子容器
.d-*-inline-flex 根据不同的屏幕设备创建行内弹性盒子容器
5.多媒体对象
# 创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
<div class="media border p-3">
<img src="mobile-icon.png" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
# 多媒体对象嵌套
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）
要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:
<div class="media border p-3">
<img src="mobile-icon.png" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
<div class="media p-3">
<img src="mobile-icon.png" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
</div>
</div>
# 如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:
<div class="media border p-3">
<div class="media-body">
<h4>菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
<img src="mobile-icon.png" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
# 定位多媒体图片位置
我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：
<!-- 头部 -->
<div class="media">
<img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>头部 -- 菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
<!-- 居中 -->
<div class="media">
<img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>居中 -- 菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
<!-- 底部 -->
<div class="media">
<img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>底部 -- 菜鸟教程</h4>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
