位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > Bootstrap4 轮播
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 自定义文件上传控件 下一篇: Bootstrap4 模态框

轮播是一个循环的幻灯片:

image.png

如何创建轮播

以下实例创建了一个简单的图片轮播效果

实例

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul>
    <li data-target="#demo" data-slide-to="0"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div>
    <div class="carousel-item active">
      <img src="img_fjords_wide.jpg">
    </div>
    <div>
      <img src="img_nature_wide.jpg">
    </div>
    <div>
      <img src="img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a href="#demo" data-slide="prev">
    <span></span>
  </a>
  <a href="#demo" data-slide="next">
    <span></span>
  </a>
 
</div>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>
 
<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul>
    <li data-target="#demo" data-slide-to="0"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div>
    <div class="carousel-item active">
      <img src="img_fjords_wide.jpg">
    </div>
    <div>
      <img src="img_nature_wide.jpg">
    </div>
    <div>
      <img src="img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a href="#demo" data-slide="prev">
    <span></span>
  </a>
  <a href="#demo" data-slide="next">
    <span></span>
  </a>
 
</div>
 
</body>
</html>

轮播图片上添加描述

在每个 <div> 内添加 <div> 来设置轮播图片的描述文本::

 

实例

<div>
  <img src="img_fjords_wide.jpg">
  <div>
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </div>
</div>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>
 
<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul>
    <li data-target="#demo" data-slide-to="0"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div>
    <div class="carousel-item active">
      <img src="img_fjords_wide.jpg">
      <div>
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div>
      <img src="img_nature_wide.jpg">
      <div>
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div>
      <img src="img_mountains_wide.jpg">
      <div>
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a href="#demo" data-slide="prev">
    <span></span>
  </a>
  <a href="#demo" data-slide="next">
    <span></span>
  </a>
 
</div>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

以上实例中使用的类说明

描述

.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

切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。


上一篇: 自定义文件上传控件 下一篇: Bootstrap4 模态框
毕业设计网             广告联系QQ:45157718(微信同号)