Question

我看到其他人有这个问题。在一种情况下，该人只是忘记了自己的Bootstrap CDN，在另一种情况下，他们将所有幻灯片设置为“活动”，并具有多个“轮播内部”类。这些事情我都没有做。那我为什么会收到这个错误？如果我“从源代码构建[他们的] Javascript”，我看到了一些关于需要util.js的信息，但我不认为这就是我正在做的事情。我只是在制作普通的旧网页。

<!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    @font-face {
    font-family: Kunstler Script;
    src: url(kunstler.ttf);
}

  #content {
    display: none;
  }

    #time {
      font-weight: bold;
    }

@media only screen and (max-width: 768px) {

  img{
    height: 150px;
  }


  /*Why isn't google developer tools responding to the change I made?*/
  /*Okay, evidently I've got a lot to learn about responsive design.*/
}
</style>

</head>

<body onload = "showStuff()">


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li class = "active"><a href="index.html">About Me</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

<div id = "content">

<div class ="row">
<div class = "col-md-1"></div>
<div class = "col-md-10">

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/me1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me3.jpg" alt="Third slide">
    </div>
  </div>
</div>


<h1>About Me</h1><p>Good <span id = "time">afternoon</span> 
  (yes, I know what time it is), sir or madam.  My name is Dennis Markham.  I am 28 years old, and a recent graduate of the University
  of Texas Austin Coding Bootcamp.  I also graduated with Certificate in Web Development from Norwalk Community College.  I am currently
  an instructor for <a href = "https://www.codingwithkids.com/#!/"> Coding With Kids</a>.
  I am looking for a job in web development, preferably front end.  I am particularly fluent in HTML, CSS, Javascript, and 
  JQuery, but also have experience in Java, Node.js, AJAX, SQL, PHP, ES5, ES6, Mongo, Mongoose, and React, as well as substantial 
  experience with softwares/websites such as Sublime, Netbeans, GitBash, GitHub, and SQL Workbench.</p> 
  <p>Signed,</p>
<span style = "font-family: French Script MT; font-size: 3em;">Dennis E. Markham</span> 
</div>
<div class = "col-md-1"></div>
</div>

</div>

<script>
  function showStuff() {
    $("#content").fadeIn("slow");
}

var hours = parseFloat(moment().startOf('day').fromNow());
console.log(hours);

if (hours >= 17 || hours < 5)
{
 $("#time").text("evening");
}
else if (hours < 12)
{
  $("#time").text("morning");
}
else
{
  $("#time").text("afternoon");
}

</script>

</body>
</html>

Answer 1

将您的引导CDN更新为最新链接。检查https://getbootstrap.com/docs/4.1/getting-started/introduction/

Bootstrap Carousel无法正常工作，只是堆叠图像

1 个答案: