我的项目引导安装发生了什么?

问题描述 投票:0回答:1

之前一切正常,但现在我启动了我的网站,但轮播坏了。按钮等也是如此。

引导程序发生了什么? 我猜 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);
}


现在是这样的:enter image description here

但它是:enter image description here

upd:按钮也坏了 enter image description here

javascript html css frontend bootstrap-5
1个回答
0
投票

我也使用 bootstrap 作为 CDN 并且所有启动 CDN(例如,获取图标..)现在都不起作用

这发生在我们的生产服务器中,发布的应用程序(android,ios),,

© www.soinside.com 2019 - 2024. All rights reserved.