回報問題編輯此頁面

卡片

卡片是一種具備彈性和可擴充功能的內容容器。包含標頭和頁尾的選項、廣泛的內容、有意義的背景色和強大的顯示選項。

概覽

卡片的建構成使用最少的標記和樣式，但仍然能提供多面向的控制和自訂功能。它們內建彈性盒狀模型，提供簡易的對齊功能，且能與其他元件完美結合。

一開始，<b-card> 沒有固定寬度，因此它們會自然填滿其父元素的整個寬度。可透過樣式或標準 Bootstrap v4 大小類別輕易自訂。

透過指定 tag 道具，將預設的根標籤 div 變更為任何其他 HTML 元素

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- b-card.vue -->

內容類型

卡片支援各種廣泛的內容，包括圖片、文字、列表群組、連結等。以下列出 <b-card> 中支援的內容範例：

卡片內容

一個 <b-card> 的構建區塊是 <b-card-body> 區段，可以在卡片中提供一個填補的區段。

預設 <b-card> 內容會自動置入一個 <b-card-body> 區段中

<div>
  <b-card class="text-center">
    <div class="bg-secondary text-light">
      This is some content within the default <samp>&lt;b-card-body&gt;</samp> block of the
      <samp>&lt;b-card&gt;</samp> component. Notice the padding between the card's border and this
      gray <samp>&lt;div&gt;</samp>.
    </div>
  </b-card>
</div>

<!-- b-card-body.vue -->

若要停用自動 <b-card-body> 區段（及相關填補）請在 <b-card> 屬性中設定 no-body。

<div>
  <b-card no-body class="text-center">
    <div class="bg-secondary text-light">
      This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
      lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
    </div>
  </b-card>
</div>

<!-- b-card-body-no-body.vue -->

請注意當 no-body 啟用時，title 和 sub-title 屬性的內容將不會呈現。

使用 <b-card-body> 子元件，可以將您自己的卡片主體置於具有 no-body 屬性的 <b-card> 元件中的任何位置。

標題、文字及連結

透過 title 屬性增加卡片標題，而子標題則透過 sub-title 屬性增加。標題會使用子元件 <b-card-title> 呈現，而子標題會使用子元件 <b-card-sub-title> 呈現。

透過子元件 <b-card-text>，可以增加段落文字至卡片中。卡片主體中的最後一個 <b-card-text> 會自動移除其底部空白（透過 CSS）。<b-card-text> 中的文字也可以運用標準 HTML 標籤調整樣式。

可以透過在 <a> 標記（或 <b-link> 元件）新增 .card-link 類別，來增加連結並將其並排置放。

<div>
  <b-card title="Card title" sub-title="Card subtitle">
    <b-card-text>
      Some quick example text to build on the <em>card title</em> and make up the bulk of the card's
      content.
    </b-card-text>

    <b-card-text>A second paragraph of text in the card.</b-card-text>

    <a href="#" class="card-link">Card link</a>
    <b-link href="#" class="card-link">Another link</b-link>
  </b-card>
</div>

<!-- b-card-text.vue -->

圖片

卡片的屬性 img-src 將會在卡片最上層放置一張圖片，並使用 img-alt 屬性指定一個字串，以放置於圖片的 alt 屬性中。由 img-src 屬性指定的圖片會是回應式的，並且會在卡片寬度改變時調整其寬度。

或者，您可以使用子元件 <b-card-img> 手動放置圖片於 <b-card> 中。詳見下方廚具水槽示範的使用方式。

<div>
  <div>
    <h4>Top and Bottom</h4>
    <b-card-group deck>
      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-top>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>

      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-bottom>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-4">
    <h4>Left and Right (or Start and End)</h4>
    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-left class="mb-3">
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>

    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-right>
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>
  </div>
</div>

<!-- b-card-img.vue -->

注意：左、右圖像可能需要針對 .card-img-left 和 .card-img-right 類別套用額外的樣式，原因為如果圖片短於內容時，圖片高度會「拉長」。針對左右對齊的圖像，不支援標頭和頁尾。您可能會發現水平卡配置這個範例對於建立橫向回應式卡片時更有彈性。

疊加圖像

將布林值屬性 overlay 設為背景中的圖像。

<div>
  <b-card
    overlay
    img-src="https://picsum.photos/900/250/?image=3"
    img-alt="Card Image"
    text-variant="white"
    title="Image Overlay"
    sub-title="Subtitle"
  >
    <b-card-text>
      Some quick example text to build on the card and make up the bulk of the card's content.
    </b-card-text>
  </b-card>
</div>

<!-- b-card-overlay-img-.vue -->

