目录
1.Bootstrap概述
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.
②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架
2.Bootstrap三大核心组成部分
①基本CSS
设置全局的CSS样式，基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统；
②组件
无数可以复用的组件，包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能；
③JS插件
Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”
3.Bootstrap的环境搭建
①使用Bootstrap 4 CDN
-
国内推荐使用 : https://www.staticfile.org/
-
国际推荐使用：https://cdnjs.com/
②引入Bootstrap依赖
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>4.Bootstrap与原生态js代码的对比
案例对比：原生态js轮播图的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 主体部分 */
* {
margin: 0;
padding: 0;
list-style: none;
}img {
width: 680px;
height: 340px;
}#slider {
position: relative;
width: 680px;
height: 340px;
margin: 100px auto;
/* outline: 2px solid red; */
overflow: hidden;
}.slider-list {
display: flex;
position: relative;
left: 0px;
width: 100%;
height: 100%;
/* transform: translateX(-680px); */
transition: all 1s;
}.slider-list li {
width: 680px;
height: 340px;
}/* 小点部分 */
.dot-list {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 2px 10px;
border-radius: 12px;
background-color: rgba(255, 255, 255, .3);
}.dot-list .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
}.dot-list .dot.cur {
background-color: red;
}/*箭头部分 */
.arraw {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.795);
display: none;
}.prev {
left: 0;
}.next {
right: 0;
}.arraw span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%);
width: 10px;
height: 10px;
border-bottom: 2px solid white;
border-left: 2px solid white;
}.prev span {
transform: translate(-50%, -50%) rotate(45deg);
}.next span {
transform: translate(-50%, -50%) rotate(-135deg);
}#slider:hover .arraw {
display: block;
}</style>
</head>
<body>
<div id="slider">
<!-- 图片部分 -->
<ul class="slider-list">
<!-- <li><a href="#"><img src="./img/5.jpg"></a></li> -->
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
<li><a href="#"><img src="img/1.jpg"></a></li>
</ul>
<!-- 小点部分 -->
<div class="dot-list">
<span class="dot cur"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!--箭头布分 -->
<a href="#" class="arraw prev" id="left">
<span></span>
</a>
<a href="#" class="arraw next" id="right">
<span></span>
</a></div>
<script type="text/javascript">
var slid = document.getElementById('slider');
var slidLis = slid.getElementsByTagName('ul')[0];
// var slidLis=document.querySelector(".slider-list")
var slidLi = slidLis.getElementsByTagName('li');
var lef = document.getElementById('left');
var righ = document.getElementById('right');var index = 0;
function lun() {
index++;
circe();
slidLis.style.left = index * -680 + "px";
slidLis.style.transition = "all 1s";
if (index === 5) {
index = 0;
setTimeout(function() {
slidLis.style.left = 0;
slidLis.style.transition = "none";
}, 1000)
}
circe();
}
righ.addEventListener("click", lun);
lef.addEventListener("click", function() {
index--;
if (index === -1) {
slidLis.style.left = 5 * -680 + "px";
slidLis.style.transition = "none";
index = 4;
setTimeout(function() {
slidLis.style.left = index * -680 + "px";
slidLis.style.transition = "all 1s";
}, 0);
} else {
slidLis.style.left = index * -680 + "px";
}
circe();
});
// 自动轮播
var autoplay = setInterval(lun, 2000);
slid.addEventListener("mouseenter", function() {
clearInterval(autoplay);
});
slid.addEventListener("mouseleave", function() {
clearInterval;
autoplay = setInterval(lun, 2000);
})//小圆点
var dotList = document.getElementsByTagName('span');
function circe() {
for (var i = 0; i < dotList.length; i++) {
if (i === index) {
dotList[i].classList.add("cur");
} else {
dotList[i].classList.remove("cur");
}
}
}</script>
</body>
</html>
Bootstrap实现轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 支持手机端 -->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- js -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img decoding="async" src="img/1.jpg" width = "100%" height = "500px">
</div>
<div class="carousel-item">
<img decoding="async" src="img/2.jpg" width = "100%" height = "500px">
</div>
<div class="carousel-item">
<img decoding="async" src="img/3.jpg" width = "100%" height = "500px">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</body>
</html>
2233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
