부 트 스 트랩 스크롤 스파이 소스 학습
탐색 표시 줄 스크롤 스파이 예
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> 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">
<li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1" rel="external nofollow" rel="external nofollow" >Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Scrollspy 를 사용 하려 면 해당 하 는 HTML 요소 에 몇 가지 중요 한 속성 을 추가 해 야 합 니 다.
- data-spy=”scroll”
스크롤 이 필요 한 요소 에 추가 합 니 다.예 를 들 어 가장 흔히 볼 수 있 는 body 요소 나 container.
- data-target=”selector”
스크롤 이 필요 한 요소 에 추가 합 니 다.selector 는 스크롤 을 제어 하 는 요 소 를 표시 합 니 다.예 를 들 어"navbar","\#my Scrollspy"입 니 다.
- section
스크롤 을 제어 하 는 요소 에서 링크 로 해당 하 는 위치 로 연결 합 니 다.링크 의 id 는 해당 위치 요소 의 id 와 일치 해 야 합 니 다.예 를 들 어
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다.SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. D...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