延遲載入的圖像

使用 <b-card-img-lazy> 子元件，可延遲載入捲動至顯示範圍內的圖像。 <b-card-img-lazy> 支援相同的 <b-card-img> 屬性，也支援許多 <b-img-lazy> 元件的屬性。

透過 header/footer 屬性或命名區塊，將卡片內加入選用的標題或頁尾。您可以透過設定 header-tag 和 footer-tag 屬性來控制包裹區塊元件標籤的套用 (預設為 div)

<div>
  <b-card-group deck>
    <b-card
      header="featured"
      header-tag="header"
      footer="Card Footer"
      footer-tag="footer"
      title="Title"
    >
      <b-card-text>Header and footers using props.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>

    <b-card title="Title" header-tag="header" footer-tag="footer">
      <template #header>
        <h6 class="mb-0">Header Slot</h6>
      </template>
      <b-card-text>Header and footers using slots.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
      <template #footer>
        <em>Footer Slot</em>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-header-footer.vue -->

混合式範例

混合搭配多種內容類型來建立所需的卡片，或是放進所有類型的內容。下方顯示圖片樣式、區塊、文字樣式和清單群組，全都包在固定寬度的卡片中。

<div>
  <b-card
    no-body
    style="max-width: 20rem;"
    img-src="https://placekitten.com/380/200"
    img-alt="Image"
    img-top
  >
    <template #header>
      <h4 class="mb-0">Hello World</h4>
    </template>

    <b-card-body>
      <b-card-title>Card Title</b-card-title>
      <b-card-sub-title class="mb-2">Card Sub Title</b-card-sub-title>
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </b-card-text>
    </b-card-body>

    <b-list-group flush>
      <b-list-group-item>Cras justo odio</b-list-group-item>
      <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item>Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-body>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </b-card-body>

    <b-card-footer>This is a footer</b-card-footer>

    <b-card-img src="https://placekitten.com/480/210" alt="Image" bottom></b-card-img>
  </b-card>
</div>

<!-- b-card-kitchen-sink.vue -->

水平卡片配置

透過結合網格元件、工具程式類別和個別卡片子元件，可以使卡片以對行動裝置友善且回應式的方式水平排列。

在以下的範例中，我們移除 <b-row> 中格狀欄位的空間，並在 <b-col> 中使用 md 屬性，在 md 斷點處讓卡片水平排列。rounded-0 類別會移除 <b-card-img> 角落的圓角，而 overflow-hidden 類別會根據卡片的邊框半徑對 <b-card> 適當地裁剪圖片的角落。可能需要根據卡片內容進行進一步的調整。

<div>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
    <b-row no-gutters>
      <b-col md="6">
        <b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
      </b-col>
      <b-col md="6">
        <b-card-body title="Horizontal Card">
          <b-card-text>
            This is a wider card with supporting text as a natural lead-in to additional content.
            This content is a little bit longer.
          </b-card-text>
        </b-card-body>
      </b-col>
    </b-row>
  </b-card>
</div>

<!-- b-card-horizontal.vue -->

文字變異

預設，卡片使用深色文字，假設為淺色背景。您可以透過屬性 text-variant 中調整文字的顏色，及卡片的子組成元素的顏色，來反轉上述設定。接著，指定深色背景的變異。

<b-card bg-variant="dark" text-variant="white" title="Card Title">
  <b-card-text>
    With supporting text below as a natural lead-in to additional content.
  </b-card-text>
  <b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>

<!-- b-card-text-variants.vue -->

背景與邊框變異

卡片包括自己的變異樣式，可快速透過屬性 bg-variant 及 border-variant 變更卡片的背景顏色和邊框樣式。較深的實心變異可能需要設定屬性 text-variant 來調整文字顏色。

實心

<div>
  <div>
    <b-card-group deck>
      <b-card bg-variant="primary" text-variant="white" header="Primary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="secondary" text-variant="white" header="Secondary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="success" text-variant="white" header="Success" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="info" text-variant="white" header="Info" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="warning" text-variant="white" header="Warning" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="danger" text-variant="white" header="Danger" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="dark" header="Dark" text-variant="white" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card header="Default" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-variants.vue -->

有邊框的

<div>
  <div>
    <b-card-group deck>
      <b-card
        border-variant="primary"
        header="Primary"
        header-bg-variant="primary"
        header-text-variant="white"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="secondary"
        header="Secondary"
        header-border-variant="secondary"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="success" header="Success" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card border-variant="info" header="Info" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="warning"
        header="Warning"
        header-bg-variant="transparent"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="danger"
        header="Danger"
        header-border-variant="danger"
        header-text-variant="danger"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck class="mb-3">
      <b-card border-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="dark" header="Dark" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-border-variants.vue -->

