Bootstrap 3.3.7 | 경고, 다이어로그, 접기 | 접기(collapse)
경고는 필요에 따라 확 나타나고 닫겨 사라진다. 그런데, 필요에 따라 표시하거나 지우거나 할 수 있는 인터페이스로는 다른 것이 사용된다.
접기 표시(Collapse)
그것이 “접기 표시(Collapse)“라는 것입니다. 이것은 다음과 같은 형태로 작성된다.
<div class="collapse">
...... 표시 내용 ......
</ div>
이처럼 class="colapse"
를 지정한 <div>
태그를 준비해두면, 접기 표시를 할수 있는 태그로 만들 수 있다. 이 태그의 표시를 접기하거나 확장하려면 이를 위한 <a>
태그를 준비해 둔다.
<a data-toggle="collapse" href="접어서 작게 하는 항목 지정"> ...... </a>
href에는 class="collapse"
를 지정한 태그를 ID 등으로 지정한다. 이것으로 링크를 클릭할 때마다 접기 표시 태그를 표시하거나 숨기거나 한다.
아래에 사용 예를 들어 두었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>알랄, 다이어로그, 접기</h1>
<h2 >Collapse</h2>
</div>
<div>
<a role="button" class="btn btn-default" data-toggle="collapse" href="#panel">Show Collapse</a>
</div>
<div> </div>
<div id="panel" class="collapse">
<div class="panel panel-default">
<div class="panel-body">
표시하는 패널이다.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
버튼을 클릭하면 메시지가 표시되었다가 사라지거나 한다. 간단히 접기 표시를 만들 수 있는 구성 요소로 기억두도록 하자.