BootWiki教程网
源代码：
点击运行
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <link href="//cdn.staticfile.net/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script> <script src="//cdn.staticfile.net/popper.js/1.12.5/umd/popper.min.js"></script> <script src="//cdn.staticfile.net/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <style> /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } </style> </head> <body> <div class="carousel slide" data-ride="carousel" id="demo"> <!-- 指示符 --> <ul class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#demo"></li> <li data-slide-to="1" data-target="#demo"></li> <li data-slide-to="2" data-target="#demo"></li> </ul> <!-- 轮播图片 --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/try/images/mix/img_fjords_wide.jpg"> </div> <div class="carousel-item"> <img src="/try/images/mix/img_nature_wide.jpg"> </div> <div class="carousel-item"> <img src="/try/images/mix/img_mountains_wide.jpg"> </div> </div> <!-- 左右切换按钮 --> <a class="carousel-control-prev" data-slide="prev" href="#demo"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" data-slide="next" href="#demo"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html>
运行结果