css, html

부트스트랩(bootstrap) 버튼 및 버튼 드롭다운(Dropdowns)

디츠 2014. 10. 18. 15:46

* 버튼 그룹처리

<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>