Bootstrap4 기본 튜토리얼

Bootstrap4 접기

Bootstrap4 접기는 내용의 표시와 숨김을 쉽게 구현할 수 있습니다。

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>간단한 접기</h2>
　　<p>버튼을 클릭하면 내용이 표시되고 숨겨지는 사이에서 전환됩니다。</p>
　　<button　type="button"　class="btn　btn-primary"　data-toggle="collapse"　data-target="#demo">간단한 접기</button>
　　<div id="demo" class="collapse">
　　　　나는 너를 기도하고, 너를 헌신합니다.
우리는 일과 생활에서도 간혹의 경험을 가지고 있습니다. 우리는 작은 생명을 가지고 있습니다.
제가 지금 하는 인턴십은 제에게 맞지 않습니다。
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

예제 해석

.collapse 클래스는 접기 요소를 지정합니다 (예: <div>); 버튼을 클릭하면 숨김과 표시 사이에서 전환됩니다。

내용의 숨김과 표시를 제어하려면 <a> 또는 <button> 요소에 data를 추가해야 합니다:-toggle="collapse" 속성。 data-target="#id" 속성은 접기된 내용과 일치합니다 (<div id="demo">)。

주의: <a> 요소에서 href 속성을 data 대신 사용할 수 있습니다:-target 속성:

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>간단한 접기</h2>
　　<a href="#demo" class="btn btn-primary"　data-toggle="collapse">간단한 접기</a>
　　<div id="demo" class="collapse">
　　　　나는 너를 기도하고, 너를 헌신합니다.
우리는 일과 생활에서도 간혹의 경험을 가지고 있습니다. 우리는 작은 생명을 가지고 있습니다.
제가 지금 하는 인턴십은 제에게 맞지 않습니다。
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

기본적으로 접기된 내용은 숨겨져 있으며, 당신은 .show 클래스를 추가하여 내용을 기본적으로 표시할 수 있습니다:

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>간단한 접기</h2>
　　<p>당신은 .show 클래스를 추가하여 내용을 기본적으로 표시할 수 있습니다:</p>
　　<button　type="button"　class="btn　btn-primary"　data-toggle="collapse"　data-target="#demo">간단한 접기</button>
　　<div　id="demo"　class="collapse　show">
　　　　나는 너를 기도하고, 너를 헌신합니다.
우리는 일과 생활에서도 간혹의 경험을 가지고 있습니다. 우리는 작은 생명을 가지고 있습니다.
제가 지금 하는 인턴십은 제에게 맞지 않습니다。
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

이 예제는 카드 컴포넌트를 확장하여 간단한 손풀을 표시합니다。

주의: 사용 data-속성을 사용하여 모든 접기 요소가 지정된 부모 요소 아래에 위치하게 하여, 접기 옵션 중 하나가 표시되면 다른 옵션이 숨겨지도록 합니다。

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>필요한 손풀 예제</h2>
　　<p><strong>주의:</strong>　사용　<strong>data-parent</strong>　속성을 사용하여 모든 접기 요소가 지정된 부모 요소 아래에 위치하게 하여, 접기 옵션 중 하나가 표시되면 다른 옵션이 숨겨지도록 합니다.</p>
　　<div　id="accordion">
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a　class="card-link" data-toggle="collapse"　href="#collapseOne">
　　　　　　　　　　옵션1
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div　id="collapseOne"　class="collapse　show"　data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#1　내용: 기본 튜토리얼(oldtoolbag.com)　--　기본을 잘 배우면 더 멀리 가실 수 있습니다!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
　　　　　　　　선택 사항 2
　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseTwo" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#2　내용: 기본 튜토리얼(oldtoolbag.com)　--　기본을 잘 배우면 더 멀리 가실 수 있습니다!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
　　　　　　　　　　선택 사항 3
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseThree" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#3　내용: 기본 튜토리얼(oldtoolbag.com)　--　기본을 잘 배우면 더 멀리 가실 수 있습니다!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
　　　　
</body>
</html>

테스트 보기 ‹/›

Bootstrap4 네비게이션 Bootstrap4 드롭다운 메뉴