报告问题编辑此页

卡片

卡片是一种灵活且可扩展的内容容器。它包括标题和页脚选项、各种内容、上下文背景颜色和强大的显示选项。

概述

卡片构建时尽可能少用标记和样式，但仍能提供大量控制和自定义。使用 flexbox 构建，它们提供简单的对齐方式，并且与其他组件很好地融合。

<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> 上设置属性 no-body 禁用自动 <b-card-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 -->

图片

<b-card> 属性 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> 上的 no-gutters 属性删除行网格槽，并在 <b-col> 上使用 md 属性，使卡片在 md 断点处水平排列。类 rounded-0 删除 <b-card-img> 角的圆角，而 <b-card> 上的类 overflow-hidden 将根据卡片的边框半径适当剪切图像的角。可能需要根据卡片内容进行进一步调整。

<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> 变体通过在上述变体名称前加上 bg-（对于纯色）或 border-（对于带边框）直接映射到 Bootstrap v4 卡片类。

您还可以通过 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 列属性而不是 flexbox 构建，以便于对齐。卡片的顺序从上到下，从左到右。

注意！卡片列的显示效果可能因情况而异。为了防止卡片跨列显示，我们必须将它们设置为 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
Array 或 Object 或 String应用于正文的 CSS 类（或类）
body-tag
字符串'div'指定要呈现的 HTML 标签，以替代正文的默认标签
body-text-variant
字符串将 Bootstrap 主题颜色变体之一应用于正文文本
border-variant
字符串将 Bootstrap 主题颜色变体之一应用于边框
footer
字符串要放置在页脚中的文本内容
footer-bg-variant
字符串将 Bootstrap 主题颜色变体之一应用于页脚背景
footer-border-variant
字符串将 Bootstrap 主题颜色变体之一应用于页脚边框
footer-class
Array 或 Object 或 String应用于页脚的 CSS 类（或类）
footer-html
谨慎使用 		字符串要放置在页脚中的 HTML 字符串内容
footer-tag
字符串'div'指定要呈现的 HTML 标签，以替代页脚的默认标签
footer-text-variant
字符串将 Bootstrap 主题颜色变体之一应用于页脚文本
header
字符串要放置在页眉中的文本内容
header-bg-variant
字符串将 Bootstrap 主题颜色变体之一应用于页眉背景
header-border-variant
字符串将其中一个 Bootstrap 主题颜色变体应用于标题边框
header-class
Array 或 Object 或 String应用于标题的 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
字符串可选图像的 URL
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 标签，而不是副标题的默认标签
sub-title-text-variant
字符串'muted'将其中一个 Bootstrap 主题颜色变体应用于副标题文本
tag
字符串'div'指定要渲染的 HTML 标签，而不是默认标签
text-variant
字符串将其中一个 Bootstrap 主题颜色变体应用于文本
title
字符串要放置在标题中的文本内容
title-tag
字符串'h4'指定要渲染的 HTML 标签，而不是标题的默认标签

注意：支持 HTML 字符串 (*-html) 的属性在传递原始用户提供的值时容易受到 跨站脚本 (XSS) 攻击 。您必须先正确 清理 用户输入！

插槽

名称
说明
默认 放置在卡片中的内容
footer 用于自定义渲染页脚内容
header 用于自定义渲染页眉内容

<b-card-header>

功能组件
查看源代码

属性

所有属性默认值均可 全局配置。

属性
类型
默认值
说明
header
字符串要放置在页眉中的文本内容
header-bg-variant
字符串将 Bootstrap 主题颜色变体之一应用于页眉背景
header-border-variant
字符串将其中一个 Bootstrap 主题颜色变体应用于标题边框
header-class
Array 或 Object 或 String应用于标题的 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
Array 或 Object 或 String应用于页脚的 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
Array 或 Object 或 String应用于正文的 CSS 类（或类）
body-tag
字符串'div'指定要呈现的 HTML 标签，以替代正文的默认标签
body-text-variant
字符串将 Bootstrap 主题颜色变体之一应用于正文文本
overlay
布尔值false设置后，将把卡片主体叠加在图像之上（如果卡片有图像）
sub-title
字符串要放置在副标题中的文本内容
sub-title-tag
字符串'h6'指定要渲染的 HTML 标签，而不是副标题的默认标签
sub-title-text-variant
字符串'muted'将其中一个 Bootstrap 主题颜色变体应用于副标题文本
title
字符串要放置在标题中的文本内容
title-tag
字符串'h4'指定要渲染的 HTML 标签，而不是标题的默认标签

插槽

名称
说明
默认 放置在卡片主体中的内容

<b-card-title>

功能组件
查看源代码

属性

所有属性默认值均可 全局配置。

属性
类型
默认值
说明
title
字符串要放置在标题中的文本内容
title-tag
字符串'h4'指定要渲染的 HTML 标签，而不是标题的默认标签

插槽

名称
说明
默认 放置在卡片标题中的内容

<b-card-sub-title>

功能组件
查看源代码

属性

所有属性默认值均可 全局配置。

属性
类型
默认值
说明
sub-title
字符串要放置在副标题中的文本内容
sub-title-tag
字符串'h6'指定要渲染的 HTML 标签，而不是副标题的默认标签
sub-title-text-variant
字符串'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占位符图像的“height”属性值
blank-src
字符串null占位符图像的 URL。如果未设置，将使用 SVG 占位符
blank-width
Number 或 String占位符图像的“width”属性值
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设置后，在卡片之间呈现带间隙的卡片组
tag
字符串'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)