zoukankan      html  css  js  c++  java
  • bootstrap-scrollspy

    功能:用在导航栏上,用于滚动内容时动态对应导航标签

    插件:scrollspy.js

    要点:scrollspy用在导航栏、导航条上居多。body添加data-spy="scroll"的监听,在div class="js-navbar-scrollspy"包含其滚动显示的导航标签

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <!-- Latest compiled and minified CSS & JS -->
        <link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <script src="../extlib/jquery-1.11.1.min.js"></script>
        <!-- Local bootstrap CSS & JS -->
        <script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
    </head>
    <body data-spy="scroll">
        <div class="container">
      
             <div class="row">
    <!-- navbar-fixed-top 与  navbar-fixed-button 内容差不多 -->
    <!-- 如果要使其随位置滚动而显示相应导航位置, 加上data-spy="scroll" -->
    <!-- 不能加ul 中加上div ,只能另起div 里包含ul li -->
             <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            
             <div class="navbar-header">
                 <a class="navbar-brand" href="#">Hello</a>
                 <ul class="nav navbar-nav">
                     <li class="active">
                         <a href="#">Home</a>
                     </li>
                     <li>
                         <a href="#">Link</a>
                     </li>
                 </ul>
            </div>  
                   
              <div class="collapse navbar-collapse js-navbar-scrollspy">
                  <ul class="nav navbar-nav">
                      <li><a href="#fat">fat</a></li>
                      <li><a href="#mdo">mdo</a></li>
                   
                  </ul>
    
                   
              </div>
    
    
             </nav>
        
            </div>     
            
    
    
    
        
    
      <h2 id="fat">@fat</h2>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <hr>
      <h2 id="mdo">@mdo</h2>
      <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
      <hr>
    
    
    
    
    
    
    
    
            
                     
    
        </div>
    </body>
    </html>

    显示效果:

  • 相关阅读:
    关于字典中可迭代的一个问题
    关于python字典还不错的一个总结
    代码17
    python文件读写,以后就用with open语句
    myeclipse配置内存
    android官网被封掉了,仅仅好用这个站点进谷歌了!嘎嘎
    IE input X 去掉文本框的叉叉和password输入框的眼睛图标
    【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面
    110个经常使用Oracle函数总结
    索引
  • 原文地址:https://www.cnblogs.com/hzijone/p/4857606.html
Copyright © 2011-2022 走看看