카드
Bootstrap의 카드는 다양한 변형 및 옵션을 포함하는 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다.
에 대한
카드 는 유연하고 확장 가능한 콘텐츠 컨테이너입니다 . 여기에는 머리글 및 바닥글, 다양한 콘텐츠, 상황에 맞는 배경색 및 강력한 표시 옵션에 대한 옵션이 포함됩니다. Bootstrap 3에 익숙하다면 카드가 기존 패널, 우물 및 축소판을 대체합니다. 이러한 구성 요소와 유사한 기능을 카드의 수정자 클래스로 사용할 수 있습니다.
예시
카드는 가능한 한 적은 마크업과 스타일로 제작되지만 여전히 많은 제어 및 사용자 정의를 제공합니다. flexbox로 제작되어 쉽게 정렬할 수 있고 다른 Bootstrap 구성 요소와 잘 섞입니다. margin
기본적으로 는 없으므로 필요에 따라 간격 유틸리티 를 사용하십시오.
다음은 콘텐츠가 혼합되고 너비가 고정된 기본 카드의 예입니다. 카드는 시작할 고정 너비가 없으므로 자연스럽게 부모 요소의 전체 너비를 채웁니다. 이것은 우리의 다양한 크기 옵션 으로 쉽게 사용자 정의할 수 있습니다 .
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
콘텐츠 유형
카드는 이미지, 텍스트, 목록 그룹, 링크 등을 포함한 다양한 콘텐츠를 지원합니다. 다음은 지원되는 항목의 예입니다.
신체
카드의 구성 요소는 .card-body
. 카드 안에 패딩된 부분이 필요할 때마다 사용하세요.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
제목, 텍스트 및 링크
카드 제목은 태그 에 추가 .card-title
하여 사용합니다. 같은 방법 으로 태그 <h*>
를 추가하면 링크가 추가되고 나란히 배치됩니다 ..card-link
<a>
자막은 태그 에 추가 .card-subtitle
하여 사용합니다. <h*>
와 아이템을 .card-title
아이템 에 넣으면 카드 제목과 부제목이 잘 정렬됩니다..card-subtitle
.card-body
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
이미지
.card-img-top
카드 상단에 이미지를 배치합니다. 를 사용 .card-text
하여 카드에 텍스트를 추가할 수 있습니다. 안에 있는 텍스트 .card-text
는 표준 HTML 태그로 스타일을 지정할 수도 있습니다.
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
그룹 나열
플러시 목록 그룹이 있는 카드에 콘텐츠 목록을 만듭니다.
- 아이템
- 두 번째 항목
- 세 번째 항목
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- 아이템
- 두 번째 항목
- 세 번째 항목
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- 아이템
- 두 번째 항목
- 세 번째 항목
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
부엌 싱크대
여러 콘텐츠 유형을 믹스 앤 매치하여 필요한 카드를 만들거나 모든 것을 던질 수 있습니다. 아래에는 이미지 스타일, 블록, 텍스트 스타일 및 목록 그룹이 나와 있으며 모두 고정 너비 카드에 래핑되어 있습니다.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
머리글과 바닥 글
카드 내에 선택적 머리글 및/또는 바닥글을 추가합니다.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
카드 헤더는 요소 에 추가 .card-header
하여 스타일을 지정할 수 있습니다.<h*>
추천
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
blockquote 요소에 포함된 잘 알려진 인용문.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
사이징
카드는 특정 width
시작을 가정하지 않으므로 달리 명시되지 않는 한 100% 너비가 됩니다. 사용자 정의 CSS, 그리드 클래스, 그리드 Sass 믹스인 또는 유틸리티를 사용하여 필요에 따라 이를 변경할 수 있습니다.
그리드 마크업 사용
그리드를 사용하여 필요에 따라 열과 행에 카드를 감쌉니다.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
유틸리티 사용
사용 가능한 몇 가지 크기 조정 유틸리티 를 사용하여 카드 너비를 빠르게 설정하십시오.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
사용자 정의 CSS 사용
스타일시트에서 또는 인라인 스타일로 사용자 정의 CSS를 사용하여 너비를 설정하십시오.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
텍스트 정렬
텍스트 정렬 클래스 를 사용하여 전체 또는 특정 부분에서 모든 카드의 텍스트 정렬을 빠르게 변경할 수 있습니다 .
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
항해
Bootstrap의 탐색 구성 요소 를 사용하여 카드의 헤더(또는 블록)에 탐색을 추가 합니다 .
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
이미지
카드에는 이미지 작업을 위한 몇 가지 옵션이 있습니다. 카드의 양쪽 끝에 "이미지 캡"을 추가하거나, 이미지에 카드 콘텐츠를 오버레이하거나, 단순히 카드에 이미지를 삽입하는 방법 중에서 선택하십시오.
이미지 캡
머리글 및 바닥글과 마찬가지로 카드에는 상단 및 하단 "이미지 캡"(카드 상단 또는 하단에 있는 이미지)이 포함될 수 있습니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
3분 전에 마지막으로 업데이트됨
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
3분 전에 마지막으로 업데이트됨
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
이미지 오버레이
이미지를 카드 배경으로 바꾸고 카드의 텍스트를 오버레이합니다. 이미지에 따라 추가 스타일이나 유틸리티가 필요할 수도 있고 필요하지 않을 수도 있습니다.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
수평의
그리드 및 유틸리티 클래스의 조합을 사용하여 카드를 모바일 친화적이고 반응적인 방식으로 가로로 만들 수 있습니다. 아래 예에서는 그리드 거터를 제거하고 클래스를 .g-0
사용 하여 중단점 .col-md-*
에서 카드를 수평으로 만듭니다 . md
카드 내용에 따라 추가 조정이 필요할 수 있습니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
3분 전에 마지막으로 업데이트됨
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
카드 스타일
카드에는 배경, 테두리 및 색상을 사용자 지정할 수 있는 다양한 옵션이 있습니다.
배경 및 색상
텍스트 색상 및 배경 유틸리티 를 사용 하여 카드 모양을 변경합니다.
기본 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
보조 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
성공 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
위험 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
경고 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
정보 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
라이트 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
어두운 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
보조 기술에 의미 전달
색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden
클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.
국경
테두리 유틸리티 를 사용 border-color
하여 카드 만 변경 합니다. 아래와 같이 .text-{color}
부모 또는 카드 내용의 하위 집합에 클래스를 넣을 수 있습니다..card
기본 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
보조 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
성공 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
위험 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
경고 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
정보 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
라이트 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
어두운 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
믹스인 유틸리티
필요에 따라 카드 머리글과 바닥글의 테두리를 변경하고 로 테두리를 제거할 수도 background-color
있습니다 .bg-transparent
.
성공 카드 제목
카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
카드 레이아웃
카드 내의 콘텐츠 스타일 지정 외에도 Bootstrap에는 일련의 카드를 배치하기 위한 몇 가지 옵션이 있습니다. 당분간 이러한 레이아웃 옵션은 아직 반응하지 않습니다 .
카드 그룹
카드 그룹을 사용하여 카드를 동일한 너비와 높이 열이 있는 연결된 단일 요소로 렌더링합니다. 카드 그룹은 쌓인 상태 에서 시작하여 중단점 display: flex;
에서 시작하여 균일한 치수로 부착되는 데 사용됩니다 .sm
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
3분 전에 마지막으로 업데이트됨
카드 제목
이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.
3분 전에 마지막으로 업데이트됨
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 이 카드에는 동일한 높이의 액션을 보여주는 첫 번째 카드보다 훨씬 더 긴 콘텐츠가 있습니다.
3분 전에 마지막으로 업데이트됨
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
바닥글이 있는 카드 그룹을 사용하면 해당 콘텐츠가 자동으로 정렬됩니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 이 카드에는 동일한 높이의 액션을 보여주는 첫 번째 카드보다 훨씬 더 긴 콘텐츠가 있습니다.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
그리드 카드
Bootstrap 그리드 시스템과 해당 .row-cols
클래스 를 사용하여 행당 표시할 그리드 열(카드 주위에 래핑된) 수를 제어합니다. 예를 들어, 여기 .row-cols-1
에 카드를 한 열에 배치 .row-cols-md-2
하고 중간 중단점에서 위로 여러 행에 걸쳐 동일한 너비로 4개의 카드를 분할합니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
로 변경 .row-cols-3
하면 네 번째 카드 랩이 표시됩니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
동일한 높이가 필요한 경우 .h-100
카드에 추가하십시오. 기본적으로 동일한 높이를 원하면 $card-height: 100%
Sass에서 설정할 수 있습니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이것은 짧은 카드입니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.
카드 제목
이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
카드 그룹과 마찬가지로 카드 바닥글이 자동으로 정렬됩니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.
카드 제목
이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.
카드 제목
아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 이 카드에는 동일한 높이의 액션을 보여주는 첫 번째 카드보다 훨씬 더 긴 콘텐츠가 있습니다.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
석공 직
우리 는 Masonryv4
와 같은 기둥 의 동작을 모방하기 위해 CSS 전용 기술을 사용 했지만 이 기술에는 많은 불쾌한 부작용이 있었습니다. 에서 이러한 유형의 레이아웃을 사용하려면 Masonry 플러그인을 사용하면 됩니다. Masonry는 Bootstrap에 포함되어 있지 않지만 시작하는 데 도움이 되도록 데모 예제 를 만들었습니다 .v5
사스
변수
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;