代码拉取完成,页面将自动刷新
Responsive React Product Cards built with the latest Bootstrap 5. Card grid usage, eCommerce product cards, product card listing deck, card with reviews and more.
Check out React Product Cards Documentation for detailed instructions & even more examples.
import React from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCardTitle,
MDBIcon,
} from "mdb-react-ui-kit";
function App() {
return (
<MDBContainer fluid className="my-5">
<MDBRow className="justify-content-center">
<MDBCol md="6">
<MDBCard className="text-black">
<MDBIcon fab icon="apple" size="lg" className="px-3 pt-3 pb-2" />
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/3.webp"
position="top"
alt="Apple Computer"
/>
<MDBCardBody>
<div className="text-center">
<MDBCardTitle>Believing is seeing</MDBCardTitle>
<p className="text-muted mb-4">Apple pro display XDR</p>
</div>
<div>
<div className="d-flex justify-content-between">
<span>Pro Display XDR</span>
<span>$5,999</span>
</div>
<div className="d-flex justify-content-between">
<span>Pro stand</span>
<span>$999</span>
</div>
<div className="d-flex justify-content-between">
<span>Vesa Mount Adapter</span>
<span>$199</span>
</div>
</div>
<div className="d-flex justify-content-between total font-weight-bold mt-4">
<span>Total</span>
<span>$7,197.00</span>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
export default App;
body {
background-color: #eee;
}
Download MDB 5 - free REACT UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
You can find other examples here.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。