'css, html'에 해당되는 글 18건

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
	<iframe class="embed-responsive-item" src="…"></iframe>
</div>

* 기본사용

<ul class="nav nav-tabs" role="tablist">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
</ul>

* 선택항목 색상넣기

<ul class="nav nav-tabs nav-pills" role="tablist">

* 탭 메뉴 세로

<ul class="nav nav-tabs nav-pills nav-stacked" role="tablist">

* 버튼 그룹처리

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

<div class="dropdown"> // col-md-* 지정 가능
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
		Dropdown
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> // dropdown-menu-right 지정 가능
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
		<li role="presentation" class="divider"></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
	</ul>
</div>

* 메뉴 헤더

<li role="presentation" class="dropdown-header">Dropdown header</li>

* 주석 처리

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

http://getbootstrap.com/components/#glyphicons-glyphs

* 기본 선언

- placeholder - 입력되어 있는 메시지

<div class="col-md-8">
	<form rule="form">
		<input type="text" class="form-control" placeholder="입력하세요." />
	</form>
</div>

* 닫기 버튼

<button type="button" class="close">&times;</button>