BootstrapBootstrap Affix(附加导航(Affix)插件的用法)

原来的书文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html

Bootstrap 附加导航(Affix)插件

叠加导航(Affix)插件允许某些 <div>
固定在页面的某部地点。您也能够在开辟或关闭使用该插件之间开始展览切换。三个广阔的例证是交际图标。它们将在某些地点上马,但当页面点击有些标记,该
<div> 会锁定在有些地方,不会随着页面其余一些联合滚动。

Bootstrap 1若是您想要单独引用该插件的效益,那么您须要引用 affix.js。或者,正如 Bootstrap
插件大概浏览
 一章中所提到,您能够引用 bootstrap.js 或压缩版的 bootstrap.min.js

用法

你能够因而 data 属性大概经过 JavaScript 来选拔附加导航(Affix)插件。

  • 通过 data
    属性
    :如需向成分添加附加导航(Affix)行为,只要求向内需监听的成分添加 data-spy=”affix” 即可。请使用偏移来定义曾几何时切换到分的锁定和移动。

    ### 实例

    上面的实例演示了经过 data 属性使用附加导航(Affix)插件的用法:

    实例

    <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Bootstrap 附加导航(Affix)插件</title> <link rel=”stylesheet” href=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&gt; <script src=”http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; <script src=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt; <style>

    /* Custom Styles
    */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px
    solid #ddd; box-shadow: 0
    1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0;
    border-top: 1px
    solid #ddd; }
    ul.nav-tabs li:first-child{ border-top: none; }
    ul.nav-tabs li a{ margin: 0; padding: 8px
    16px; border-radius: 0;
    } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px
    solid #0088cc; }
    ul.nav-tabs li:first-child a{ border-radius: 4px
    4px 0
    0; }
    ul.nav-tabs li:last-child a{ border-radius: 0 0 4px
    4px; } ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ }

    </style> </head> <body data-spy=”scroll” data-target=”#myScrollspy”> <div class=”container”> <div class=”jumbotron”> <h1>Bootstrap Affix</h1> </div> <div class=”row”> <div class=”col-xs-3″ id=”myScrollspy”> <ul class=”nav nav-tabs
    nav-stacked” data-spy=”affix” data-offset-top=”125″> <li class=”active”><a href=”#section-1″>第1片段</a></li> <li><a href=”#section-2″>第一有个别</a></li> <li><a href=”#section-3″>第②有个别</a></li> <li><a href=”#section-4″>第六有个别</a></li> <li><a href=”#section-5″>第⑤有的</a></li> </ul> </div> <div class=”col-xs-9″> <h2 id=”section-1″>第3片段

相关文章