Bootstrap Scrollspy源码学习

本文实例为大家分享了Bootstrap Scrollspy插件的具体代码,供大家参考,具体内容如下

导航栏Scrollspy例子

elements are used to jump to a section in the scrollable area -->

<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">

  • Section 1
  • ...

    <div id="section1">

    Section 1

    Try to scroll this page and look at the navigation bar while scrolling!

    ...

    垂直Scrollspy例子

    <div class="container">
    <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
    <ul class="nav nav-pills nav-stacked">

  • Section 1
  • ...
    Section 1

    Try to scroll this page and look at the navigation list while scrolling!

    ...

    Scrollspy的使用

    使用Scrollspy只需在对应的HTML元素里添加几个关键的属性添加到需要滚动的元素中,比如最常见的body元素,或者container。 添加到需要滚动的元素中,selector指示的是控制滚动的元素比如”.navbar”,“#myScrollspy”。 section 在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如,

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    相关文章

    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap...
    顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所...
    一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不...
    在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了...
    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有...
    BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前...