가장 인기 있는 프런트 엔드 프레임워크 중 하나인 Bootstrap 5는 개발자가 반응성이 뛰어나고 시각적으로 매력적인 웹 사이트를 빠르게 구축하는 데 도움이 되는 다양한 유용한 구성 요소와 유틸리티를 제공합니다.

카드

카드는 콘텐츠를 깨끗하고 체계적으로 표시할 수 있게 해주는 Bootstrap 5의 다용도 구성 요소입니다. 미적으로 보기 좋고 기능적인 방식으로 정보를 표시하는 데 적합합니다.

기본 구조

기본 카드는 카드 머리글, 본문, 바닥글과 같은 요소를 포함하는 .card 클래스의 컨테이너로 구성됩니다.

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

카드 사용자 정의

카드를 광범위하게 맞춤설정할 수 있습니다.

• 이미지: .card-img-top 또는 .card-img-bottom을 사용하여 이미지를 추가합니다.
• 레이아웃: 다양한 레이아웃에 카드 데크, 그룹 또는 열을 사용합니다.
• 색상: .bg-primary, .text-white와 같은 상황별 클래스를 활용합니다.

  
Header
  

    
Primary card title
    
Text content goes here.
  

사용 사례

• 사용자 프로필: 아바타로 사용자 정보를 표시합니다.
• 제품 목록: 이미지와 설명이 포함된 제품을 보여줍니다.
• 블로그 게시물: 제목과 발췌문으로 기사를 요약합니다.

날짜 선택기

Bootstrap 5에는 기본 날짜 선택기가 포함되어 있지 않지만 Tempus Dominus 또는 Bootstrap Datepicker와 같은 타사 라이브러리를 사용하면 날짜 선택기를 통합하는 것이 간단합니다.

구현

먼저 필수 CSS 및 JS 파일을 포함합니다.

그런 다음 날짜 선택기를 초기화합니다.

사용자 정의 옵션

• 형식: 날짜 형식을 사용자 정의합니다.
• 시작 및 종료 날짜: 선택 가능한 날짜 범위를 제한합니다.
• 테마: 다양한 스타일을 적용합니다.

사이드바

사이드바는 특히 복잡한 웹 애플리케이션에서 탐색에 필수적입니다.

반응형 사이드바 만들기

Bootstrap의 그리드 시스템과 축소 구성 요소를 사용하여 반응형 사이드바를 만들 수 있습니다.

대화형 사이드바

상호작용을 추가하여 사용자 경험을 향상하세요.

• 호버 효과: CSS를 사용하여 메뉴 항목을 강조 표시합니다.
• 접이식 메뉴: 클릭 시 펼쳐지는 하위 메뉴를 구현합니다.
• 아이콘: Font Awesome 또는 Bootstrap 아이콘을 사용하여 아이콘을 통합합니다.

체크박스

체크박스를 사용하면 사용자가 세트에서 여러 옵션을 선택할 수 있습니다.

체크박스 스타일링

Bootstrap 5는 사용자 정의 체크박스 스타일을 제공합니다:

  
    Default checkbox
  

체크박스 그룹

더 나은 정리를 위한 그룹 체크박스:

  Select Options:
  

    
  

보행인

바닥글은 추가 탐색 및 정보를 제공하는 데 중요합니다.

바닥글 디자인

간단한 바닥글 만들기:

고정 바닥글

바닥글을 하단에 고정합니다.

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

결론

이 Bootstrap 5 구성 요소를 마스터하면 웹 프로젝트의 기능과 미학을 크게 향상시킬 수 있습니다. 카드, 날짜 선택기, 사이드바, 체크박스 및 바닥글을 사용자 정의하고 구현하는 방법을 이해하면 다음을 수행할 수 있습니다. 사용자 친화적이고 시각적으로 매력적인 웹사이트를 만듭니다. 특정 요구 사항에 가장 적합한 스타일을 찾기 위해 다양한 스타일과 구성을 계속 실험해 보세요.

추가 자료:

• 부트스트랩 공식 문서
• 부트스트랩 사용자 정의