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

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 드롭다운 메뉴

이 장에서는 Bootstrap下拉 메뉴에 중점을 둡니다.下拉 메뉴는 전환 가능하며, 링크를 목록 형식으로 표시하는 컨텍스트 메뉴입니다. 이는 Bootstrap 플러그인과 함께 사용할 수 있습니다. 下拉 메뉴(Dropdown) JavaScript 플러그인 의 상호작용을 통해 구현합니다.

下拉 메뉴를 사용하려면 class .dropdown 안에下拉 메뉴를 추가하면 됩니다. 아래의 예제는 기본下拉 메뉴를 보여줍니다：

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　下拉 메뉴(Dropdowns)</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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		테마
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">데이터 마이닝</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">데이터 통신/네트워크</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">분리된 링크</a>
		</li>
	</ul>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같이 표시됩니다：

옵션

정렬

오른쪽 정렬을 통해 .dropdown-menu class 추가 .pull-right 오른쪽 정렬下拉 메뉴. 아래의 예제가 이를 보여줍니다：

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　오른쪽 정렬下拉 메뉴</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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">테마
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu　pull-right"　role="menu"　
		aria-labelledby="dropdownMenu1">
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">데이터 마이닝</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">데이터 통신/네트워크</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">분리된 링크</a>
		</li>
	</ul>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같이 표시됩니다：

제목

class를 사용하여 dropdown-header 드롭다운 메뉴의 태그 영역에 제목을 추가하세요. 아래의 예제는 이를 보여줍니다：

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　드롭다운 메뉴 제목</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>
<div　class="dropdown">
	<button　type="button"　class="btn　dropdown-toggle"　id="dropdownMenu1"　
			data-toggle="dropdown">
		테마
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu"　aria-labelledby="dropdownMenu1">
		<li　role="presentation"　class="dropdown-header">드롭다운 메뉴 제목</li>
		<li　role="presentation"　>
			<a　role="menuitem"　tabindex="-1"　href="#">Java</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">데이터 마이닝</a>
		</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">
				데이터 통신/네트워크
			</a>
		</li>
		<li　role="presentation"　class="divider"></li>
		<li　role="presentation"　class="dropdown-header">드롭다운 메뉴 제목</li>
		<li　role="presentation">
			<a　role="menuitem"　tabindex="-1"　href="#">분리된 링크</a>
		</li>
	</ul>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같이 표시됩니다：

더 많은 예제

클래스설명예제
.dropdown드롭다운 메뉴 지정, 모든 드롭다운 메뉴는 .dropdown 안에 포함됩니다시도해 보세요
.dropdown-menu드롭다운 메뉴 생성시도해 보세요
.dropdown-menu-right드롭다운 메뉴 오른쪽 정렬시도해 보세요
.dropdown-header드롭다운 메뉴에 제목 추가시도해 보세요
.dropup위로 펼쳐지는 드롭다운 메뉴 지정시도해 보세요
.disabled드롭다운 메뉴의 비활성화 항목시도해 보세요
.divider드롭다운 메뉴의 분리선시도해 보세요
Bootstrap 버튼 그룹Bootstrap 글리프 아이콘(Glyphicons)