Javascript 为什么当我添加以下引导时，我的页面会变成白色？
我正在做一个班级项目，要求我编写一个网站，销售一些东西。我正在尝试创建购物车，以便当我单击“添加到购物车”时，它应该添加产品。然而，当我添加引导链接时，我的页面变为白色。引导是问题所在还是我的代码有问题 我第一次使用这个网站，所以我不确定这是否是我需要发布的全部内容。如果需要任何其他代码，比如js，请询问。先谢谢你Javascript 为什么当我添加以下引导时，我的页面会变成白色？,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我正在做一个班级项目，要求我编写一个网站，销售一些东西。我正在尝试创建购物车，以便当我单击“添加到购物车”时，它应该添加产品。然而，当我添加引导链接时，我的页面变为白色。引导是问题所在还是我的代码有问题 我第一次使用这个网站，所以我不确定这是否是我需要发布的全部内容。如果需要任何其他代码，比如js，请询问。先谢谢你 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head
<!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进行一次引用，以确保在引导之前引用它。有多个引用将抛出错误 您似乎还引用了引导程序两次，一次是在结束时从CDN引用，一次是在开始时使用本地引用。多个引导引用也可能引发错误 您似乎还缺少对的引用，这是引导4的必需依赖项 css\splitslick\style.css用反斜杠引用；您将需要向前斜线 您的local script.js和style.css位于Bootstrap的js和css之前，这意味着Bootstrap将覆盖您自己的代码；您将希望最后加载代码 删除这些附加引用，并确保引导 在jQuery之后，PopperJS和Tether应该可以解决您的问题。将您自己的JavaScript和CSS移到每个相应部分的底部应该会导致它覆盖任何冲突的引导代码 这里有一个修改过的应该可以工作。注意以下顺序： 引导4 CSS->插件->字体->自定义CSS jQuery->PopperJS->Tether->bootstrap4js->customjs 打印素数
您似乎有四个不同的jQuery版本，包括3.4.1、2.1.3、3.1.0和slim。您只需要对jQuery进行一次引用，以确保它在引导之前出现。您似乎还引用了引导两次，一次是从CDN开始的，另一次是从本地引用开始的。删除这些额外的引用，并确保在jQuery之后启动应该可以解决您的问题，尽管您还需要Popper.JS。