繁体   English   中英

无法启动Bootstrap

[英]Trouble getting Bootstrap to work

我正在尝试在我的网站上使用引导传送带,但仅显示第一张图片。 按钮上的箭头和切换按钮将不会切换到第二张或第三张照片。 控制台中的错误显示“找不到文件”。

我不确定我缺少什么,这让我发疯。 任何帮助将不胜感激,因为我确信这是我所缺少的快速而相对容易的事情...预先感谢!

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <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" role="listbox">
        <div class="item active">
          <img src="img/EM1.jpg" class="img-responsive" alt="...">
          <div class="carousel-caption"></div>
        </div>

        <div class="item">
          <img src="img/EM2.jpg" alt="...">
          <div class="carousel-caption"></div>
        </div>

        <div class="item">
            <img src="img/EM3.jpg" alt="..">
            <div class="carousel-caption"></div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span></a>

</div>

如果您未正确附加附件,则会出现file not found引导file not found的工作轮播代码错误。 因此最好重新开始编码,此代码段可以正常工作,希望对您有所帮助。

 h2{ margin: 0; color: #666; padding-top: 90px; font-size: 52px; font-family: "trebuchet ms", sans-serif; } .item{ background: white; text-align: center; height: 300px !important; } .carousel{ margin-top: 20px; } .bs-example{ margin: 20px; } .carousel.carousel-fade .item { opacity:0; filter: alpha(opacity=0); /* ie fix */ } .carousel.carousel-fade .active.item { opacity:1; filter: alpha(opacity=100); /* ie fix */ } 
 <head> <meta charset="UTF-8"> <title>Example of Twitter Bootstrap 3 Carousel</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="bs-example"> <div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel"> <!-- Carousel indicators --> <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> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item carousel-fade"> <h2>Slide 1</h2> <div class="carousel-caption"> <h3>First slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item carousel-fade"> <h2>Slide 2</h2> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p> </div> </div> <div class="item carousel-fade"> <h2>Slide 3</h2> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </body> </html> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM