English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap 스크롤 감지(Scrollspy) 플러그인

스크롤 감지(Scrollspy) 플러그인, 자동으로 네비게이션 타겟을 업데이트하는 플러그인으로, 스크롤 위치에 따라 자동으로 네비게이션 타겟을 업데이트합니다. 기본적으로 스크롤을 움직이면, 스크롤 위치에 따라 네비게이션 바에 추가됩니다 .active class。

이 플러그인의 기능을 독립적으로 참조하고자 한다면, 다음을 참조해야 합니다 scrollspy.js또는, 그리고 Bootstrap 플러그인 개요 책의 한 장에서 언급된 것처럼, 다음을 참조할 수 있습니다 bootstrap.js 또는 압축된 bootstrap.min.js。

사용법

상단 네비게이션에 스크롤 감지 행동을 추가할 수 있습니다：

  • data 속성을 통해：감청하고자 하는 요소(보통 body)에 추가 data-spy="scroll"그런 다음 Bootstrap를 포함한 .nav 컴포넌트의 부모 요소의 ID나 클래스 속성 data-target이를 통해 정상적으로 작동하려면, 감시할 링크의 ID와 일치하는 요소가 페이지 주체에 존재해야 합니다.

    <body data-spy="scroll" data-target=".navbar-example>
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>

  • JavaScript를 통해JavaScript를 통해 스크롤 리스닝을 호출할 때, 감시할 요소를 선택한 후 다음과 같은 메서드를 호출합니다: .scrollspy() 함수:

    $('body').scrollspy({ target: '.navbar-example')}

온라인 예제

아래의 예제는 data 속성을 사용하여 스크롤 리스닝(Scrollspy) 플러그인을 사용하는 방법을 보여줍니다:

온라인 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　스크롤 리스닝(Scrollspy) 플러그인/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></<script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default　navbar-static" role="navigation">
	<div class="container">-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown">-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>　
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"　
	　style="height:200px;overflow:auto;　position:　relative;">
	<h4　id="ios">iOS</h4>
	<p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 초기는　2007　년 처음으로 iPhone, iPod Touch, 및 Apple　
		TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기반을 공유합니다. OS X 운영 체제는 애플 컴퓨터에서 사용되며, iOS는 애플의 이동 기기 버전입니다.
	</p>
	<h4　id="svn">SVN</h4>
	<p>Apache Subversion, 일반적으로 SVN으로 약칭됩니다，는 오픈소스 버전 관리 시스템 소프트웨어입니다. Subversion은 CollabNet 회사에서　2000년에 생성되었습니다. 하지만 지금은 Apache Software Foundation의 프로젝트로 발전했으며, 많은 개발자와 사용자 커뮤니티를 보유하고 있습니다.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>jMeter는 오픈소스 테스트 소프트웨어입니다. 이는　10100% pure Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise　Java　Beans(EJB)는 고도의 확장성과 강력한 엔터프라이즈 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web　Logic과 같은 호환된 애플리케이션 서버에서 배포됩니다. J2EE에서.
	</p>
	<h4　id="spring">Spring</h4>
	<p>스프링 프레임워크는 오픈 소스 Java 플랫폼으로, 강력한 Java 애플리케이션을 빠르게 개발하기 위한 완벽한 인프라 지원을 제공합니다.
	</p>
	<p>Spring　프레임워크는 원래 Rod　Johnson이 작성한 것이며,　2003　년　6　월 처음发布되었으며 Apache　2.0 라이선스 하.
	</p>
</div>
</body>
</html>
테스트 봐 보기 ‹/›

결과는 다음과 같습니다：

옵션

data 속성 또는 JavaScript를 통해 전달할 수 있습니다. 다음 표는 이러한 옵션을 나열합니다:

옵션 이름타입/기본 값Data 속성 이름描述
offsetnumber
기본 값:10		data-offset스크롤 위치를 계산할 때, 최상단으로부터의 오프셋 픽셀.

메서드

.scrollspy('refresh')JavaScript를 통해 scrollspy 메서드를 호출할 때, 다음과 같은 메서드를 호출해야 합니다: .refresh 메서드를 사용하여 DOM을 업데이트합니다. 이는 DOM의 어떤 요소가 변경되었을 때(즉, 요소를 추가하거나 제거했을 때) 매우 유용합니다. 아래는 이 메서드의 사용법 문법입니다.

$('[data-spy="scroll"]').each(function　()　{
　　var $spy = $(this).scrollspy('refresh')}
});

온라인 예제

下面的示例演示了 .scrollspy('refresh') 메서드의 사용법:

온라인 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap　示例　-　스크롤 리스닝(Scrollspy) 플러그인 메서드</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></<script>
</head>
<body>
<nav id="myScrollspy" class="navbar　navbar-default　navbar-static" role="navigation">
	<div class="container">-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java　
						<b class="caret"></b>
					</a>
					<ul class="dropdown">-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto;　position:　relative;">
	<div　class="section">
		<h4　id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			×　이 부분을 삭제</a></small>
		</h4>
		<p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 초기는　2007　년 처음으로 iPhone, iPod Touch, 및 Apple　
			TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기본을 공유합니다. OS X 운영 체제는 애플 컴퓨터에서 사용되며, iOS는 애플의 모바일 버전입니다.</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache Subversion, 일반적으로 SVN으로 약칭됩니다，는 오픈소스 버전 관리 시스템 소프트웨어입니다. Subversion은 CollabNet 회사에서　2000년에 창립되었지만, 지금은 Apache Software Foundation의 프로젝트로 발전하여 풍부한 개발자와 사용자 커뮤니티를 가지고 있습니다.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　이 부분을 삭제</a></small>
		</h4>
		<p>jMeter는 오픈소스 테스트 소프트웨어입니다. 이는　100%　pure　Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise　Java　Beans(EJB)는 고도의 확장성과 강력한 엔터프라이즈 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web　Logic과 같은 호환된 애플리케이션 서버에서 배포됩니다. J2EE　위.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Spring　프레임워크는 오픈소스 Java 플랫폼으로, 강력한 Java 애플리케이션을 빠르게 개발하기 위한 완벽한 인프라 지원을 제공합니다.</p>
		<p>Spring　프레임워크는 원래 Rod　Johnson이 작성한 것이며,　2003　년　6　월 처음发布되었으며 Apache　2.0　许可证明下。</p>
	</div>
</div>
<script　type="text/javascript">
	$(function(){
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function　()　{
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
});
</<script>
</body>
</html>
테스트 봐 보기 ‹/›

결과는 다음과 같습니다：

事件

下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。

事件描述예제
activate.bs.scrollspy每当一个新项目被滚动监听激活时，触发该事件。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　//　执行一些动作...
});

온라인 예제

下面的示例演示了 activate.bs.scrollspy 事件的用法：

온라인 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap　示例　-　滚动监听(Scrollspy)插件事件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></<script>
</head>
<body>
<nav id="myScrollspy" class="navbar　navbar-default　navbar-static" role="navigation">
	<div class="container">-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">教程名称</a>
		</div>
		<div class="collapse navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#ios">iOS</a></li>
				<li><a href="#svn">SVN</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle"　
					　　　data-toggle="dropdown">
						Java　<b class="caret"></b>
					</a>
					<ul class="dropdown">-menu" role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto;　position:　relative;">
	<div　class="section">
		<h4　id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			×　이 부분을 삭제</a></small>
		</h4>
		<p>iOS는 애플이 개발하고 배포한 모바일 운영 체제입니다. 초기는　2007　년 처음으로 iPhone, iPod Touch, 및 Apple　
			TV. iOS는 OS X에서 파생되었으며, 두 가지는 Darwin 기본을 공유합니다. OS X 운영 체제는 애플 컴퓨터에서 사용되며, iOS는 애플의 모바일 버전입니다.</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache Subversion, 일반적으로 SVN으로 약칭됩니다，는 오픈소스 버전 관리 시스템 소프트웨어입니다. Subversion은 CollabNet 회사에서　2000년에 창립되었지만, 지금은 Apache Software Foundation의 프로젝트로 발전하여 풍부한 개발자와 사용자 커뮤니티를 가지고 있습니다.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　이 부분을 삭제</a></small>
		</h4>
		<p>jMeter는 오픈소스 테스트 소프트웨어입니다. 이는　100%　pure　Java 애플리케이션으로, 로드와 성능 테스트에 사용됩니다.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise　Java　Beans(EJB)는 고도의 확장성과 강력한 엔터프라이즈 애플리케이션을 개발하기 위한 개발 아키텍처로, JBOSS, Web　Logic과 같은 호환된 애플리케이션 서버에서 배포됩니다. J2EE　위.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Spring　프레임워크는 오픈소스 Java 플랫폼으로, 강력한 Java 애플리케이션을 빠르게 개발하기 위한 완벽한 인프라 지원을 제공합니다.</p>
		<p>Spring　프레임워크는 원래 Rod　Johnson이 작성한 것이며,　2003　년　6　월 처음发布되었으며 Apache　2.0　许可证明下。</p>
	</div>
