bootstrap_02

一、轮播效果
概述：

这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。

工作原理：

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

示例：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
二、列表组
概述：

列表组是一个灵活而且强大的组件，不仅仅可以用来显示简单的元素列表，还可以通过定义显示复杂的内容。

基本示例：

最基本的列表组就是一个无序列表、带有几个列表项以及适当的样式定义类。在此基础上可以使用下列选项，或根据你自己的需要调整CSS。

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
三、图文框
概述：

使用Bootstrap中的.figure图文框组件组合图象与文本的示例和文档。

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。

基本示例：

结合我们的文本实用工具可以轻松对齐图文框的说明文字（比如右对齐、左对齐，只要引用.text-*方法即可-译者注）。

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>