📅 最后修改于: 2023-12-03 14:46:59.080000 🧑 作者: Mango
React-Bootstrap 是一个针对 React 框架的 Bootstrap 组件库，提供了许多UI组件供开发者使用，其中卡片（Card）是React-Bootstrap中的一个重要组件。卡片通常用来展示图片、文字、按钮、链接等内容。
卡片（Card）
import Card from 'react-bootstrap/Card';
该组件需要依赖 react-bootstrap 组件库。
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://via.placeholder.com/400x150" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
上面的代码展示了一个基本的卡片组件，包含了图片（Card.Img）、标题（Card.Title）、文本（Card.Text）和按钮（Button）等元素。
React-Bootstrap 提供了不同类型的卡片，比如：带有边框的卡片、带有阴影的卡片、可旋转的卡片等。下面展示若干种不同类型的卡片组件。
<Card border="primary" style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://via.placeholder.com/400x150" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card bg="secondary" text="white" style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://via.placeholder.com/400x150" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Rotating Card</Card.Title>
<div className="text-center">
<div className="card-wrapper">
<div
className="card-rotating effect__click"
data-toggle="modal"
data-target="#modalLoginAvatar"
>
<div className="face front">
<Card.Img
variant="top"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"
alt="Avatar"
/>
<div className="card-up">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
>
<path
fill="#ffffff"
d="M14.094 5.766c-.191-1.414-1.078-2.11-2.591-2.098-1.797.016-2.981 1.383-2.856 3.437.031.528.052 1.058.05 1.588.002.084-.04.145-.148.127-1.563-.205-3.189.334-4.585 1.636-.973.825-1.478 1.827-1.518 3.053-.07 1.774.118 3.536.514 5.267.13.526.773.313.633-.208-.4-1.597-.585-3.228-.494-4.858.092-1.631.718-3.12 1.704-4.354C4.418 6.409 6.066 5.786 7.796 5.787c1.672 0 3.344.24 5.016-.007.501-.058.624-.275.51-.741zm-3.225 7.97c-.909 0-1.819-.01-2.729.003-.287.003-.466-.165-.409-.433.248-1.047.48-2.097.728-3.144.1-.42.063-.563-.34-.56-1.032.012-2.064.032-3.096.024-.258-.003-.418.144-.359.383.249 1.021.514 2.04.77 3.058.104.4.247.51.657.507.53-.005 1.059-.012 1.589-.016.22 0 .376.094.414.318.097.727.223 1.452.336 2.179.03.202-.062.344-.257.338z"
/>
</svg>
<p>Web Developer</p>
</div>
<div className="card-body text-center">
<h4 className="card-title">
Maria Doe <br />
<small>Graphic Designer</small>
</h4>
<hr />
<p className="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Delectus, vero, obcaecati, aut, porro vitae cupiditate
placeat facere quia voluptatibus accusantium ducimus
corporis veniam.
</p>
<Link to="#" className="btn btn-primary">
Contact
</Link>
</div>
</div>
<div className="face back">
<div className="card-body text-center mt-4">
<h4 className="card-title">Maria Doe</h4>
<p className="card-text">
Email: maria@gmail.com
<br />
Phone: +48 123 456 789
</p>
<ul className="list-inline">
<li className="list-inline-item">
<Link to="#" className="text-muted">
<i className="fab fa-facebook-f" />
</Link>
</li>
<li className="list-inline-item">
<Link to="#" className="text-muted">
<i className="fab fa-twitter" />
</Link>
</li>
<li className="list-inline-item">
<Link to="#" className="text-muted">
<i className="fab fa-instagram" />
</Link>
</li>
<li className="list-inline-item">
<Link to="#" className="text-muted">
<i className="fab fa-google-plus-g" />
</Link>
</li>
</ul>
<hr />
<Button block>Close</Button>
</div>
</div>
</div>
</div>
</div>
</Card.Body>
</Card>
卡片组件的常用属性：
bg: 卡片的背景颜色border: 卡片的边框颜色text: 卡片中文本的颜色variant: 图片的样式，可选值为 top 和 bottom