11个漂亮实⽤的Bootstrap定价表⽰例样式
翻译 | 杨⼩⼆
定价表在很多电⼦商务⽹站上，都是⾮常重要的⾓⾊，在之前，我也跟⼤家分享过关于定价表的样式，《》。
这次，我翻译分享的这些都是采⽤Bootstrap实现的，希望这些案例可以给你⼀些启发，对你的⼯作与学习带来⼀些便捷。
下⾯就是⽰例分享，均有源码，如果没有贴源码的，也都分享codepen的链接地址，你都可以在⾥⾯查看实现源码。
Bootstrap 5.0定价表
如果你不熟悉Bootstrap签出Top 3 CSS Framework，请简要了解如何添加CDN以及使⽤⾃定义类属性值。
01、Bootstrap 5.0定价表-⽰例1
这是⼀个简单的价格表，可以悬停，放⼤卡，遮盖⽤户的区域并更改按钮颜⾊。
代码如下：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="cdn.jsdelivr/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0x
<title>Bootstrap 5.0 Pricing Table</title>
<style>
.card {
border:none;
padding: 10px 50px;
}
.card::after {
position: absolute;
z-index: -1;
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.
card:hover {
transform: scale(1.02, 1.02);
-webkit-transform: scale(1.02, 1.02);
backface-visibility: hidden;
will-change: transform;
box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important;
}
.card:hover::after {
opacity: 1;
}
.card:hover .btn-outline-primary{
color:white;
background:#007bff;
}
</style>
</head>
<body>
<div class="container-fluid" >
<div class="container p-5">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card h-100 shadow-lg">
<div class="card-body">
<div class="text-center p-3">
<h5 class="card-title">Basic</h5>
<small>Individual</small>
<br><br>
<span class="h2">$8</span>/month
<br><br>
</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div>
<ul class="list-group list-group-flush">
<ul class="list-group list-group-flush">
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Cras justo odio</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Dapibus ac facilisis in</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Vestibulum at eros</li>
</ul>
<div class="card-body text-center">
<button class="btn btn-outline-primary btn-lg" >Select</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4">
<div class="card h-100 shadow-lg">
<div class="card-body">
<div class="text-center p-3">
<h5 class="card-title">Standard</h5>
<small>Small Business</small>
<br><br>
<span class="h2">$20</span>/month
<br><br>
</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Cras justo odio</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Dapibus ac facilisis in</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Vestibulum at eros</li>
</ul>
<div class="card-body text-center">
<button class="btn btn-outline-primary btn-lg" >Select</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4">
<div class="card h-100 shadow-lg">
<div class="card-body">
<div class="text-center p-3">
<h5 class="card-title">Premium</h5>
<small>Large Companies</small>
<br><br>
<span class="h2">$40</span>/month
<br><br>
</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Cras justo odio</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Dapibus ac facilisis in</li>
<li class="list-group-item"><svg xmlns="/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 </svg> Vestibulum at eros</li>
</svg> Vestibulum at eros</li>
</ul>
<div class="card-body text-center">
<button class="btn btn-outline-primary btn-lg" >Select</button>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="cdn.jsdelivr/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t
</body>
</html>
02、Bootstrap 5.0定价表-⽰例2
此价格设计具有悬停卡翻转功能，样式效果也⾮常不错。
样式代码如下：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="cdn.jsdelivr/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0x <title>Bootstrap 5.0 Pricing Table</title>
<style>
.header {
.header {
background:#00C9FF;
}
.bi {
color:#00C9FF;
}
.price {
color:white;
font-size: 150px;
font-weight: 800;
padding-top:-80% !important;
}
/
* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the .flip-card {
background-color: transparent;
width: auto;
height: auto;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
box shadow怎么设置width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #00C9FF;
color: white;
height: auto;
padding:50px 0px;
}
/* Style the back side */
.flip-card-back {
background-color: white;
color: black;
transform: rotateY(180deg);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论