* 버튼 그룹처리

<div class="btn-group">
	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
	<button type="button" class="btn btn-default">Right</button>
</div>

* 한 단계 더 묶어서 툴바

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">...</div>
	<div class="btn-group">...</div>
	<div class="btn-group">...</div>
</div>

* 버튼 메뉴

<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">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Dropdown link</a></li>
			<li><a href="#">Dropdown link</a></li>
		</ul>
	</div>
</div>

 * 버튼 메뉴(세로)

<div class="btn-group-vertical">
	...
</div>

 * 싱글 버튼 드롭다운

<!-- Single button -->
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		Action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

 * 스플리트 버튼 드롭다운

<!-- Split button -->
<div class="btn-group">
	<button type="button" class="btn btn-danger">Action</button>
	<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

 * 드롭업

<div class="btn-group dropup">
	<button type="button" class="btn btn-default">Dropup</button>
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<!-- Dropdown menu links -->
	</ul>
</div>

'css, html' 카테고리의 다른 글

반응형 embde 태그 넣기  (0) 2014.10.18
부트스트랩(bootstrap) 탭(Tab) 메뉴  (0) 2014.10.18
드롭다운(Dropdowns)  (0) 2014.10.18
부트스트랩(bootstrap) 아이콘들  (0) 2014.10.18
폼(form) 각 요소들 선언하기  (0) 2014.10.18
블로그 이미지

디츠

“말은 쉽지, 코드를 보여줘.” “Talk is cheap. Show me the code.” – 리누스 토르발스(Linus Torvalds)

,