부트스트랩 4 카드
카드
Bootstrap 4의 카드는 내용 주위에 패딩이 있는 테두리가 있는 상자입니다. 여기에는 머리글, 바닥글, 콘텐츠, 색상 등에 대한 옵션이 포함됩니다.
기본 카드
기본 카드는 .card클래스로 생성되고 카드 내부의 콘텐츠에는 .card-body클래스가 있습니다.
예시
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Bootstrap 3에 익숙하다면 카드가 기존 패널, 우물 및 축소판을 대체합니다.
머리글과 바닥 글
클래스 는 .card-header카드에 제목을 추가하고 .card-footer클래스는 카드에 바닥글을 추가합니다.
예시
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
상황별 카드
카드에 배경색을 추가하려면 컨텍스트 클래스 ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary및 ..bg-dark.bg-light
예시
제목, 텍스트 및 링크
.card-title제목 요소에 카드 제목을 추가하는 데 사용 합니다. .card-text클래스는 <p> 요소가 내부의 마지막 자식(또는 유일한 자식)인 경우 해당 요소의 아래쪽 여백을 제거하는 데 사용 됩니다 .card-body. 클래스 는 .card-link모든 링크에 파란색을 추가하고 호버 효과를 줍니다.
예시
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
카드 이미지
.card-img-top또는 .card-img-bottom를 추가
<img>하여 이미지를 카드 내부의 상단 또는 하단에 배치합니다. .card-body전체 너비에 걸쳐 외부에 이미지를 추가했습니다 .
예시
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
늘어난 링크
카드 내부의 링크에 클래스를 추가하면 .stretched-link전체 카드를 클릭할 수 있고 호버링할 수 있습니다(카드가 링크 역할을 함).
예시
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
카드 이미지 오버레이
이미지를 카드 배경으로 바꾸고 이미지 .card-img-overlay
위에 텍스트를 추가하는 데 사용합니다.
예시
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
카드 열
첫 번째 카드 안의 일부 텍스트
두 번째 카드 안의 일부 텍스트
세 번째 카드 안의 일부 텍스트
네 번째 카드 안의 일부 텍스트
다섯 번째 카드 안의 일부 텍스트
여섯 번째 카드 안의 일부 텍스트
이 .card-columns클래스는 벽돌과 같은 카드 그리드(예: pinterest)를 만듭니다. 더 많은 카드를 삽입하면 레이아웃이 자동으로 조정됩니다.
참고: 카드는 작은 화면(576px 미만)에서 세로로 표시됩니다.
예시
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
카드 데크
첫 번째 카드 안의 일부 텍스트
높이를 높이기 위한 추가 텍스트
높이를 높이기 위한 추가 텍스트
높이를 높이기 위한 추가 텍스트
두 번째 카드 안의 일부 텍스트
세 번째 카드 안의 일부 텍스트
네 번째 카드 안의 일부 텍스트
이 .card-deck클래스는 높이와 너비가 같은 카드 그리드를 만듭니다 . 더 많은 카드를 삽입하면 레이아웃이 자동으로 조정됩니다.
참고: 카드는 작은 화면(576px 미만)에서 세로로 표시됩니다.
예시
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
카드 그룹
첫 번째 카드 안의 일부 텍스트
높이를 높이기 위한 추가 텍스트
높이를 높이기 위한 추가 텍스트
높이를 높이기 위한 추가 텍스트
두 번째 카드 안의 일부 텍스트
세 번째 카드 안의 일부 텍스트
네 번째 카드 안의 일부 텍스트
클래스 는 .card-group와 비슷합니다 .card-deck. 유일한 차이점은 .card-group클래스가 각 카드 사이의 왼쪽 및 오른쪽 여백을 제거한다는 것입니다.
참고: 카드는 위쪽 및 아래쪽 여백 이 있는 작은 화면( 576px 미만)에서 세로로 표시됩니다 .
예시
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>