引导轮播格式化

时间:2014-04-24 19:19:53

标签: css twitter-bootstrap carousel

我是bootstrap的初学者,正在使用轮播项目进行教程。在我的窗口中有一个确实出现的小旋转木马,但是有一个非常细的条和非常小的滚动项,而不是教程显示的......这里是代码:

    <!DOCTYPE html> 
      <html lanf="en"> 
      <head> 
        <title>Bootstrap basic website</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!--Bootstrap --> 
        <!--Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">    
        <!-- Your CSS -->
        <link href="css/index.css" rel="sytlesheet"> 
      </head>


    <!-- Carousel Features -->
    <div id="myCarousel" class="carousel slide">

      <!-- 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="item active">First Slide</div>
        <div class="item">Second Slide</div>
        <div class="item">Third Slide</div>
      </div>

      <!-- Carousel nav -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
    </div>

  <!-- jQuery and javascript at end of page (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS:

    body {margin-bottom: 80px;}
    /*RESET*/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

    body {margin-bottom: 80px}

    .item{
    background-color: black;
    text-align: center;
    color: white;
    line-height: 300px;
    height: 300px;
    font-size: 50px;}

1 个答案:

答案 0 :(得分:-1)

如果我了解你,你想这样做吗? Demo Page