2015-12-24 174 views
-1

因此,我想弄清楚如何使用Bootstrap製作本網站(請記住我是bootstrap的新手),然後弄清楚如何放置我的導航在我的旋轉木馬上面,一切都很順利,但是當我嘗試添加內容時,它不會彈出,直到我添加了一個div標籤,但是一旦我完成了它,它就會一直到頂部。我通過移動傳送帶頂部的導航代碼解決了這個問題。現在一切都按我想要的方式工作,但旋轉木馬不起作用。 :/我無法使Bootstrap正常工作

這是我的代碼。

<!DOCTYPE HTML> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Kame Computers</title> 

    <!-- CSS --> 
    <link href="C:\Users\Madcat3277\Desktop\Kame Computers\Css\bootstrap.min.css" rel="stylesheet"> 
    <link href="C:\Users\Madcat3277\Desktop\Kame Computers\Css\bootstrap-theme.min.css" rel="stylesheet"> 
</head> 

<header> 
    <!-- Styles Declare the Carousel and font. --> 
    <style> 
    .navbar { 
     position: absolute; 
     top: 30px; 
     z-index: 10; 
     width: 100%; 
    } 

    @font-face { 
     font-family: 'swiss_721light_condensed'; 
     src: url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.eot'); 
     src: url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.eot?#iefix') format('embedded-opentype'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.woff2') format('woff2'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.woff') format('woff'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.ttf') format('truetype'), url('C:/Users/Madcat3277/Desktop/Kame Computers/Fonts/swiss721light-webfont.svg#swiss_721light_condensed') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    </style> 
    <!-- End of Harry Styles. --> 
    <font size="4" face="swiss_721light_condensed"> 
    </header> 

     <!-- Anything goes. --> 

    <body> 
<!-- Start of the Navbar --> 
<nav class="navbar navbar-clear"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
</nav> 
    </div> <!--End Nav --> 


<div id="Carousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item ad1"> 
     <img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg"> 
    </div> 
    <div class="item ad2"> 
     <img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg"> 
    </div> 
    <div class="item ad3"> 
     <img src="https://bobingao.files.wordpress.com/2012/01/green_bird_sitting_on_tree_branch-wide.jpg"> 
    </div> 
    </div> 
    <!-- Carousel nav --> 
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

     <div class="container marketing"> 
     <!-- Three columns of text below the carousel --> 
     <div class="row"> 
     <div class="span4"> 
      <img class="img-circle" data-src="http://placehold.it/140/"> 
      <h2>Heading</h2> 
      <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
      <p><a class="btn" href="#">View details »</a></p> 
     </div><!-- /.span4 --> 
     <div class="span4"> 
      <img class="img-circle" data-src="http://placehold.it/140/"> 
      <h2>Heading</h2> 
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
      <p><a class="btn" href="#">View details »</a></p> 
     </div><!-- /.span4 --> 
     <div class="span4"> 
      <img class="img-circle" data-src="http://placehold.it/140/"> 
      <h2>Heading</h2> 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
      <p><a class="btn" href="#">View details »</a></p> 
     </div><!-- /.span4 --> 
     </div><!-- /.row --> 

     <hr class="featurette-divider"> 

     <div class="featurette"> 
     <img class="featurette-image pull-right" src="http://getbootstrap.com/assets/img/examples/browser-icon-chrome.png"> 
     <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2> 
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> 
     </div> 



    </body> 

     <script src="C:\Users\Madcat3277\Desktop\Kame Computers\JavaScript\jquery-2.1.4.min.js"></script> 
     <script src="C:\Users\Madcat3277\Desktop\Kame Computers\JavaScript\bootstrap.min.js"></script> 
    </body> 
+0

側note--意味着在'head'標籤去內部'stylesheets'are,而不是'header'標籤 –

回答

1

你只需要旋轉木馬的旋轉木馬的ID,並在轉盤控制您的href被鏈接到#myCarousel因此只要更改輪轉到myCarousel的ID,它也有兩種結束body標籤應該工作並且腳本應該高於end body標記並且沒有結束html標記

1

由於箭頭未鏈接到href屬性中正確的滑塊ID,因此您的傳送帶不工作。從#myCarousel屬性值更改爲轉盤的ID,#Carousel

<a class="left carousel-control" href="#Carousel" 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" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
+0

得到它的工作,謝謝我欣賞它= D – Madcat3277