1.引入两个核心文件:(注意引入的位置)
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
2.写入:
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
3.引入jquery
<!-- 注意:在最新的Bootstrap核心js文件上方引入jquery -->
<script src="./js/jquery-3.6.1.min.js"></script>
使用模板: 表单模板和轮播图模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.form-group{
width: 500px;
}
.form-control{
width: 350px;
}
.txt{
font-size: 20px;
color: red;
}
.item img{
width: 100%;
height: 100%;
}
.slide{
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators:底部小圆点 -->
<ol class="carousel-indicators">
<!-- 轮播图的图片数和顺序 -->
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides :轮播图片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/1.jpg" alt="...">
<div class="carousel-caption">
<!-- 图片描述信息 -->
<span class="txt">图片一</span>
</div>
</div>
<div class="item">
<img src="./img/2.jpg" alt="...">
<div class="carousel-caption">
<span class="txt">图片二</span>
</div>
</div>
<div class="item">
<img src="./img/3.jpg" alt="...">
<div class="carousel-caption">
<span class="txt">图片三</span>
</div>
</div>
<div class="item">
<img src="./img/4.jpg" alt="...">
<div class="carousel-caption">
<span class="txt">图片四</span>
</div>
</div>
...
</div>
<!-- Controls :左右箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
<!-- 注意:在最新的Bootstrap核心js文件上方引入jquery -->
<script src="./js/jquery-3.6.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</html>
效果