부트스트랩의 JavaScript 플러그인 사용법
부트스트랩 JavaScript 플러그인 기본 사용법
부트스트랩의 JavaScript 플러그인은 jQuery와 Popper.js에 의존합니다. 이를 사용하려면 먼저 bootstrap.min.js와 popper.min.js 파일을 프로젝트에 포함시켜야 합니다. CDN을 통해 쉽게 불러오거나, npm이나 yarn을 통해 설치할 수 있습니다. JavaScript 플러그인은 HTML 요소에 data-* 속성을 추가하거나, JavaScript를 통해 직접 호출하여 사용할 수 있습니다. 예를 들어, 드롭다운 메뉴를 사용하려면 data-toggle="dropdown"을 추가하거나, JavaScript에서 $('#dropdown').dropdown()을 호출하면 됩니다.모달(Modal) 플러그인 사용하기
부트스트랩의 모달은 팝업 창을 쉽게 생성할 수 있는 기능을 제공합니다. 모달을 열고 닫을 때는 data-bs-toggle="modal"과 data-bs-target="#myModal" 속성을 사용하거나, JavaScript를 통해 $('#myModal').modal('show'), $('#myModal').modal('hide')와 같이 제어할 수 있습니다. 또한, 모달 내의 버튼이나 다른 요소들에 이벤트 핸들러를 추가하여 더욱 동적인 UI를 만들 수 있습니다. modal-lg, modal-sm 클래스를 사용하면 모달의 크기를 조정할 수 있고, fade 클래스를 추가하면 부드러운 전환 효과를 적용할 수 있습니다.드롭다운(Dropdown) 플러그인 사용하기
부트스트랩의 드롭다운 플러그인은 메뉴나 항목을 선택할 수 있는 드롭다운을 쉽게 구현할 수 있게 해줍니다. 기본적으로 data-bs-toggle="dropdown"을 추가하여 HTML 요소에서 드롭다운을 만들 수 있으며, JavaScript로도 $('#dropdownMenuButton').dropdown('toggle')와 같이 동적으로 드롭다운을 열거나 닫을 수 있습니다. 드롭다운의 내용이나 스타일은 CSS로 변경할 수 있고, 메뉴 항목을 비활성화하는 등의 고급 기능도 지원합니다. dropdown-menu-end 클래스를 사용하면 드롭다운 메뉴를 오른쪽으로 정렬할 수 있습니다.툴팁(Tooltip)과 팝오버(Popover) 사용법
부트스트랩의 툴팁과 팝오버는 사용자가 마우스를 올리거나 클릭할 때 추가 정보를 제공하는 데 유용한 기능입니다. 툴팁은 data-bs-toggle="tooltip" 속성을 사용하여 요소에 간단히 적용할 수 있습니다. JavaScript로도 new bootstrap.Tooltip(element)를 통해 툴팁을 동적으로 초기화할 수 있습니다. 팝오버는 툴팁과 비슷하지만, 더 많은 내용을 포함할 수 있으며, data-bs-toggle="popover" 속성을 사용하거나, JavaScript에서 new bootstrap.Popover(element)로 팝오버를 초기화할 수 있습니다. 이 두 플러그인은 title 속성이나 content 속성으로 표시할 내용을 설정할 수 있습니다.
알림(Alert) 및 토스트(Toast) 사용하기
부트스트랩의 **알림(Alert)**과 **토스트(Toast)**는 중요한 메시지를 사용자에게 전달할 때 사용됩니다. 알림은 alert, alert-success, alert-danger 등의 클래스를 사용하여 경고 메시지를 표시할 수 있습니다. JavaScript로 $('.alert').alert('close')를 호출하면 알림을 닫을 수 있습니다. 토스트는 toast 클래스를 사용하여 화면의 하단에 알림을 띄울 수 있으며, JavaScript로 $('#myToast').toast('show') 또는 $('#myToast').toast('hide')로 토스트를 제어할 수 있습니다. 이 기능은 주로 자동으로 사라지는 알림을 구현할 때 유용합니다.