简体   繁体   English

无法启动Bootstrap

[英]Trouble getting Bootstrap to work

I'm trying to use the bootstrap carousel on my website, but only the first picture shows. 我正在尝试在我的网站上使用引导传送带,但仅显示第一张图片。 The arrows and toggle buttons on the button will not switch to the second or third photo. 按钮上的箭头和切换按钮将不会切换到第二张或第三张照片。 The error in the console says 'file not found'. 控制台中的错误显示“找不到文件”。

I'm not sure what I'm missing and it's driving me crazy. 我不确定我缺少什么,这让我发疯。 Any help would be appreciated as I'm sure it's a quick and relatively easy thing I'm missing... Thanks in advance! 任何帮助将不胜感激,因为我确信这是我所缺少的快速而相对容易的事情...预先感谢!

<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>

here the working carousel code of bootstrap file not found error comes when you attached incorrectly. 如果您未正确附加附件,则会出现file not found引导file not found的工作轮播代码错误。 so it would be better that you start coding again this snippet is working i hope it helps. 因此最好重新开始编码,此代码段可以正常工作,希望对您有所帮助。

 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