Cards 卡片 - bootstrap react

pencil 27天前 20

Bootstrap的 Cards 组件提供了一个灵活的、可扩展的内容容器,其中包含多种变体和选项。
内容类型
身体 body
使用<Card.Body>在<Card>中填充内容。
Title, text, and links    标题、文本和链接
在<Card.Body>中使用<Card.Title>、<Card.Subtitle>和<Card.Text>可以很好地排列它们。<Card.Link>s用于排列相邻的链接。
<Card.Text>输出内容周围的<p>标记,因此可以使用多个<Card.Text>来创建单独的段落
List Groups 列出组
在具有刷新列表组的卡中创建内容列表
Header and Footer
您可以通过添加<Card.header>组件来添加标题。<CardHeader>可以通过<as>属性传递heading元素来设置样式
Images 图片
卡片包括一些处理图像的选项。可以选择在卡片的两端附加“图像封顶”,将图像与卡片内容叠加,或者简单地将图像嵌入卡片中。
Image caps

与页眉和页脚类似,卡片可以包括顶部和底部的“图像帽”——卡片顶部或底部的图像
Image Overlays
将图像转换为卡片背景并覆盖卡片的文本。根据图像的不同,您可能需要也可能不需要其他样式或实用程序。
导航
使用React引导程序的Nav组件向卡头(或块)添加一些导航。

卡片样式
背景色
你可以通过改变卡片的<bg>和<text>道具来改变卡片的外观。
Border Color



卡片布局
卡片组
Card Deck 甲板
Card Columns 列


API
Card
Card.Body
Card.Img
Card.ImgOverlay
CardDeck
CardGroup
CardColumns

最新回复 (0)
返回
发新帖