變異到類別對應

BootstrapVue <b-card> 變異直接對應到 Bootstrap v4 卡片類別，在上述變異名稱前面附加 bg- (實心) 或 border- (有邊框)。

您也可以透過 header-bg-variant、header-border-variant、header-text-variant、footer-bg-variant、footer-border-variant 及 footer-text-variant 等屬性，將實心和有邊框的變異個別套用到卡片標題與頁尾。

<div>
  <b-card
    header="Card Header"
    header-text-variant="white"
    header-tag="header"
    header-bg-variant="dark"
    footer="Card Footer"
    footer-tag="footer"
    footer-bg-variant="success"
    footer-border-variant="dark"
    title="Title"
    style="max-width: 20rem;"
  >
    <b-card-text>Header and footers variants.</b-card-text>
  </b-card>
</div>

<!-- b-card-header-footer-variant.vue -->

傳達輔助技術的涵義

使用顏色來增加涵義僅提供視覺指示，不會傳達給輔助技術的使用者，例如：螢幕閱讀器。請確定以顏色表示的資訊從內容本身（例如：可見文字）即可明顯看出，或透過其他方式包含在內，例如：使用 .sr-only 類別隱藏的其他文字。

輕鬆將 <b-nav> 整合到卡片標題中。

使用 header 插槽:

<div>
  <b-card title="Card Title" body-class="text-center" header-tag="nav">
    <template #header>
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </template>

    <b-card-text>
      With supporting text below as a natural lead-in to additional content.
    </b-card-text>

    <b-button variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- card-with-nav-header-slot.vue -->

使用 <b-card-header> 子組成元件

<div>
  <b-card no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-title>Card Title</b-card-title>

      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- card-with-nav-header-component.vue -->

有關在卡片標題中使用 <b-nav> 的更多資訊，請參閱 導覽文件。

卡片群組

除了為卡片中的內容設定樣式外，BootstrapVue 還包含一個 <b-card-group> 元件，用於配置一系列卡片的配置。目前，這些配置選項還沒有回應式。

預設卡片群組

使用卡片群組將卡片顯示為單一的附加元件，其寬度和高度的欄位相等。卡片群組使用 display: flex; 來達成其大小一致的效果。

在卡片群組中使用頁尾時，它們的內容將自動排列。

<div>
  <b-card-group>
    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group.vue -->

卡片橫排群組

需要一系列寬度和高度相同的卡片，但彼此沒有連接？請使用 deck 屬性設定卡片橫排。如同一般卡片群組，橫排中的卡片頁尾也會自動對齊。

<div>
  <b-card-group deck>
    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-deck.vue -->

卡片欄位群組

卡片可以包覆在設定為有 columns 屬性的 <b-card-group> 中，並以類似 Masonry 的方式組織為欄位。卡片是使用 CSS 欄位屬性來建立，而非彈性框線，以便於對齊。卡片會從上到下、從左到右排列。

請注意！使用卡片欄位時，其效果可能有所不同。為防止卡片跨欄位斷裂，我們必須設定它們為 display: inline-block，因為 column-break-inside: avoid 尚未成為完美的解決方案。

<div>
  <b-card-group columns>
    <b-card
      title="Card title that wraps to a new line"
      img-src="https://placekitten.com/g/400/450"
      img-alt="Image"
      img-top
    >
      <b-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.
      </b-card-text>
    </b-card>

    <b-card header="Quote">
      <blockquote class="blockquote mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card bg-variant="primary" text-variant="white">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
        </footer>
      </blockquote>
    </b-card>

    <b-card>
      <b-card-title>Title</b-card-title>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card img-src="https://picsum.photos/400/400/?image=41" img-alt="Image" overlay></b-card>

    <b-card img-src="https://picsum.photos/400/200/?image=41" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Footer Text</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-columns.vue -->

元件參考

