Question

我已经下载了twitter bootsrap轮播示例。我注意到当我浏览幻灯片时没有任何反应，在我看来，bootstrap.css版本3中的“幻灯片”类是未知的。

根据下面的head部分，我相信我拥有所有必需的js和css文件。

我有2个问题。为什么“幻灯片”类未知，旋转木马是否可以直接开箱即用？

<head>
<link href ="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href ="/Content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="/Content/bootstrap/js-twitter-bootstrap/bootstrap-dropdown.js"></script>

        <script  data-main="/Scripts/main" src="~/Scripts/require.min.js"></script>
        <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    </head>

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div

Answer 1

这是轮播的工作代码，

     <!DOCTYPE html>
      <html lang="en">
      <head>
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
     <link href="carousel.css" rel="stylesheet">
    </head>
    <body>
   <div class="container">
<div id="myCarousel" class="carousel slide">
  <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">
    <div class="item active">
      <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Slide 1.</h1>

          <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Slide 2</h1>

          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Slide 3</h1>

          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<script src="../../assets/js/jquery.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>

为什么twitter bootstrap carousel class“slide”在bootstrap 3中未知

1 个答案: