【发布时间】:2018-03-21 17:28:00
【问题描述】:
网站上的一切正常。我正在尝试实现引导轮播,但是它们没有滑动,我在 bootsnip 上尝试了一些示例,甚至官方网站上的示例也不起作用?有人知道为什么吗?我认为这可能是因为 javascript 链接,但它看起来不错?
HTML 代码
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div id="wrap">
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="index.html" >
<img src="assets/img/logo.png">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a id="activenav" href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="book.html">BOOK A TABLE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary"><a href="menu.html">View Menu</a></div>
<div class="btn btn-primary"><a href="menu.html">Book a table</a></div>
</div>
</div>
</div>
<div class="container">
<div class="intro">
<h1> Quality Food, Drinks and Atmosphere! </h1>
<p>Welcome to the Beckwood! Here at the beckwood we specialise in authentic home made dishes hand cooked by our chefs.<br> Not only do we offer beautiful food we also provide entertainment, live sports and great quality beer.<br> Not only do we offer beautiful food we also provide entertainment.</p>
</div>
</div>
<!--about-->
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-12 text-center marb-35">
</div>
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="col-md-6 col-sm-6">
<div class="about-info">
<h2 class="heading">A small heading goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, molestiae. Autem iusto esse necessitatibus ex corporis earum quaerat voluptates quibusdam dicta!</p>
<h2 class="heading">A small heading goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, molestiae. Autem iusto esse necessitatibus ex corporis earum quaerat voluptates quibusdam dicta!consectetur adipisicing elit. Libero impedit inventore culpa vero accusamus in nostrum dignissimos modi, </p>
</div>
</div>
<div class="col-md-6 col-sm-6">
<img id="beckwoodabout" src="assets/img/image1.jpeg" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<br>
</section>
<!--/about-->
<div class="homebar">
<div class="container">
<div class="row">
<div class="col-md-4 margin-b-30">
<h2>Our Carvery</h2>
<img id="carvpic" src="assets/img/carvery.jpg"><br><br>
<div class="overflow-hidden">
<p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.</p>
<button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>
</div>
</div>
<div class="col-md-4 margin-b-30">
<h2>Events</h2>
<img id="carvpic" src="assets/img/events.jpg"><br><br>
<p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.</p>
<button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>
<div class="overflow-hidden">
</div>
</div>
<div class="col-md-4 margin-b-30">
<h2>Function Room</h2>
<img id="carvpic" src="assets/img/functionroom.jpg"><br><br>
<div class="overflow-hidden">
<p>lorem ipsum and beckwood this is a test.lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.
lorem ipsum and beckwood this is a test.</p>
<button type="button" class="btn btn-warning"><a href="book.html">Book Now</a></button>
</div>
</div>
</div>
</div>
</div>
<br><br>
<iframe id="maps"
width="100%"
height="300px"
padding="0px"
margin="0px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB0d_sYwCWD5owhYY4UYb-i7VlOOnx2_o4
&q=The Beckwood,Scunthorpe" allowfullscreen>
</iframe>
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3">
<img id="footerlogo" src="assets/img/logo.png">
</div>
<div class="col-sm-4">
<h5>Opening Times</h5>
<p class="opening hours"></p>
<p>Tue-Thu ~ 12:00 - 23:00</p>
<p>Friday ~ 12:00 - 00:00</p>
<p>Saturday ~ 12:00 - 00:00</p>
<p>Sunday ~ 12:00 - 22:30</p>
</div>
<div class="col-sm-1">
<h5>Navigation</h5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="book.html">Book</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-sm-4">
<div class="social-networks">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="google"><i class="fa fa-instagram"></i></a>
</div>
<img class="center" src="assets/img/hygeine.png">
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2018 The Beckwood.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="validator.js"></script>
<script src="contact.js"></script>
</body>
</html>
【问题讨论】:
-
您是否检查过浏览器的开发者工具控制台是否有错误?
-
另外,尝试多个浏览器。 IE经常有问题。你试过 Chrome 和 FF 吗?
-
是的,我正在使用 chrome atm,我得到的唯一错误是无法加载资源:net::ERR_FILE_NOT_FOUND
-
那么哪个文件没有找到??
-
嗯,没说
标签: html css twitter-bootstrap slider carousel