부트스트랩 컴포넌트 소개
버튼(Button)
부트스트랩의 버튼 컴포넌트는 다양한 스타일과 크기를 제공합니다. btn, btn-primary, btn-secondary 등 다양한 클래스가 있어 버튼의 색상, 크기, 모양을 손쉽게 변경할 수 있습니다. 또한, 버튼은 active, disabled, outline과 같은 상태를 표현할 수 있습니다. 버튼은 <button>, <a>, 또는 <input> 태그로 사용하며, 클릭 이벤트를 처리하기 위한 JavaScript 기능도 쉽게 추가할 수 있습니다. 버튼을 통해 사용자에게 직관적인 인터랙션을 제공할 수 있습니다.
네비게이션(Navigation)
부트스트랩은 **네비게이션 바(Navbar)**와 탭(Tabs), 네비게이션 목록(Nav) 등 여러 가지 네비게이션 관련 컴포넌트를 제공합니다. navbar 클래스는 상단 바를 만들 때 사용되며, 로고, 메뉴 항목, 검색창 등을 포함할 수 있습니다. nav 클래스를 사용하여 탭, 드롭다운 메뉴 등을 구현할 수 있습니다. 네비게이션 컴포넌트는 반응형 디자인을 지원하여 화면 크기에 따라 자동으로 레이아웃이 조정됩니다. 이로 인해 웹 애플리케이션의 내비게이션을 쉽게 구현하고 관리할 수 있습니다.
카드(Card)
부트스트랩의 카드(Card) 컴포넌트는 다양한 정보를 깔끔하고 일관된 방식으로 표시할 수 있는 UI 요소입니다. 카드 컴포넌트는 제목, 텍스트, 이미지 등을 포함할 수 있으며, 여러 개의 카드가 포함된 그리드 시스템을 통해 레이아웃을 구성할 수 있습니다. 카드 컴포넌트는 card-header, card-body, card-footer 등 여러 부분으로 나눠서 스타일링할 수 있어, 복잡한 레이아웃을 쉽게 만들 수 있습니다. 또한, 카드는 버튼이나 링크를 포함하여 인터랙티브하게 사용할 수 있습니다.
모달(Modal)
부트스트랩의 모달(Modal) 컴포넌트는 사용자가 상호작용할 수 있는 대화형 창을 만들어주는 UI 요소입니다. 일반적으로 사용자에게 경고 메시지나 중요 정보를 전달할 때 사용됩니다. 모달은 페이지 상에서 벗어나지 않고도 다른 내용을 표시할 수 있기 때문에, 정보나 확인을 요구할 때 유용하게 사용됩니다. 부트스트랩은 모달의 크기, 애니메이션 효과, 버튼 등을 손쉽게 커스터마이징할 수 있도록 도와줍니다. 자바스크립트로 모달을 띄우거나 닫을 수 있는 이벤트를 쉽게 처리할 수 있습니다.
드롭다운(Dropdown)
부트스트랩의 드롭다운(Dropdown) 컴포넌트는 여러 개의 옵션을 간단히 표시할 수 있는 메뉴입니다. 사용자가 클릭하면 메뉴가 열리고, 여러 개의 선택 옵션을 제공할 수 있습니다. 드롭다운은 버튼, 링크, 텍스트 등 다양한 요소에 사용할 수 있으며, dropdown-toggle, dropdown-menu, dropdown-item 클래스를 통해 쉽게 구성할 수 있습니다. 드롭다운 메뉴는 클릭, hover 등의 다양한 트리거 방식으로 표시할 수 있어, 사용자 인터페이스의 편리함을 높여줍니다. 특히, 메뉴 항목이 많을 때 유용하게 사용됩니다.