<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<h2>Dropdowns</h2>
		<div class="dropdown">
			<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">Dropdown header</li>
				<li><a href="#">HTML</a></li>
				<li class="disabled"><a href="#">CSS</a></li>
				<li class="active"><a href="#">JS</a></li>
				<li class="divider"></li>
				<li class="dropdown-header">Dropdown header2</li>
				<li><a href="#">Yo</a></li>
			</ul>
		</div>
		
		<h2>Collapse</h2>
		<p>버튼을 클릭하면 보이기 숨기기가 토글된다.</p>
		<button class="btn btn-info" data-toggle="collapse" data-target="#demo">
		Click Me</button>
		<div id="demo" class="collapse">
		이것은 보이기 숨기기 테스트 내용.
		</div>
		
		<h2>Collapsible Panel</h2>
		<div class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
				</div>
				<div id="collapse1" class="panel-collapse collapse">
					<div class="panel-body">Panel Body</div>
					<div class="panel-footer">Panel Footer</div>
				</div>
			</div>
		</div>
		
		<h2>Collapsible Panel 예제</h2>
		<div class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<a data-toggle="collapse" href="#collapse2">오로라</a>
				</div>
				<div id="collapse2" class="panel-collapse collapse">
					<div class="panel-body"><img src="or.jpg"></div>
					<div class="panel-footer">오로라는 지구 밖에서 입사하는 대전 입자가 지구 대기권 상층부의 기체와 마찰하여 빛을 내는 현상이다. 이들 입자의 유래는 주로 태양에서 방출된 것이 대부분인데 태양풍을 따라 지구 근처에 왔다가 지구 자기장에 이끌려 대기로 진입하는 것이다.</div>
				</div>
			</div>
		</div>
		
		<h2>Collapsible List Group</h2>
		<div class="panel-group">
			<div class="panel panel-success">
				<div class="panel-heading">
					<a data-toggle="collapse" href="#collapse_list">Collapsible list group</a>
				</div>
				<div id="collapse_list" class="panel-collapse collapse">
					<ul class="list-group">
						<li class="list-group-item">One</li>
						<li class="list-group-item">Two</li>
						<li class="list-group-item">Three</li>
					</ul>
					<div class="panel-footer">Footer</div>
				</div>
			</div>
		</div>
		
		<h2>Accordion Example</h2>
		<div class="panel-group" id="accordion">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<a data-toggle="collapse" data-parent="#accordion" href="#collapse-1">Collapsible group 1</a>
				</div>
				<div id="collapse-1" class="panel-collapse in">
					<div class="panel-body">Panel Body1</div>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<a data-toggle="collapse" data-parent="#accordion" href="#collapse-2">Collapsible group 2</a>
				</div>
				<div id="collapse-2" class="panel-collapse in">
					<div class="panel-body">Panel Body2</div>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<a data-toggle="collapse" data-parent="#accordion" href="#collapse-3">Collapsible group 3</a>
				</div>
				<div id="collapse-3" class="panel-collapse in">
					<div class="panel-body">Panel Body3</div>
				</div>
			</div>
		</div>
		
	</div>
	
	<div class="container">
			<h3>메뉴</h3>
			<ul class="nav nav-tabs">
				<li><a href="#">Home</a></li>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
			</ul>
	</div>
	
	
	<div class="container">
			<h3>메뉴</h3>
			<ul class="nav nav-pills nav-stacked">
				<li><a href="#">Home</a></li>
				<li><a href="#">Menu 1</a></li>
				<li class="active"><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
			</ul>
	
	
	
		<h3>Menu</h3>
		<ul class="nav nav-pills">
			<li><a href="#">Home</a></li>
			<li><a href="#">Menu 1</a></li>
			<li class="dropdown">
			<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Menu
				<span class="glyphicon glyphicon-cloud"></span>
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<li><a href="#">Tablet</a></li>
				<li class="divider"></li>
				<li><a href="#">SmartPhone</a></li>
			</ul>
		</ul>
	</div>
	
</body>
</html>