<b-card>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
(按一下依序排列)
類型
(按一下依序排列)
預設值
描述
align
字串卡片內容的文字對齊方式：'left'、'center' 或 'right'
bg-variant
字串將 Bootstrap 主題色彩變體套用至背景
body-bg-variant
字串將 Bootstrap 主題色彩變體套用至內文背景
body-border-variant
字串將 Bootstrap 主題色彩變體套用至內文邊框
body-class
陣列 或 物件 或 字串套用至內文的 CSS 類別 (或類別)
body-tag
字串div指定要呈現的 HTML 標記，而非主體的預設標記
body-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到主體文字中
border-variant
字串將其中一個 Bootstrap 主題顏色變數套用到邊框中
footer
字串要放置在頁尾的文字內容
footer-bg-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾背景中
footer-border-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾邊框中
footer-class
陣列 或 物件 或 字串要套用至頁尾的 CSS 類（或類別）
footer-html
請謹慎使用 		字串要放置在頁尾中的 HTML 字串內容
footer-tag
字串div指定要呈現的 HTML 標記，而非頁尾的預設標記
footer-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾文字中
header
字串要放置在標題中的文字內容
header-bg-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題背景中
header-border-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題邊框中
header-class
陣列 或 物件 或 字串要套用至標題的 CSS 類（或類別）
header-html
請謹慎使用 		字串要放置在標題中的 HTML 字串內容
header-tag
字串div指定要呈現的 HTML 標記，而非標題的預設標記
header-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題文字中
img-alt
字串要設定影像屬性「alt」的值
img-bottom
布林值false設定是否影像應顯示在卡片底部
img-end
布林值false設定是否影像應顯示在卡片末端（右）
img-height
Number 或 String要在影像的「height」屬性中設定的值
img-left
布林值false設定是否影像應顯示在卡片開頭（左）「left」屬性的同義字
img-right
布林值false設定是否影像應顯示在卡片末端（右）「right」屬性的同義字
img-src
字串選用影像的網址
img-start
布林值false設定是否影像應顯示在卡片開頭（左）
img-top
布林值false設定是否影像應顯示在卡片頂部
img-width
Number 或 String要在影像的「width」屬性中設定的值
no-body
布林值false停用呈現預設的內部 card-body 元素
overlay
布林值false設定時，將在影像（如果有影像的話）上覆蓋卡片主體
sub-title
字串要放置在副標題中的文字內容
sub-title-tag
字串'h6'指定要呈現為副標題的 HTML 標籤，取代預設標籤
子標題文字變形
字串'muted'為子標題文字套用其中一個 Bootstrap 主題色彩變形
標籤
字串div指定要呈現為標籤的 HTML 標籤，取代預設標籤
文字變形
字串為文字套用其中一個 Bootstrap 主題色彩變形
標題
字串要置於標題中的文字內容
標題標籤
字串'h4'指定要呈現為標題的 HTML 標籤，取代預設標籤

注意：支援 HTML 字串 (*-html) 的道具傳遞使用者提供的原始值時，可能會受到跨網站指令碼 (XSS) 攻擊 的威脅。您必須先妥善清除使用者輸入！

插槽

名稱
描述
預設 要置於卡片中的內容
footer 用於自訂呈現頁尾內容
header 用於自訂呈現標頭內容

<b-card-header>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
header
字串要放置在標題中的文字內容
header-bg-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題背景中
header-border-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題邊框中
header-class
陣列 或 物件 或 字串要套用至標題的 CSS 類（或類別）
header-html
請謹慎使用 		字串要放置在標題中的 HTML 字串內容
header-tag
字串div指定要呈現的 HTML 標記，而非標題的預設標記
header-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到標題文字中

注意：支援 HTML 字串 (*-html) 的道具傳遞使用者提供的原始值時，可能會受到跨網站指令碼 (XSS) 攻擊 的威脅。您必須先妥善清除使用者輸入！

插槽

名稱
描述
預設 要置於卡片標頭中的內容
功能性元件
檢視原始碼

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
footer
字串要放置在頁尾的文字內容
footer-bg-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾背景中
footer-border-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾邊框中
footer-class
陣列 或 物件 或 字串要套用至頁尾的 CSS 類（或類別）
footer-html
請謹慎使用 		字串要放置在頁尾中的 HTML 字串內容
footer-tag
字串div指定要呈現的 HTML 標記，而非頁尾的預設標記
footer-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到頁尾文字中

注意：支援 HTML 字串 (*-html) 的道具傳遞使用者提供的原始值時，可能會受到跨網站指令碼 (XSS) 攻擊 的威脅。您必須先妥善清除使用者輸入！

名稱
描述
預設 要置於卡片頁尾中的內容

<b-card-body>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
(按一下依序排列)
類型
(按一下依序排列)
預設值
描述
body-bg-variant
字串將 Bootstrap 主題色彩變體套用至內文背景
body-border-variant
字串將 Bootstrap 主題色彩變體套用至內文邊框
body-class
陣列 或 物件 或 字串套用至內文的 CSS 類別 (或類別)
body-tag
字串div指定要呈現的 HTML 標記，而非主體的預設標記
body-text-variant
字串將其中一個 Bootstrap 主題顏色變數套用到主體文字中
overlay
布林值false設定時，將在影像（如果有影像的話）上覆蓋卡片主體
sub-title
字串要放置在副標題中的文字內容
sub-title-tag
字串'h6'指定要呈現為副標題的 HTML 標籤，取代預設標籤
子標題文字變形
字串'muted'為子標題文字套用其中一個 Bootstrap 主題色彩變形
標題
字串要置於標題中的文字內容
標題標籤
字串'h4'指定要呈現為標題的 HTML 標籤，取代預設標籤

