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。

于 2013-03-28T13:00:45.617 回答