React Bootstrap 卡片

Bootstrap 卡片是最常用的 Bootstrap 组件之一。卡片提供了一种简单的方法，使用灵活且可扩展的容器来对齐内容。卡片的设计方式使其能够以正确的方式自动对齐内容。卡片有不同的变体和选项可用。

通常，卡片用于创建网页的产品、个人资料、类别和其他有用的布局。卡片包括带有广泛的背景颜色和强大的显示选项的标题、页脚、正文选项。标题、页脚和正文选项指定了内容的位置。

如何在 React 应用程序中使用 Bootstrap 卡片？

React Bootstrap 提供了 <Cards> 组件来使用卡片容器。它还支持 <Card.Header>、<Card.Body>、<Card.Img>、<Card.ImgOverlay>、<Card.Link>、<Card.Title>、<Card.Text> 和 <Card.Group> 子组件来指定卡片内容的位置。

要使用卡片容器，请指定 <Card> </Card> 组件及其内容，并在卡片内导入它，如下所示

让我们用一个简单的例子来理解它

App.js

输出

从上面的输出中，卡片内容已正确对齐，而无需应用任何额外的 CSS 属性。

让我们了解卡片内容类型

<Card.Body>: 正文组件指定卡片中的一些内容。如果增加卡片内容，它将自动调整卡片高度。<Card.Body> 组件在 <Card></Card> 组件中使用。 考虑以下示例

或者，我们也可以使用 body 属性来指定卡片正文

<Card.Title>、<Card.Subtitle> 和 <Card.Text>: 这些组件在 <Card.Body> </Card.Body> 组件中使用。 顾名思义，它们用于定义标题（粗体和大号）、副标题（较浅和小号）和卡片文本。

考虑下面的示例

<Card.Link>: 此组件也用于 <Card.Body> 组件内。它允许我们为卡片指定导航链接。

考虑下面的示例

App.js

输出

从上面的输出中，我们可以看到所有内容都完美对齐。 嗯，这就是 Bootstrap 卡片的魅力所在。

使用卡片的列表组

卡片容器不仅限于创建产品、博客和个人资料。 即使我们也可以使用卡片创建漂亮的列表组。 让我们了解如何使用卡片创建列表组。

要使用卡片创建列表组，请在 <Card> 组件中使用 <ListGroup> 和 <Listgroup.Item> 组件。

考虑下面的示例

App.js

输出

应用卡片样式

bootstrap 卡片组件允许我们指定卡片背景和文本颜色。 我们可以使用 bg 和 text 属性选择任何可用的颜色选项。

考虑下面的示例

App.js

输出

卡片有不同的颜色变体可用。 让我们一起使用它们

App.js

输出

从上面的输出中，我们可以看到根据卡片的渲染版本，不同的背景颜色和文本颜色已应用于卡片样式。 因此，我们可以为我们的布局选择任何这些可用的卡片样式。

卡片边框颜色

我们还可以像背景和文本颜色一样，为卡片组件指定边框颜色。 要指定边框颜色，我们必须在 border 属性中传递颜色变体的值。

考虑下面的示例

输出

因此，我们可以为我们的卡片组件选择任何可用的背景、文本和边框颜色，使其更具吸引力。

卡片组

我们可以使用 <CardGroup> 组件来创建卡片的正确布局。 <Card> 组件将在 <CardGroup> 组件中使用。 卡片组组件的优点是它将卡片高度对齐相等，使其看起来统一。 考虑以下示例

App.js

输出

因此，我们可以精确地使用卡片容器来对齐内容。 这对于创建产品、个人资料、博客和其他布局部分很有用。