Bootstrap4(一)重点----网格系统，图像形状，轮播，多媒体对象，滚动监听

一 . 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

 1. 网格系统规则:

• 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
• 使用行来创建水平的列组。
• 内容需要放置在列中，并且只有列可以是行的直接子节点。
• 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
• 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
• 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。

2.网格的基本结构

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<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>

3. 创建相等宽度的列，Bootstrap 自动布局

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

4. 等宽响应式列(在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版)
    实例：

 <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>

5. 不等宽响应式列
    实例：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

6. 平板、桌面、大桌面显示器、超大桌面显示器
（在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：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>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

7.偏移列

（偏移列通过 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>

二. 图像形状

1. 圆角图片（.rounded 类可以让图片显示圆角效果）

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

2. 椭圆图片（.rounded-circle 类可以设置椭圆形图片）

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

3. 缩略图（.img-thumbnail 类用于设置图片缩略图(图片有边框)）

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

4. 图片对齐方式（使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐）

<img src="paris.jpg" class="float-left"> 
<img src="cinqueterre.jpg" class="float-right">

5. 图片居中（使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐）

<img src="paris.jpg" class="mx-auto d-block">

6响应式图片（图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto;）

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

三. 轮播

借用：

轮播图片上添加描述
在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本：:

四 . 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听？

    解析
（1）想要监听的元素（通常是 body）添加 data-spy=“scroll” 。

（2）添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。（注意可滚动项元素上的css id （<div id="section1">）必须匹配导航栏上的链接选项 （<a href="#section1">)。）

（3）可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

（4）设置相对定位: 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。

五. 多媒体对象

1. 基础多媒体对象
创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果

<div class="container mt-3">
    <div class="media border p-3">
        <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
        <div class="media-body">
            <h4>菜鸟教程</h4>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
    </div>
</div>

2. 多媒体对象嵌套
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中。

<div class="container mt-3">
  <div class="media border p-3">
    <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <div class="media p-3">
        <img src="https://static.runoob.com/images/mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
        <div class="media-body">
        </div>
      </div>  
    </div>
  </div>
</div>

3. 多媒体对象图片显示在右边（将头像图片显示在右侧，可以在 .media-body 容器后添加图片:）

4. 定位多媒体图片位置（可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置）

<img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">