區段

名稱
描述
預設 放置在卡片主體的內容

<b-card-title>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
標題
字串要置於標題中的文字內容
標題標籤
字串'h4'指定要呈現為標題的 HTML 標籤，取代預設標籤

段落

名稱
描述
預設 放置在卡片標題的內容

<b-card-sub-title>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
sub-title
字串要放置在副標題中的文字內容
sub-title-tag
字串'h6'指定要呈現為副標題的 HTML 標籤，取代預設標籤
子標題文字變形
字串'muted'為子標題文字套用其中一個 Bootstrap 主題色彩變形

段落

名稱
描述
預設 放置在卡片附標題的內容

<b-card-img>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
(按一下依序排列)
類型
(按一下依序排列)
預設值
描述
alt
字串`alt` 屬性的值
bottom
布林值false設定圖片是否放置在卡片底部
end
布林值false設定圖片是否放置在卡片末端 (右側)
height
Number 或 String要在影像的「height」屬性中設定的值
left
布林值false設定圖片是否放置在卡片開頭 (左側)。與 'left' 屬性的同義詞
right
布林值false設定圖片是否放置在卡片末端 (右側)。與 'right' 屬性的同義詞
src
字串`src` 屬性的 URL
start
布林值false設定圖片是否放置在卡片開頭 (左側)
top
布林值false設定圖片是否放置在卡片頂部
width
Number 或 String要在影像的「width」屬性中設定的值

<b-card-img-lazy>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
(按一下依序排列)
類型
(按一下依序排列)
預設值
描述
blank-height
Number 或 String佔位圖形「高度」屬性的值
blank-src
字串null佔位圖形的 URL。如果未設定，會使用 SVG 佔位圖形佔位符號
blank-width
Number 或 String佔位圖形「寬度」屬性的值
bottom
布林值false設定圖片是否放置在卡片底部
end
布林值false設定圖片是否放置在卡片末端 (右側)
left
布林值false設定圖片是否放置在卡片開頭 (左側)。與 'left' 屬性的同義詞
offset
Number 或 String360圖像在載入前距離視窗邊緣的像素數目
right
布林值false設定圖片是否放置在卡片末端 (右側)。與 'right' 屬性的同義詞
show
布林值false如果設定為 true，將強制顯示透過「src」屬性指定的圖片
start
布林值false設定圖片是否放置在卡片開頭 (左側)
top
布林值false設定圖片是否放置在卡片頂部

<b-card-text>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
text-tag
字串'p'指定要呈現在文字內容中預設標籤之外的 HTML 標籤

插槽

名稱
描述
預設 放在卡片文字中的內容

<b-card-group>

功能性元件
檢視原始碼

屬性

所有屬性的預設值皆可透過 全局設定。

屬性
類型
預設值
描述
columns
布林值false設定後，以類似石砌的列狀樣式呈現卡片組
deck
布林值false設定後，以卡片之間有溝槽的方式呈現卡片組
標籤
字串div指定要呈現為標籤的 HTML 標籤，取代預設標籤

插槽

名稱
描述
預設 放在卡片組中的內容（卡片）

匯入個別元件

你可以透過以下有標籤的匯出，將個別元件匯入到你的專案中

元件
有標籤的匯出
匯入路徑
<b-card>BCardbootstrap-vue
<b-card-header>BCardHeaderbootstrap-vue
<b-card-footer>BCardFooterbootstrap-vue
<b-card-body>BCardBodybootstrap-vue
<b-card-title>BCardTitlebootstrap-vue
<b-card-sub-title>BCardSubTitlebootstrap-vue
<b-card-img>BCardImgbootstrap-vue
<b-card-img-lazy>BCardImgLazybootstrap-vue
<b-card-text>BCardTextbootstrap-vue
<b-card-group>BCardGroupbootstrap-vue

範例

import { BCard } from 'bootstrap-vue'
Vue.component('b-card', BCard)

作為 Vue.js 外掛匯入

這個外掛包含上述全部列出的個別元件. 外掛元件也包括任何元件別名。

有標籤的匯出
匯入路徑
CardPluginbootstrap-vue

範例

import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)