bootstrap轮播图模板
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>轮播展示</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}
/*轮播图下面距离*/
.carousel {
margin-bottom: 4rem;
}
.carousel-item > img {
/*指定高度和宽度*/
height: 32rem;
width: 100%;
}
/*上下边距*/
.featurette-divider {
margin: 5rem 0;
}
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
</style>
</head>
<body>
<!--导航栏-->
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="https://v4.bootcss.com/docs/examples/carousel/#">logo</a>
<!--隐藏按钮-->
<button class="navbar-toggler"
data-target="#navbarCollapse" data-toggle="collapse" type="button">
<!--隐藏的图标-->
<span class="navbar-toggler-icon"></span>
</button>
<!--小屏幕下要隐藏的内容，根据id对应-->
<div class="collapse navbar-collapse" id="navbarCollapse">
<!--功能列表 mr-auto:向左对齐-->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://v4.bootcss.com/docs/examples/carousel/#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://v4.bootcss.com/docs/examples/carousel/#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!--搜索框-->
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" placeholder="Search" type="text">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!--主体-->
<main>
<!--轮播图-->
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!--指示器-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!--轮播内容-->
<div class="carousel-inner">
<div class="carousel-item active">
<!--图片-->
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg">
<!--图片上的文字-->
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="https://v4.bootcss.com/docs/examples/carousel/#">Sign
up today</a></p>
</div>
</div>
<div class="carousel-item">
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="https://v4.bootcss.com/docs/examples/carousel/#">Learn
more</a></p>
</div>
</div>
<div class="carousel-item">
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Some representative placeholder content for the third slide of this carousel.</p>
<p><a class="btn btn-lg btn-primary" href="https://v4.bootcss.com/docs/examples/carousel/#">Browse
gallery</a></p>
</div>
</div>
</div>
<!--向前和后的按钮-->
<a class="carousel-control-prev" data-slide="prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" data-slide="next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!--主要内容-->
<div class="container">
<!--重复的三个 -->
<div class="row text-center">
<div class="col-lg-4">
<!--rounded-circle:圆形-->
<img class="rounded-circle" src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 140px;
height: 140px">
<h2>Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the
first column.</p>
<!--链接按钮-->
<p><a class="btn btn-secondary" href="https://v4.bootcss.com/docs/examples/carousel/#">View details
»</a></p>
</div>
<div class="col-lg-4">
<img class="rounded-circle" src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 140px;
height: 140px">
<h2>Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second
column.</p>
<p><a class="btn btn-secondary" href="https://v4.bootcss.com/docs/examples/carousel/#">View details
»</a></p>
</div>
<div class="col-lg-4">
<img class="rounded-circle" src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 140px;
height: 140px">
<h2>Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="https://v4.bootcss.com/docs/examples/carousel/#">View details
»</a></p>
</div>
</div>
<!--重复的三个 -->
<hr class="featurette-divider">
<div class="row">
<!--左面7-->
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading.
<span class="text-muted">It’ll blow your mind.</span>
</h2>
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting
prose here.
</p>
</div>
<!--右面5-->
<div class="col-md-5 text-center">
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 20rem;
height: 20rem">
</div>
</div>
<hr class="featurette-divider">
<div class="row">
<div class="col-md-5 text-center">
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 20rem;
height: 20rem">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really
intended to be actually read, simply here to give you a better view of what this would look like
with some actual content. Your content.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really
intended to be actually read, simply here to give you a better view of what this would look like
with some actual content. Your content.</p>
</div>
<div class="col-md-5 text-center">
<img src="https://images2.alphacoders.com/436/thumbbig-436426.jpg" style="width: 20rem;
height: 20rem">
</div>
</div>
<hr class="featurette-divider">
</div>
<!-- 页脚 -->
<footer class="container">
<!--右浮动-->
<p class="float-right"><a href="#myCarousel">Back to top</a></p>
<p>© 2017-2021 Company</p>
</footer>
</main>
</body>
</html>