</div>
<span　id="activeitem"　style="color:red;"></span>
<script　type="text/javascript">
	$(function(){
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function　()　{
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
		$('#myScrollspy').on('activate.bs.scrollspy', function () {
			var currentItem = $(".nav li.active > a").text();
			$("#activeitem").html("현재 확인 중　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>
테스트 봐 보기 ‹/›

결과는 다음과 같습니다：

더 많은 예제

수평 스크롤 리스너 생성

다음 예제는 어떻게 수평 스크롤 리스너를 생성하는지 보여줍니다:

온라인 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제</title>
	<meta name="viewport" content="width=device"}-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></<script>
	<style>
		body {
			position: relative;　
		}
		#section1　{padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
		#section2　{padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
		#section3　{padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
		#section41　{padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
		#section42　{padding-top:50px;height:500px;color: #fff; background-color: #009688;}
	</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
			</button">
			<a class="navbar-brand" href="#">WebSiteName</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a　href="#section1">Section　1</a></li>
					<li><a　href="#section2">Section　2</a></li>
					<li><a　href="#section3">Section　3</a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
						<ul class="dropdown">-menu">
							<li><a　href="#section41">Section　4-1</a></li>
							<li><a　href="#section42">Section　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div　id="section1" class="container-fluid">
	<h1>Section　1</h1>
	<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
	<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
	</div>
	<div　id="section2" class="container-fluid">
		<h1>Section　2</h1>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
	</div>
	<div　id="section3" class="container-fluid">
		<h1>Section　3</h1>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
	</div>
	<div　id="section41" class="container-fluid">
		<h1>Section　4　서브메뉴　1</h1>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
	</div>
	<div　id="section42" class="container-fluid">
		<h1>Section　4　서브메뉴　2</h1>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
		<p>이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요! 이 부분을 스크롤하여 스크롤 중에 탐색 바를 확인하세요!</p>
</div>
</body>
</html>
테스트 봐 보기 ‹/›

세로 스크롤 리스너 생성 방법

다음 예제는 어떻게 세로 스크롤 리스너를 생성하는지 보여줍니다:

온라인 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제</title>
	<meta name="viewport" content="width=device"}-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></<script>
	<style>
		body {
			position: relative;
		}
		ul.nav-pills {
			top:　20px;
			position: fixed;
		}
		div.col-sm-9　div {
			height:　250px;
			font-size:　28px;
		}
		#section1　{color: #fff; background-color: #1E88E5;}
		#section2　{color: #fff; background-color: #673ab7;}
		#section3　{color: #fff; background-color: #ff9800;}
		#section41　{color: #fff; background-color: #00bcd4;}
		#section42　{color: #fff; background-color: #009688;}
		@media screen and (max-width:　810px) {
			#section1, #section2, #section3, #section41, #section42　　{
				margin-left:　150px;
			}
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
	<div class="row">
		<nav class="col">-sm-3" id="myScrollspy">
			<div class="container">-fluid">　
			<div class="container">-fluid">　
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#section">1">Section　1</a></li>
				<li><a　href="#section2">Section　2</a></li>
				<li><a　href="#section3">Section　3</a></li>
				<li class="dropdown">
					<a class="dropdown">-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
					<ul class="dropdown">-menu">
						<li><a　href="#section41">Section　4-1</a></li>
						<li><a　href="#section42">Section　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div　class="col-sm-9">
			<div　id="section1">　　　　
				<h1>Section　1</h1>
				<p>이 부분을 스크롤하여 스크롤 중에 네비게이션 목록을 확인하세요!>/p>
			</div>
			<div　id="section2">　
				<h1>Section　2</h1>
				<p>이 부분을 스크롤하여 스크롤 중에 네비게이션 목록을 확인하세요!>/p>
			</div>　　　　　　　　
			<div　id="section3">　　　　　　　　　
				<h1>Section　3</h1>
				<p>이 부분을 스크롤하여 스크롤 중에 네비게이션 목록을 확인하세요!>/p>
			</div>
			<div　id="section41">　　　　　　　　　
				<h1>Section　4-1</h1>
				<p>이 부분을 스크롤하여 스크롤 중에 네비게이션 목록을 확인하세요!>/p>
			</div>　　　　　　
			<div　id="section42">　　　　　　　　　
				<h1>Section　4-2</h1>
				<p>이 부분을 스크롤하여 스크롤 중에 네비게이션 목록을 확인하세요!>/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
테스트 봐 보기 ‹/›
Bootstrap 탭 플러그인Bootstrap 드롭다운 메뉴 플러그인