卡片(Cards)

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

介绍

卡片的标记和样式尽可能少，但是仍然可以提供大量的控制和自定义功能。内置flexbox，它们易于对准并与其他组件混合良好组件。

<b-card> 没有固定的开始宽度，因此它们自然会填充其父元素的整个宽度。您可以通过样式或标准的Bootstrap v4尺寸设置类轻松地对其进行自定义。

通过 tag 属性指定，将默认的 div 根标签更改为任何其他HTML元素。

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<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> 支持的示例

卡片主体

<b-card> 的构建块是 <b-card-body> 部分，它提供了卡片内的填充部分。

默认情况下， <b-card> 内容自动放置在 <b-card-body> 节中：

这是 <b-card-body> 组件的默认 <b-card> >块中的一些内容。请注意，卡片的边框和此灰色 <div>之间的填充。

<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> 上设置 no-body 属性禁用自动 <b-card-body> 部分（和相关的填充）。

这是一些没有默认 <b-card-body> 部分的内容。请注意，卡片的边框和此灰色 <div>之间没有填充。

<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>

请注意，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标记样式化。

通过将 .card-link 类添加到 <a> 标签（或 <b-link>组件）中，可以添加链接并将它们放在一起。

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

A second paragraph of text in the card.

Card link Another 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> 属性 img-src 将图像放置在卡的顶部，并使用 img-alt 属性指定要在图像 alt 属性中放置的字符串。由 img-src 道具指定的图像将响应并在更改卡的宽度时调整其宽度。

或者，您可以 <b-card> 使用子组件手动将图像放置在内部 <b-card-img> 。有关用法，请参见下面的厨房水槽示例。

Top and Bottom

Some quick example text to build on the card and make up the bulk of the card's content.

Left and Right (or Start and End)

Some quick example text to build on the card and make up the bulk of the card's content.

<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>

注意： 对于左边和右边的图像，您可能需要对 .card-img-left 和 .card-img-right类应用额外的样式，因为如果您的内容比图像高，图像将在高度上“拉伸”。注意:当图像左对齐或右对齐时，不支持页眉和页脚。您可能会发现，在创建响应式水平卡片布局时，水平卡片布局示例更加灵活。

叠加图像

通过设置布尔属性值（叠加） overlay，将图像置于卡片的背景中：

Image Overlay

Subtitle

Some quick example text to build on the card and make up the bulk of the card's content.

<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-img-lazy> 子组件在图像滚动到视图中时延迟加载图像。 <b-card-img-lazy> 支持与 <b-card-img> 相同的属性以及 <b-img-lazy> 组件的许多属性。

页眉和页脚

通过页眉/页脚属性或命名的插槽在卡中添加可选的 header/footer 。您可以通过设置 header-tag 和 footer-tag 属性来控制使用的包装器元素标签（默认均为 div ）

featured

Title

Header and footers using props.

Go somewhere

Header Slot

Title

Header and footers using slots.

Go somewhere

<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 v-slot: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 v-slot:footer>
        <em>Footer Slot</em>
      </template>
    </b-card>
  </b-card-group>
</div>

厨房水槽示例

混合和匹配多种内容类型来创建您需要的卡片，或者将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组—所有这些都包装在固定宽度的卡片中。

Hello World

Card Title

Card Sub Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

Card link Another link

This is a footer

<div>
  <b-card
    no-body
    style="max-width: 20rem;"
    img-src="https://placekitten.com/380/200"
    img-alt="Image"
    img-top
  >
    <template v-slot: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>

水平卡片布局

使用网格（grid）组件、实用程序类和单个卡片子组件的组合，可以使卡片以便于移动和响应的方式水平放置。

在下面的示例中，我们使用 <b-row> 上的 no-gutters 属性删除行网格装订线，并使用 <b-col> 上的 md 属性将卡片水平放置在 md 断点处。rounded-0 类将除去 <b-card-img> 的圆角，而 <b-card> 上的 overflow-hidden 将根据卡片的 border-radius 适当地裁剪图像的角。根据您的卡片内容，可能需要进一步调整。

Horizontal Card

This is a wider card with supporting text as a natural lead-in to additional content. This content is a little bit longer.

<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" 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>

文本变量

默认情况下，卡片使用深色文字并采用浅色背景。您可以通过 text-variant属性切换文本以及卡的子组件的颜色来反转颜色。然后，指定深色背景变体。

Card Title

With supporting text below as a natural lead-in to additional content.

Go somewhere

<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>

背景和边框变量

卡片包含自己的变量样式，可通过 bg-variant 和 border-variant 属性快速更改背景颜色以及卡片的颜色。较暗的实体变量我需要设置 text-variant 属性来调整文本颜色。