Bootstrap 5 카드

카드

Bootstrap 5의 카드는 테두리가 있는 상자로, 내용 주위에 일정한 내간격이 있습니다. 이는 헤더,脚步, 내용, 색상 등의 옵션을 포함합니다.

기본 카드

기본 카드는 .card 클래스를 생성한 카드의 내용은 .card-body 클래스:

實例

<div class="card">
  <div class="card-body">기본 카드</div>
</div>

親自試一試

헤더와脚步

.card-header 클래스를 사용하여 카드에 타이틀을 추가하십시오:.card-footer 클래스를 사용하여 카드에脚步를 추가하십시오:

實例

<div class="card">
  <div class="card-header">헤더</div>
  <div class="card-body">내용</div>
  <div class="card-footer">脚步</div>
</div>

親自試一試

컨텍스트 카드

카드에 배경색을 추가하려면, 다음과 같은 컨텍스트 클래스를 사용하십시오:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

實例

親自試一試

제목, 텍스트 및 링크

사용하십시오 .card-title 카드 제목을 어떤 타이틀 요소에 추가하십시오. 만약 <p> 요소는 .card-body 의 마지막 자식 요소(또는 유일한 자식 요소)는 .card-text 類用於移除 <p> 元素的底部邊距。.card-link 為任意鏈接添加藍色和懸停效果。

實例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片標題</h4>
    <p class="card-text">一些示例文本。一些示例文本。</p>
    <a href="#" class="card-link">卡片鏈接</a>
    <a href="#" class="card-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="avatar.png" alt="卡片圖像">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">個人資料查看</a>
  </div>
</div>

親自試一試

卡片圖像叠加

將圖像轉換為卡片背景並使用 .card-img-overlay 在圖像顶部添加文本：

實例

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="卡片圖像">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">個人資料查看</a>
  </div>
</div>

親自試一試