淘先锋技术网

首页 1 2 3 4 5 6 7

bootstrap4

文章目录

1. 容器

.container(固定宽度)或.container-fluid(全屏宽度)。栅格系统等控件都必须放置在容器内。

2. 栅格系统

1. 规则

  1. 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
  2. 使用行来创建水平的列组。
  3. 内容需要放置在列中，并且只有列可以是行的直接子节点。
  4. 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
  5. 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
  6. 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
  7. Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
–超小设备<576px平板>=576px桌面显示器>=768px大桌面显示器>=992px超大桌面显示器>=1200px
容器最大宽度None(auto)540px720px960px1140px
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-
列数量和1212121212
间隙宽度30px
可嵌套Yes
列排序Yes

2. 平板、桌面、大桌面显示器、超大桌面显示器

<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>

3. 偏移列

偏移列通过 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. 小工具

1. 边框

使用border类可以添加或移除边框

.border、.border-0、.border-right-0、.border-right-0、.border-bottom-0、.border-left-0

2. 边框颜色

span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

3. 边框样式

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

4. 浮动

.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:

<div class="clearfix">
  <span class="float-left">左浮动</span>
  <span class="float-right">右浮动</span>
</div>

5. 响应式浮动

<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>

6. 对齐

.mx-auto.mr-auto.ml-auto
居中左对齐右对齐

7. 宽度

 <p>元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:</p>
  <div class="w-25 bg-warning">宽度 25%</div>
  <div class="w-50 bg-warning">宽度 50%</div>
  <div class="w-75 bg-warning">宽度 75%</div>
  <div class="w-100 bg-warning">宽度 100%</div>
  <div class="mw-100 bg-warning">最大宽度 100%</div>

8. 高度

<p>元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
  </div>

3. 字体

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

  <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
  <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
  
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
  
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
标签描述
h1-h6定义了所有的 HTML 标题（h1 到 h6）的样式
Display标题类Display 标题可以输出更大更粗的字体样式: .display-1, .display-2, .display-3, .display-4。
smallsmall 元素用于字号更小的颜色更浅的文本
mark使用 mark 元素来高亮文本
abbr在文本底部的一条虚线边框
blockquote引述内容
dl描述性的列表
code标记代码
kbd键盘快捷键标记
pre多行文本
类名描述
.font-weight-bold加粗文本
.font-weight-normal普通文本
.font-weight-light更细的文本
.font-italic斜体文本
.lead让段落更突出
.small指定更小文本 (为父元素的 85% )
.text-left左对齐
.text-center居中
.text-right右对齐
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap段落中超出屏幕部分不换行
.text-lowercase设定文本小写
.text-uppercase设定文本大写
.text-capitalize设定单词首字母大写
.initialism显示在 abbr 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled移除默认的列表样式，列表项中左对齐 (ul 和 ol 中)。 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline将所有列表项放置同一行
.pre-scrollable使 pre 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

4. 颜色

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
  
   <h2>背景颜色</h2>
  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

5. 导航

创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。

.nav-justified 类可以设置导航项齐行等宽显示。
.nav-pills 类可以将导航项设置成胶囊形状。
.flex-column 类用于创建垂直导航
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。 这个对导航栏无效


动态选项卡。选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，淡入效果可以在 .tab-pane 后添加 .fade类。胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"。

<div class="tabbable" id="tabs-761376">
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="#panel-296123" target="_blank" rel="external nofollow"  data-toggle="tab">Section 1</a>
		</li>
        <li>
	        <a href="#panel-364654" target="_blank" rel="external nofollow"  data-toggle="tab">Section 2</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="panel-296123">
			<p>
				I'm in Section 1.
			</p>
		</div>
		<div class="tab-pane" id="panel-364654">
			<p>
				Howdy, I'm in Section 2.
			</p>
		</div>
	</div>
</div>

6. 导航栏

使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

.navbar-brand 类用于高亮显示品牌/Logo

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id。通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

<form class="form-inline">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
  
.fixed-top .fixed-bottom 类来实现导航栏的固定


<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link</a>
      </li>    
    </ul>
  </div>  
</nav>

7. 下拉菜单

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <div class="dropdown-header">Dropdown header 1</div>
    <a class="dropdown-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 1</a>
    <a class="dropdown-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 2</a>
    <a class="dropdown-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 3</a>
    <div class="dropdown-divider"></div>
    <div class="dropdown-header">Dropdown header 1</div>
    <a class="dropdown-item" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 1</a>
  </div>
</div>

.dropup  设置上拉

8. 表单控件

1. input

类型有 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。

2. textarea

<div class="form-group">
  <label for="comment">评论:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

3. 复选框(checkbox)

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

4. 单选框(Radio)

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

5. select下拉菜单

.multiple 类 可以选择多个
<div class="form-group">
  <label for="sel1">下拉菜单:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

9. 表单

表单元素 input, textarea, 和 select elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

1. 堆叠式

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. 内联式

所有内联表单中的元素都是左对齐的。

注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在 元素上添加 .form-inline类。

<form class="form-inline">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

10. 表格

类名描述
.table基础表格，没有任何效果
.table-striped在tbody标签中添加条纹效果
.table-bordered带边框，默认无边框
.table-hover添加悬停效果
.table-dark深灰色，可以是表格行的背景
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.thead-dark为表头thead添加黑色背景
.thead-light为表头thead添加灰色背景
.table-sm较小的表格
.table-responsive响应式表格，超过范围就会出现横向滚动条
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px(默认)
.table-responsive-xl< 1200px
<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

11. 分页

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Previous</a></li>
  <li class="page-item"><a class="page-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >1</a></li>
  <li class="page-item"><a class="page-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >2</a></li>
  <li class="page-item"><a class="page-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >3</a></li>
  <li class="page-item"><a class="page-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Next</a></li>
</ul>
.disabled 类可以设置分页链接不可点击
.active 类来高亮显示
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

12. 图片

  • 圆角
  • 椭圆
  • 缩略图
  • 对齐方式
  • 响应式
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

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

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

13. 轮播幻灯片

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>
类描述
.carousel创建一个轮播
.carousel-indicators为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner添加要切换的图片
.carousel-item指定每个图片的内容
.carousel-control-prev添加左侧的按钮，点击会返回上一张。
.carousel-control-next添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon与 .carousel-control-next 一起使用，设置右侧的按钮
.slide切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。