Bootstrap 3.3.7 | 경고, 다이어로그, 접기 | 접기(collapse)

Tags:

경고는 필요에 따라 확 나타나고 닫겨 사라진다. 그런데, 필요에 따라 표시하거나 지우거나 할 수 있는 인터페이스로는 다른 것이 사용된다.

접기 표시(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>

버튼을 클릭하면 메시지가 표시되었다가 사라지거나 한다. 간단히 접기 표시를 만들 수 있는 구성 요소로 기억두도록 하자.