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

Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap 버튼 그룹

버튼 그룹은 여러 버튼이 같은 행에 배치될 수 있도록 합니다. 버튼을 정렬하고 싶을 때 매우 유용합니다. 다음을 통해 Bootstrap 버튼(Button) 플러그인 선택적인 JavaScript 단일 선택 상자와 체크 상자 스타일 행동을 추가합니다。

아래 표는 Bootstrap가 제공하는 버튼 그룹의 중요한 클래스를 요약한 것입니다：

Class설명코드 예제
.btn-group이 class는 기본 버튼 그룹을 형성하는 데 사용됩니다. 코드 예제에서 .btn-group 에 class를 가진 일련의 요소를 배치합니다 .btn 의 버튼.
<div>
　　<button　type="button">버튼1</button>
　　　<button　type="button">버튼2</button>
</div>
.btn-toolbar이 class는 여러 개의 <div>를 하나의 <div>에 결합하여 더 복잡한 컴포넌트를 얻을 도움을 줍니다.
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-, .btn-group-, .btn-group-xs이 class는 버튼 그룹의 크기를 조정할 수 있으며, 각 버튼의 크기를 조정하지 않아도 됩니다.
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-vertical이 class는 버튼을 수직으로 쌓아 올려 표시하도록 합니다. 수평으로 표시하지 않습니다.
<div>
　　...
</div>

기본 버튼 그룹

아래의 예제는 위 테이블에서 논의된 class를 보여줍니다 .btn-group 의 사용 방법:

온라인 예제

!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">버튼　1</button>
	<button　type="button"　class="btn　btn-default">버튼　2</button>
	<button　type="button"　class="btn　btn-default">버튼　3</button>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다:

버튼 도구 모음

아래의 예제는 위 테이블에서 논의된 class를 보여줍니다 .btn-toolbar 의 사용 방법:

온라인 예제

!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-toolbar"　role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">버튼　1</button>
		<button　type="button"　class="btn　btn-default">버튼　2</button>
		<button　type="button"　class="btn　btn-default">버튼　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">버튼　4</button>
		<button　type="button"　class="btn　btn-default">버튼　5</button>
		<button　type="button"　class="btn　btn-default">버튼　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">버튼　7</button>
		<button　type="button"　class="btn　btn-default">버튼　8</button>
		<button　type="button"　class="btn　btn-default">버튼　9</button>
	</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다:

버튼의 크기

아래의 예제는 위 테이블에서 논의된 class를 보여줍니다 .btn-group-* 의 사용 방법:

온라인 예제

!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　btn-group-lg">
	<button　type="button"　class="btn　btn-default">버튼　1</button>
	<button　type="button"　class="btn　btn-default">버튼　2</button>
	<button　type="button"　class="btn　btn-default">버튼　3</button>
</div>
<div　class="btn-group　btn-group-sm">
	<button　type="button"　class="btn　btn-default">버튼　4</button>
	<button　type="button"　class="btn　btn-default">버튼　5</button>
	<button　type="button"　class="btn　btn-default">버튼　6</button>
</div>
<div　class="btn-group　btn-group-xs">
	<button　type="button"　class="btn　btn-default">버튼　7</button>
	<button　type="button"　class="btn　btn-default">버튼　8</button>
	<button　type="button"　class="btn　btn-default">버튼　9</button>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다:

내장된

버튼 그룹 내에 또 다른 버튼 그룹을 내장할 수 있습니다. 즉, 하나의 .btn-group 내장된 또 다른 .btn-group 。하단 메뉴와 일련의 버튼을 함께 사용할 때 이를 사용합니다.

온라인 예제

!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">버튼　1</button>
	<button　type="button"　class="btn　btn-default">버튼　2</button>
	<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">
			<li><a　href="#">드롭 다운 링크　1</a></li>
			<li><a　href="#">드롭 다운 링크　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다:

vertical의 버튼 그룹

아래의 예제는 위 테이블에서 논의된 class를 보여줍니다 .btn-group-vertical 의 사용 방법:

온라인 예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　<title>Bootstrap　예제　-　vertical의 버튼 그룹</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-vertical">
	<button　type="button"　class="btn　btn-default">버튼　1</button>
	<button　type="button"　class="btn　btn-default">버튼　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			드롭
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu">
			<li><a　href="#">드롭 다운 링크　1</a></li>
			<li><a　href="#">드롭 다운 링크　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 버튼 드롭다운 메뉴Bootstrap 드롭다운 메뉴