标签：轮播 bootstrap Some content featurette representative carousel placeholder 模板
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>
标签：轮播,bootstrap,Some,content,featurette,representative,carousel,placeholder,模板 来源： https://blog.csdn.net/qq_45902401/article/details/121236613
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。