2015-05-10 65 views
0

我需要製作一個簡單的6頁網站。這裏是我的主網頁的代碼到目前爲止我應該使用什麼引導組件?

<hmtl> 
<style> 
    .ali{ 
     width:170px; 
     text-align:center; 
    } 
footer{ 
    background:#333; 
    color:#eee; 
    font-size:11px; 
    padding-top: 25px; 
padding-bottom: 25px; 
text-align:center; 

} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<body> 
    <div class="container" id="main"> 
     <div class="navbar navbar-inverse"> 
      <ul class="nav navbar-nav"> 
       <li class="ali"><a href="page1.html">Page 1</a></li> 
       <li class="ali"><a href="#">Page 2</a></li> 
       <li class="ali"><a href="#">Page 3</a></li> 
       <li class="ali"><a href="#">Page 4</a></li> 
       <li class="ali"><a href="#">Page 5</a></li> 
       <li class="ali"><a href="#">Page 6</a></li> 
      </ul> 
     </div> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="http://cdn.desktopwallpapers4.me/wallpapers/photography/1920x1080/3/24275-world-through-a-lens-1920x1080-photography-wallpaper.jpg" alt="Lens"> 
       </div> 

       <div class="item"> 
     <img src="http://newartcolorz.com/images/lens-wallpaper/kartandtinki1_lens-wallpaper_03.jpg" alt="lesis"> 
      </div> 
      <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> <!-- end of carousel inner --> 
    </div> <!-- end of carousel --> 
    <footer> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
      <hr></hr> 
      <h6>Copyright &copy; 2015 {Author}</h6> 
      </div> 
     </div> 
     </div> 
    </footer> 
</body> 

進出口使用導航欄爲網頁間導航。但是我想要做的是隻在導航欄被點擊時用新頁面替換文檔的輪播部分。但現在在新聞界,它完全重新加載了一個我不想做的新頁面。我該如何做到這一點,我需要改變,我應該使用引導標籤,而不是導航欄?

回答

1

您可以使用Tab,在你的情況下,把你的不同標籤的div的6頁的內容,並且讓引導做的魔力。但是,我認爲,基本上,你想要的是6個不同的頁面具有相同的導航欄。這種功能不被Bootstrap覆蓋。您可能想要使用某個框架,例如AngularJS(創建自定義指令或僅使用ng-include指令)來執行此操作。

+0

謝謝。它適合我的學校,我不想浪費很多時間。如果我使用角度,它會過於先進,老師不會理解代碼,但是如果使用角度,它將變成像SPA一樣改變'ng-view'。 – BsD