Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 버튼 드롭다운 메뉴

이 장에서는 Bootstrap class를 사용하여 버튼에下拉 메뉴를 추가하는 방법을 설명합니다. 버튼에下拉 메뉴를 추가하려면 간단히 하나의 .btn-group 버튼과下拉 메뉴를 컨테이너에 배치하면 됩니다. 또한 <span><을 사용할 수도 있습니다./span>을 사용하여 버튼이下拉 메뉴로 표시됨을 나타냅니다。

아래의 예제는 기본적인 간단한 버튼下拉 메뉴를 보여줍니다：

온라인 예제

예제

!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="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown">
		기본　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">원본　
		<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다:

분할된 버튼下拉 메뉴

분할된 버튼下拉 메뉴는下拉 메뉴 버튼과 유사한 스타일을 사용하지만,下拉 메뉴에 원래 기능을 추가했습니다. 분할 버튼의 왼쪽은 원래 기능이고, 오른쪽은下拉 메뉴를 표시하는 전환입니다.

온라인 예제

예제

!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="btn-group">
	<button　type="button"　class="btn　btn-default">기본</button>
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown">
		<span　class="caret"></span>
		<span　class="sr-only">下拉메뉴 전환</span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary">원본</button>
	<button　type="button"　class="btn　btn-primary　dropdown-toggle"　
			data-toggle="dropdown">
		<span　class="caret"></span>
		<span　class="sr-only">下拉메뉴 전환</span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다:

버튼下拉메뉴의 크기

여러 가지 크기의 버튼을 사용하여下拉메뉴를 만들 수 있습니다：.btn-lg、.btn-sm 또는 .btn-xs。

온라인 예제

예제

!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="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle　btn-lg"　
			data-toggle="dropdown">
		기본　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-primary　dropdown-toggle　btn-sm"　
			data-toggle="dropdown">
		원본　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-success　dropdown-toggle　btn-xs"　
			data-toggle="dropdown">
		성공　<span　class="caret"></span>
	</button>
	<ul　class="dropdown-menu"　role="menu">
		<li><a　href="#">기능</a></li>
		<li><a　href="#">또 다른 기능</a></li>
		<li><a　href="#">기타</a></li>
		<li　class="divider"></li>
		<li><a　href="#">분리된 링크</a></li>
	</ul>
</div>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다:

버튼下拉메뉴

메뉴도 위쪽으로 확장할 수 있습니다. 단순히 부모에 대해 .btn-group 컨테이너에 추가 .dropup 만들 수 있습니다.

온라인 예제

예제

!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="row"　style="margin-left:50px;　margin-top:200px">
	<div　class="btn-group　dropup">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">기본　
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu"　role="menu">
			<li><a　href="#">기능</a></li>
			<li><a　href="#">또 다른 기능</a></li>
			<li><a　href="#">기타</a></li>
			<li　class="divider"></li>
			<li><a　href="#">분리된 링크</a></li>
		</ul>
	</div>
	<div　class="btn-group　dropup">
		<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">원본　
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu"　role="menu">
			<li><a　href="#">기능</a></li>
			<li><a　href="#">또 다른 기능</a></li>
			<li><a　href="#">기타</a></li>
			<li　class="divider"></li>
			<li><a　href="#">분리된 링크</a></li>
		</ul>
	</div>
</div>
</body>
</html>

테스트를 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 입력 그룹 Bootstrap 버튼 그룹