使用詞綴爲導航和導航條工作

我有一些html版本，用於我的研究組製作的軟件庫網站的頁面佈局。這是通過引導程序3完成的。我想要實現的是在jumbotron下方出現的導航欄，一旦滾動到頁面頂部就會固定到頁面頂部。我還喜歡頁面左欄中的nag元素的類似行爲 - 當頁面滾動並且他們到達頂部時 - 他們然後變得固定並留在那裏。從閱讀中我明白，在twitter引導中的Affix是這樣做的方式，但我並不完全確定我可以想出如何做到這一點。使用詞綴爲導航和導航條工作

下面的HTML發生什麼事情是在滾動到目前爲止應該跨越頁面的導航欄被壓扁 - 導航欄鏈接移動到導航欄品牌下面的一行，並且欄不再跨越頁面。一旦我找出如何使用navbar的詞綴，我希望將它與nav元素結合使用。任何人都可以解釋我需要做什麼來獲得效果？我對網頁設計相當陌生。

謝謝，本。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title> 
     <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> 
    </head> 
    <body> 
     <style> 
      .jumbotron { 
       margin-bottom: 0px; 
      } 
     </style> 
     <!-- Start of main container --> 
     <div class="container-fluid main"> 
      <div class="row-fluid"> 
       <div class="jumbotron"> 
        <h1> Getting Started </h1> 
        <p> Installing SOFTWARE on your machine is easy for most systems. 
         This guide will get you up and running. 
        </p> 
       </div> 
      </div> 
        <!--Here's thestart of the navabar I'm trying to affix --> 
      <div class="row-fluid" data-spy="affix" data-offset-top="200"> 
       <div class="navbar navbar-inverse"> 
        <div class="navbar-header"> 
         <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </a> 
         <a class="navbar-brand" href="#">SOFTWARE</a> 
        </div> 
        <div class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About SOFTWARE</a></li> 
          <li class="active"><a href="#">Getting Started</a></li> 
          <li><a href="#">Quick Start</a></li> 
          <li><a href="#">Full Documentation</a></li> 
          <li><a href="#">Contact</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">GitHub Repository</a></li> 
            <li><a href="#">Download TAR</a></li> 
            <li><a href="#">Download ZIP</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <!-- Begin Layout for Getting Started Page --> 
      <div class="row-fluid"> 
       <div class="col-lg-3"> 
        <ul class="nav nav-pills nav-stacked sidemenu"> 
         <li><a href="#">Introduction</a></li> 
         <li><a href="#">Installing R</a></li> 
         <li><a href="#">R Recommendations</a></li> 
         <li><a href="#">Installing HybRIDS from GitHub</a></li> 
         <li><a href="#">Installing HybRIDS from Source File</a></li> 
         <li><a href="#">Installing HybRIDS from Binary File</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-9 whitep"> 
        <h1 class="whitep">Introduction</h1> 
        <p> 
         Installation text 
         Installation text 
         Installation text 
         Installation text 
         Installation text 
        </p> 
        <hr> 
        <h1>Installing R</h1> 
        <p> 
         R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system. 
        </p> 
        <p> 
        TEST text to fill page to test scrolling behaviour... 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p>  
       </div> 
      </div> 
     </div> <!--End of main Container--> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script src="js/bootstrap.js"></script> 
    </body> 
</html>

來源

2013-08-26 Ward9250

如引導文件規定，你必須定義導航和導航欄的CSS類時affix踢...

「你必須提供這些類的樣式（獨立於此插件的）。附加類應位於文檔的正常流程中。「

所以你需要有一些CSS同時爲頂部導航欄中，和側面導航..

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index:10; 
} 

#sidebar.affix { 
    position: fixed; 
    top: 80px; 
}

下面是使用affix與兩個頂部和側面導航一個Bootply演示：http://bootply.com/69848

來源

2013-08-26 20:23:00 ZimSystem

感謝斯凱利，它現在正在工作！ – Ward9250

當導航欄鏈接指向內部錨點（滾動）時，貼上的頂部導航欄將與本示例中的內容重疊。請參閱：http://stackoverflow.com/questions/18799688/bootstrap-affix-navbar-for-single-page-with-scrollspy-and-page-anchors/18834770 –

此方法的一個問題是側邊欄導航失去它的塊貼圖顯示時不再填充色譜柱的寬度。 – MyNameIsKo

使用詞綴爲導航和導航條工作

回答

相關問題