个人中心
gpt4 book ai didi

javascript - 为什么当我添加以下 Bootstrap 时，我的页面变成白色？

转载 作者：行者123 更新时间：2023-12-02 22:45:28 26 4
gpt4 key购买 nike

我正在做一个类(class)项目，需要我编写一个销售东西的网站。我正在尝试创建购物车，以便当我单击添加到购物车时它应该添加产品。但是，当我添加引导链接时，我的页面变成白色。是 Bootstrap 有问题还是我的代码有问题？

我第一次使用这个网站，所以我不确定这是否是我需要发布的全部内容。如果需要任何其他代码(例如 js)，请询问。预先感谢您。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Printing Prime</title>
  <link rel="icon" type="image/png" href="img/favi.png">
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <script src="js/bootstrap/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
  <link rel="stylesheet" href="css\splitslick\style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    (problem***)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>
    <section id="" class="container-fluid cart">
        <article id="" class="col">
            <span class="open-modal">
                <i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
            </span>
        </article>
    </section>

<section id="" class="container-fluid">
    <article id="" class="row">
         <div id="mask"></div>
            <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
              </div>
              <div class="modal-body">
                <table class="show-cart table">

                </table>
                <div>Total price: $<span class="total-cart"></span></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Order now</button>
              </div>
            </div>
          </div>
        </div>
    </article>
</section>

  <section id="" class="container-fluid">
    <article id="" class="row">
      <div id="" class="col col-md-12">
        <nav class="navi">
          <ul class="list">
            <li><a href="#products">PRODUCTS</a></li>
            <li><a href="#reviews">REVIEWS</a></li>
            <li style="padding: 10px; margin: 10px;"><a href="index.html"><img src="img/ppppp.png" id="logo"></a></li>
            <li><a href="#contact">CONTACT</a></li>
            <li><a href="#about">ABOUT US</a></li>
          </ul>
        </nav>
      </div>
    </article>
  </section>


  <section id="" class="container-fluid">
    <article id="" class="row">
      <div id="" class="col col-md-12">
        <div class="split-slideshow">
          <div class="slideshow">
            <div class="slider">
              <div class="item">
                <img src="img/banner1.png" />
              </div>
              <div class="item">
                <img src="img/banner2.png" />
              </div>
              <div class="item">
                <img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
              </div>
              <div class="item">
                <img src="img/banner4.jpeg" />
              </div>
            </div>
          </div>
          <div class="slideshow-text">
            <div class="item"><a href="#" class="ss">PRINTING PRIME</a></div>
            <div class="item"><a href="#" class="ss">PRODUCTS</a></div>
            <div class="item"><a href="#" class="ss">THREE</a></div>
            <div class="item"><a href="#" class="ss">ABOUT US</a></div>
          </div>
        </div>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
        <script src="js/splitslick/js/index.js"></script>
      </div>
    </article>
  </section>

  <!-- <section id="" class="container-fluid">
  <article id="" class="row">
  <div id="" class="col col-md-12">
  <div class="col-md-6">

</div>
<div clas="col-md-6">
<div class="col-lg-12">

</div>
</article>
</section> -->

<section id="products" class="container-fluid">
  <article id="" class="row">
    <div id="" class="col col-md-12 product-grid">
      <div class="col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
              <h5 style="color:white;">Sad Face Cap</h5>
              <h5 style="color:white;">$12.99</h5>
              <div>
                  <input type="number" placeholder="# of items">
                  <a href="#" data-name="Sad Face Cap" data-price="12.99" class="add-to-cart btn btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
              <h5 style="color:white;">Signature Tee</h5>
              <div>
                <input type="number" placeholder="# of items">
                <input type="submit" value="Add To Cart" id="submit">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class=" col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
              <h5 style="color:white;">VHS Hoodie</h5>
              <div>
                <input type="number" placeholder="# of items" >
                <input type="submit" value="Add To Cart" id="submit">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>



  </body>
  </html>

最佳答案

您链接的文件似乎存在一些问题:

  • 您似乎包含四个不同的 jQuery 版本( 3.4.1 、 2.1.3 、 3.1.0 和 slim )。您只需要对 jQuery 进行一次引用(确保在 Bootstrap 之前引用它)。多个引用会引发错误。

  • 您似乎还引用了 Bootstrap 两次(一次是在 <head> 末尾处的 CDN，一次是在 <head> 的开头处使用本地引用)。多个 Bootstrap 引用也可能会引发错误。

  • 您似乎还缺少对 PopperJS 的引用，这是 Bootstrap 4 必需的依赖项。

  • css\splitslick\style.css用反斜杠引用；你需要正斜杠。

  • 您本地的script.js和style.css before Bootstrap 的 JS 和 CSS，这意味着 Bootstrap 会覆盖你自己的代码；您会希望您的代码最后加载。

删除这些额外的引用，并确保 Bootstrap 在之后出现 jQuery、PopperJS 和 Tether 应该可以解决你的问题。将您自己的 JavaScript 和 CSS 移动到每个相应部分的底部应该会导致它覆盖任何冲突的 Bootstrap 代码。

这是修改后的 <head>那应该有效。请注意以下顺序:

  • Bootstrap 4 CSS -> 插件 -> 字体 -> 自定义 CSS
  • jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> 自定义 JS

<head>
  <meta charset="utf-8">
  <title>Printing Prime</title>
  <link rel="icon" type="image/png" href="img/favi.png">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <link rel="stylesheet" href="css/splitslick/style.css">
  <link rel="stylesheet" type="text/css" href="css/home.css">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script src="js/script.js"></script>
</head>

关于javascript - 为什么当我添加以下 Bootstrap 时，我的页面变成白色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58422465/

26 4 0
文章推荐： Javascript 获取变量问题
文章推荐： sql-server - 由于内连接和左连接导致 SQL 查询速度慢？
文章推荐： angularjs - AngularJS 中的
文章推荐： javascript - 如何动态创建和删除具有自己的删除按钮的元素(包含输入、p-s、按钮)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com