1

以下の HTML をコピーしました - 理由はわかりませんが、ブラウザでこれを開くと、最初の画像で動かなくなり、遷移しません... 以下のすべてのコードを HTML に含めました。CSS および JS ファイルは、提供されている汎用のブートストラップ ファイルです。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap test site</title>

<link rel="stylesheet" href="css/bootstrap.css" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    $(document).ready(function(){
        $('.carousel').carousel();
    });
    </script>



</head>

<body>
    <div class="container">

    <div class="span8"> <img src="img/logo_title.png"> </div> 

        <div>

            <div id="this-carousel-id" class="carousel slide">
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here1</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here2</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here3</p>
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/1200x480" alt="" />
                  <div class="carousel-caption">
                    <p>Caption text here4</p>
                  </div>
                </div>
              </div><!-- /.carousel-inner -->
              <!--  Next and Previous controls below
                    href values must reference the id for this carousel -->
                <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
            </div><!-- /.carousel -->
        </div>  

    </div>

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


</body>
</html>
4

1 に答える 1

1

ブートストラップの JS ライブラリについては、必ず実際のライブラリを含めてください。あなたの場合、カルーセル ライブラリを除外しました。個別の js ファイルを必要とするその他の Bootstrap アドオンには、モーダル、ドロップダウン、およびツールチップが含まれます。追加してください：

 <script src="/js/bootstrap-carousel.js"></script>
<script src="/js/jquery.js"></script>

また、bootstrap.js を 2 回含めました。

于 2013-03-28T13:00:45.617 に答える