Bootstrap 3傳送帶壞了

Question

我正在第一個網站上工作，但似乎無法使旋轉木馬滑動或使按鈕無法工作。 我正在使用Bootstrap 3構建輪播。 我仔細查看了語法，甚至還嘗試了將引導程序中的代碼復制並粘貼到單獨的目錄中，以查看其是否有效。 那也失敗了。 如果有人可以告訴我我做錯了，我將不勝感激。

<!DOCTYPE html>
<html>
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <title>Home</title>
  </head>


  <body>   
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar"
          aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="index.html" class="navbar-brand">MG</a>
        </div>

        <div class="collapse navbar-collapse" id="mainNavBar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="resume.html">Resum&eacute</a></li>
          </ul>
        </div>
      </div>
    </nav>


    <div class="container-fluid">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="images/code.jpg" alt="Code" class="img-responsive"> 
          </div>

          <div class="item">
            <img src="images/gigabyte.jpg" alt="Motherboard" class="img-responsive"> 
          </div>

          <div class="item">
            <img src="images/mac.jpg" alt="Mac" class="img-responsive"> 
          </div>
        </div>

        <a href="#myCarousel" class="carousel-control left" data-slide="prev">
          <span class="icon-prev"></span>
        </a>

        <a href="#myCarousel" class="carousel-control right" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </div>



      <section>


        <a href="www.github.com/nix12">My github repository</a>

        <h2>List of skills and icons</h2>


        <div class="column1">Column1</div>
        <div class="column2">Column2</div>
        <div class="column3">Column3</div>


      </section>

    <footer>

    </footer>
  </body>

  <script type="text/javascript">
    $('#myCarousel').carousel();
  </script>
</html>

Answer 1

在使用bootstrap.js之前，您必須加載jQuery。 另外，您應該在</body>標記之前加載javascript文件。 這適用於您自己的腳本。 嘗試：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    <script>
        $('#myCarousel').carousel();
    </script>
</body>

Bootstrap 3傳送帶壞了

問題描述

1 個解決方案

解決方案1
0 已采納 2016-08-17 22:14:50

Bootstrap 3傳送帶壞了

問題描述

1 個解決方案

解決方案1 0 已采納 2016-08-17 22:14:50

解決方案1
0 已采納 2016-08-17 22:14:50