반응형
부트스트랩 스크롤 스파이 엘리먼트에 적용
링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/
<body>
<div class="container">
<nav id="target_nav" class="col-md-3">
<ul class="nav list-group">
<li class="list-group-item"><a href="#one">One</a></li>
<li class="list-group-item"><a href="#two">Two</a></li>
<li class="list-group-item"><a href="#three">Three</a></li>
<li class="list-group-item"><a href="#four">Four</a></li>
</ul>
</nav>
<div id="scroll-able" class="col-md-6">
<section><h4 id="one">One</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
<section><h4 id="two">Two</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
<section><h4 id="three">Three</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
<section><h4 id="four">Four</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
$('div#scroll-able').scrollspy({ target: '#target_nav' });
</script>
</body>반응형
'Development > UI FrameWork' 카테고리의 다른 글
| [BootStrap 3] popover Example (0) | 2016.06.19 |
|---|---|
| [BootStrap 3] popover live (0) | 2016.06.19 |
| [BootStrap] Tooltip Styling (0) | 2016.06.19 |
| 부트스트랩 페이징 가운데 정렬(Center) (1) | 2014.10.28 |
| Metro UI CSS 2.0 BootStrap - Guide 1. Base CSS | 1. General CSS (0) | 2014.06.17 |
댓글