微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap Scrollspy源码学习

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

导航栏Scrollspy例子

rush:xhtml;"> 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例子

    rush:xhtml;"> <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相匹配。例如,

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

    原文地址:https://www.jb51.cc/bootstrap/41160.html

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