这是我第一次使用bootstrap。我的自举转盘只有指标。这可能是因为我还没有指定图片。
请参阅以下代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#2E2D88;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
<h1>Great food</h1>
<p>Taste what keeps people coming back</p>
<p><a href="#" class="btn btn-primary btn-sm">Order for delivery, carry out, or catering</a></p>
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
<h1>Great prices</h1>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p><a href="#" class="btn btn-primary btn-sm">Order for delivery, carry out, or catering</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
<p>
Blah blaha blahb lbahlbahbabablah balha blha blah blah
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
相关问题：我不确定我是否应该使用bootstrap 4或3.我已经听过bootstrap 4编译sass但我不知道那是什么。有这种框架经验的人可以帮助我吗？
答案 0 :(得分：2)
您需要在carousel-inner类中链接您的图像。
检查以获取更多详细信息：
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
答案 1 :(得分：0)
在我使用https://v4-alpha.getbootstrap.com/components/carousel/中的示例之前，我无法完成此工作。
以下是我提出的建议：
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#3e4fa9;
border-radius:0px;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Welcome</h1>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/sampledining.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great food</h3>
<p>Taste what keeps people coming back</p>
<p><a href="#" class="btn btn-primary btn-sm">Order for delivery, carry out, or catering</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/samplegyros7.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great prices</h3>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p><a href="#" class="btn btn-primary btn-sm">Order for delivery, carry out, or catering</a></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="jumbotron">
<p>
blah blah blah
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>