부트 스트랩 카드 구성 요소 : 완전한 소개

이 기사는 시각적으로 매력적이고 반응이 좋은 웹 레이아웃을 만들기위한 다양한 도구 인 Bootstrap의 카드 구성 요소를 탐색합니다. 최적의 성능을위한 용도, 커스터마이즈 및 모범 사례를 다룰 것입니다.

왜 부트 스트랩 카드를 사용 하는가?

주요 반응 형 웹 프레임 워크 인 Bootstrap은 놀라운 레이아웃 생성을 단순화합니다. 장점은 다음과 같습니다

손쉬운 반응 형 디자인 : 는 최소한의 HTML 및 CSS 지식이 필요합니다 모바일 최초 접근 : 모바일 응답 성을 우선시합니다 크로스 브라우저 호환성 :

주요 브라우저에서 완벽하게 작동합니다 Flexbox 기반 그리드 :

간소 정렬 및 간격

광범위한 구성 요소 :

버튼, 모달 및 카드와 같은 재사용 가능한 요소를 제공합니다.
• 최신 부트 스트랩 버전은 카드 구성 요소를 크게 향상시켜 패널 및 썸네일과 같은 이전 요소를 대체합니다. 부트 스트랩 카드 이해
부트 스트랩 카드는 다양한 콘텐츠 유형 (텍스트, 이미지, 멀티미디어)을위한 유연한 컨테이너입니다. 주요 기능은 다음과 같습니다
• 단순성 : 와 같은 클래스를 사용하여 쉽게 생성됩니다 컨텐츠 다목적 성 : 제목, 이미지, 목록 등을 지원합니다 응답 성 :
Bootstrap의 그리드 시스템을 사용하여 다른 화면 크기에 적응합니다. 사용자 정의 :
• 유틸리티 클래스는 스타일 조정 (색상, 경계, 정렬)을 허용합니다. 고급 레이아웃 : 는 카드 그룹, 데크 (부트 스트랩 5에서는 감가 상승) 및 복잡한 배열에 대한 열 레이아웃을 지원합니다.
• 필수 부트 스트랩 카드 클래스 다음은 주요 클래스의 요약입니다 :
  : 메인 카드 컨테이너.
  • : 카드의 내용 영역. : 카드 제목 스타일 (종종 또는 ). card
  : 카드 내 표준 텍스트 스타일
  • : 헤더 섹션을 만듭니다 card-body : 바닥 글을 생성합니다 /
  : 이미지를 상단 또는 하단에 위치시킵니다 /
  • : 카드 내에서 목록을 생성합니다 card-title : 너비와 높이가 같은 그룹 카드 : (부트 스트랩 5에서 더 이상 사용되지 않음) 카드를 간격과 ​​정렬합니다 /<h3></h3> : 텍스트 및 배경색에 대한 유틸리티 클래스 <h4></h4> 부트 스트랩 통합
  CDN을 통한 부트 스트랩을 포함 시키거나 https://www.php.cn/link/735dd629AB696E3A1BFC0FC0D687BB1 에서 다운로드하십시오. 다음은 card-text : 에 대한 CDN 예입니다 이것은 쉽게 설정하기 위해 CDN을 사용합니다. 보다 자세한 설정 옵션은 부트 스트랩 문서를 참조하십시오.
  • card-header 기본 카드 만들기 간단한 카드는 클래스를 컨텐츠로 사용하고 컨텐츠의 경우 , ,
  및
  • 를 사용합니다. 예제 및 스크린 샷은 원본 텍스트로 제공되며 수평 카드, 목록 그룹, 헤더, 바닥 글, 이미지 오버레이 및 이미지 캡을 보여줍니다. 이것들은 모두 시각적으로 원래 텍스트로 설명되어 있습니다 card-footer 응답 디자인
  Bootstrap의 그리드 시스템은 응답을 보장합니다. 원본 텍스트는 행 및 열 클래스를 사용하여 응답 형 카드 레이아웃을 보여주는 코드 예제 및 스크린 샷을 제공합니다. 카드 크기 조정
  • 인라인 스타일을 사용하여 카드 너비와 높이를 제어합니다 () 또는 부트 스트랩 유틸리티 클래스. 원본 텍스트는 예제와 스크린 샷을 제공합니다. 또한 더 나은 확장 성을 위해 최신 부트 스트랩 버전의 card-img-top 단위로의 전환에 대해 설명합니다. 카드 스타일링 card-img-bottom 배경, 텍스트 및 테두리 색상의 경우 , 및 와 같은 유틸리티 클래스를 사용하여 카드 모양을 사용자 정의하십시오. 다양한 스타일을 보여주는 예제와 스크린 샷이 원본 텍스트에 포함되어 있습니다. 헤더 스타일의 사용도 설명합니다 고급 레이아웃
  • 원본 텍스트 세부 사항은

    (동일한 크기의 첨부 된 카드의 경우), 그리드 시스템 (간격 카드의 경우)을 대체하고 부트 스트랩 5에서 card-group의 부재를 사용하여 고급 레이아웃을 생성합니다. CSS Masonry 또는 Masonry.js와 같은 대안 제안). 시각적 예제가 제공됩니다. card-deck 성능 최적화 card-columns

    이 기사는 필수 성능 최적화 기술로 끝납니다 : 게으른로드 이미지, 이미지 크기 최적화, CSS/JS, 아이콘에 SVG를 사용하고 자원을 예비로드/프리 페치하고 DOM 복잡성을 줄이며 Font를 최적화합니다. 코드 예제는 모범 사례를 보여줍니다.

    결론 부트 스트랩 카드는 현대적이고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 이 기사는 기본 사용, 사용자 정의, 고급 레이아웃 및 성능 최적화를 포함하는 포괄적 인 가이드를 제공합니다. 원본 텍스트의 스크린 샷 및 코드 예제는 여기에서 논의 된 개념을 이해하는 데 필수적입니다.

위 내용은 부트 스트랩 카드 구성 요소 : 완전한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!