Modal컴포넌트는 현재 페이지의 top에 배치되는 다이얼로그 박스(팝업 윈도우)다.
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>먼저 컨네이너에 버튼을 생성하고, modal에 아이디를 주고 modal을 생성해준다.
modal fade를 사용하면 fade효과를 줄 수 있다.
<div class="modal fade" id="myModal">modal의 크기도 조정할 수 있는데
<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-xl">위와 같이 하면 된다.
modal을 꽉차게 띄우고 싶다면 modal-fullscreen을 사용한다.
<div class="modal-dialog modal-fullscreen">만약 modal을 수직적으로 중앙정렬하고 싶다면
<div class="modal-dialog modal-dialog-centered">를 하면 된다.
modal에 적을 내용이 많다면 스크롤바가 들어가게 된다. 그러나, 모달 내부에서 스크롤이 들어가게 하고 싶다면 modal-dialog-scrollable을 사용하면 된다.
<div class="modal-dialog modal-dialog-scrollable">툴팁은 data-bs-toggle="tooltip"과 같이 사용하면 된다.
title 속성을 사용해 어떤 내용이 보이게 할지를 적는다.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button>툴팁을 사용하고 싶다면
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>과 같은 js코드를 추가해주어야 한다.
툴팁이 나타나는 방향도 정할 수 있다.
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">Top</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">Bottom</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">Left</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Right</a>팝오버 컴포넌트는 툴팁과 비슷하다. 비교하자면 툴팁은 hover시 나타나고, 팝오버는 클릭 시 나타난다. 팝오버는 툴팁에 비해 많은 내용을 담을 수 있다.
툴팁처럼, 팝오버는 data-bs-toggle="popover"을 사용하면 된다.
title로 헤더의 텍스트를 나타내고 data-bs-content로 본문을 나타낸다.
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>이 또한 툴팁처럼 js코드가 필요하다.
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>팝오버도 툴팁과 같이 하면 상하좌우로 나타나도록 위치를 정할 수 있다.
기본적으로 팝오버는 요소를 다시 클릭할 경우 닫힌다. 만약 data-bs-trigger="focus"를 사용하면, 요소의 바깥을 클릭해도 닫히게 할 수 있다.
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>팝오버는 툴팁처럼 hover시 효과로도 나타낼 수 있다.
data-bs-trigger="hover"로 하면 된다.
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>토스트 컴포넌트를 사용할 수 있는데, 토스트 클래스를 만들고 toast-header와 toast-body를 작성하면 된다. 디폴트로 토스트는 숨어있는데 show를 사용해 언제나 볼 수 있도록 배치할 수 있다. 닫기 위해서는 button 요소를 사용하고 data-bs-dismiss="toast"를 하면 된다.
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>toast를 버튼을 클릭해 보이기 위해서는 js코드를 사용해야 한다.
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>scrollspy는 스크롤 위치에 따라 링크를 자동으로 업데이트 하는데 사용한다.
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>data-bs-spy="scroll"를 스크롤 하려는 영역에 추가한다.
그리고 data-bs-target속성을 id나 navbar의 클래스 명과 함께 추가한다. 그와 같이하면 스크롤하는 영역에 navbar를 연결할 수 있다. 스크롤하는 요소들은 navbar의 리스트 아이템의 id와 맞춰줘야 한다. data-bs-offset 속성은 스크롤 위치를 계산할때 픽셀 수를 지정한다. 기본값은 10px이다.
오프캔버스는 modal과 비슷한데, 사이드바 네비게이션 메뉴에 사용된다.
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas Sidebar</h3>
<p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>offcanvas클래스는 오프캔버스 사이드바를 생성한다. offcanvas-start 클래스는 오프캔버스를 배치하고, 400px너비로 만든다. offcanvas-title은 margin과 라인 높이를 정한다. 그리고 offcanvas-body로 내용을 더한다. offcanvas 사이드바를 열기 위해서는, button이나 a요소를 사용하고 offcanvas 컨테이너의 id와 매치한다. a요소를 통해 오프캔버스를 열고 싶다면, href를 사용하면 된다.
오프캔버스가 열릴 위치도 정할 수 있는데,
<div class="offcanvas offcanvas-end" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Right Offcanvas</h3>
<p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Toggle Right Offcanvas
</button>
</div>위처럼 하면 오프캔버스가 오른쪽에서 나타난다.
<div class="offcanvas offcanvas-top" id="demo">
<div class="offcanvas offcanvas-bottom" id="demo">와 같이, top, bottom에서도 나타나게 할 수 있다.
