之前一切正常,但现在我启动了我的网站,但轮播坏了。按钮等也是如此。
引导程序发生了什么? 我猜 CDN 有问题。我看到了 Bootstrap 的按钮和滑块,但它们无法正常工作。
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Факультет экономики, психологии, менеджмента</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-dark">
<div class="container text-center mt-5">
<h1>Факультет экономики, психологии, менеджмента!!!</h1>
<h2>История</h2>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row mt-5">
<div class="col-md-4">
<a href="economic.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/economic.jpg" class="card-img-top" alt="Economic Faculty">
<div class="card-body">
<h5 class="card-title">Экономический факультет</h5>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="international.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/international.jpg" class="card-img-top" alt="International Business Faculty">
<div class="card-body">
<h5 class="card-title">Факультет международного бизнеса</h5>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="psychology.html" class="btn btn-outline-warning btn-lg w-100">
<div class="card">
<img src="images/psychology.jpg" class="card-img-top" alt="Psychology Faculty">
<div class="card-body">
<h5 class="card-title">Факультет психологии</h5>
</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
我的styles.css:
/* styles.css */
body {
background-color: #738394;
font-family: 'Roboto', sans-serif;
}
h1 {
color: #F8F8FF;
font-family: 'Montserrat', sans-serif;
}
.carousel-item img {
height: 400px;
object-fit: cover;
}
.card {
cursor: pointer;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
.btn {
background-color: #FF4500;
border-color: #FF4500;
color: #FFFFFF;
}
.btn:hover {
background-color: #DC370B;
border-color: #DC370B;
color: #FFFFFF;
}
.card-body {
background-color: #FFFFFF;
}
.container.text-center {
background-color: #808080;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}
我也使用 bootstrap 作为 CDN 并且所有启动 CDN(例如,获取图标..)现在都不起作用
这发生在我们的生产服务器中,发布的应用程序(android,ios),,