发表新帖
发表新帖

What is the minimum code to make ScrollSpy bootstrap sidebar like the example?

前端 未结
关注
2 357
刺人心
刺人心 2020-12-12 22:38

I have seen the left hand ScrollSpy example on the bootstrap page:

http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

But they don\'t have an

相关标签:
2条回答
  • 时光说笑
    2020-12-12 23:15

    While doing some research into using sidenav scrollspy I found a good tutorial on coding everything

    All the source can be found on github

    0 讨论(0)
  • 半阙折子戏
    2020-12-12 23:34

    See if this helps: http://jsfiddle.net/panchroma/rWYQu/

    1. In the body tag add <body data-spy="scroll" data-target="#side-nav">
      ( see fiddle options left hand column)

    2. Wrap your side nav bar in a div with this same data-target ID: <div id="side-nav" >

    3. You probably want to add the class affix to your side nav so that it stays in place: <ul class="nav nav-pills affix">

    4. Add a unique ID to each of the links in your side nav: eg <li><a href="#one">One</a></li>

    5. In the main body of the page, add sections with IDs that match the links in your side bar: eg <section id="one"> Section 1 </section>

    That's it!

    EDIT

    How do I get it to style like the Bootstrap example on their site though?

    Here's a variation if you want stying similar to the bootstrap page
    http://jsfiddle.net/panchroma/ExWDq/

    You will see that I've changed the classes on the nav list ul to make better use of some built in Bootstap styling, I've added chevrons to the menu links, and added styling and media queries for the nav list.

    0 讨论(0)
 看不清?
提交回复
热议问题