bootstrap实现自适应价格套餐对比代码

代码语言:html

所属分类:布局界面

代码描述:bootstrap实现自适应价格套餐对比代码

代码标签: bootstrap 自适应 价格 套餐 对比

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <!-- Google fonts -->
    <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Exo+2:300,300italic,400,400italic' rel='stylesheet' type='text/css'>
    <!-- Icomoon -->
    <style>
      .container,.container-fluid,.container *,.container-fluid * {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
.container:before,.container-fluid:before,.container:before,.container-fluid:before,.container:after,.container-fluid:after,.container:after,.container-fluid:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
.row:before,.row:after {
	content:" ";
	display:table
}
.row:after {
	clear:both
}
.pricing-table {
	position:relative;
	font-family:Audiowide,cursive;
	color:#fff;
	font-size:14px;
	line-height:1.5;
	background-color:rgba(241,165,192,.5);
	padding-bottom:25px;
	margin-bottom:55px;
	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	transition:all .3s ease-out
}
.pricing-table.active {
	background-color:rgba(241,165,192,.3)
}
@media (min-width:1200px) {
	.pricing-table.active {
	top:-20px
}
}@media (min-width:1200px) {
	.pricing-table.active .pt-header {
	padding-top:50px
}
}@media (min-width:1200px) {
	.pricing-table.active .pt-title {
	top:-10px
}
}.pricing-table.active .pt-footer .pt-button {
	background-color:rgba(238,143,177,.3)
}
.pricing-table.active .pt-footer .pt-button:hover,.pricing-table.active .pt-footer .pt-button:focus {
	background-color:rgba(231,99,146,.15)
}
.pricing-table.active .pt-footer .pt-button:active {
	background-color:rgba(231,99,146,.25)
}
.pricing-table:hover {
	-webkit-transform:translateY(-10px);
	-moz-transform:translateY(-10px);
	-o-transform:translateY(-10px);
	-ms-transform:translateY(-10px);
	transform:translateY(-10px)
}
.pt-header {
	position:relative;
	padding:30px 0;
	background-color:rgba(238,143,177,.1)
}
.pt-title {
	position:relative;
	font-size:24px;
	text-align:center;
	margin:0;
	color:#fff;
	text-transform:normal
}
.ribbon-wrapper {
	position:absolute;
	top:-10px;
	right:-10px;
	width:130px;
	height:130px;
	overflow:hidden
}
.ribbon-wrapper .ribbon {
	position:relative;
	top:22px;
	left:0;
	width:180px;
	height:40px;
	line-height:40px;
	background-color:rgba(241,165,192,.8);
	text-align:center;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg)
}
.ribbon-wrapper .ribbon:before {
	content:'';
	display:block;
	position:absolute;
	top:30px;
	left:1px;
	width:0;
	height:0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border:10px solid transparent;
	border-bottom-color:rgba(241,165,192,.5)
}
.ribbon-wrapper .ribbon:after {
	content:'';
	display:block;
	position:absolute;
	z-index:-1;
	top:30px;
	left:156px;
	width:0;
	height:0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border:10px solid transparent;
	border-left-color:rgba(241,165,192,.5)
}
.pt-price {
	position:relative;
	width:120px;
	height:120px;
	margin:20px auto;
	-webkit-border-radius:50%;
	-webkit-background-clip:padding-box;
	-moz-border-radius:50%;
	-moz-background-clip:padding;
	border-radius:50%;
	background-clip:padding-box;
	background-color:transparent;
	border:2px solid #fff;
	text-align:center;
	z-index:1
}
.pt-price:after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
	zoom:1;
	filter:alpha(opacity=50);
	-webkit-opacity:.5;
	-moz-opacity:.5;
	opacity:.5;
	-webkit-border-radius:50%;
	-webkit-background-clip:padding-box;
	-moz-border-radius:50%;
	-moz-background-clip:padding;
	border-radius:50%;
	background-clip:padding-box;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-o-transition:all .2s ease;
	transition:all .2s ease
}
.pt-price:hover:after {
	zoom:1;
	filter:alpha(opacity=0);
	-webkit-opacity:0;
	-moz-opacity:0;
	opacity:0;
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);
	transform:scale(1.2)
}
.pt-price .price {
	font-size:32px;
	line-height:120px
}
.pt-price .price .decimal-points {
	position:relative;
	top:-8px;
	font-size:22px
}
.pt-body {
	font-family:'Exo 2',sans-serif;
	font-size:16px;
	padding:0 20px;
	margin-bottom:30px
}
.pt-row {
	position:relative;
	text-align:center;
	padding:16px 0;
	border-bottom:1px solid rgba(255,255,255,.3);
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-o-transition:all .2s ease;
	transition:all .2s ease
}
.pt-row span[class^=icon-] {
	margin-right:4px;
	font-size:12px
}
.pt-row:before {
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:0;
	background-color:rgba(255,255,255,.2);
	-webkit-transition:height .2s ease;
	-moz-transition:height .2s ease;
	-o-transition:height .2s ease;
	transition:height .2s ease
}
.pt-row:hover:before {
	height:100%
}
.pt-footer {
	position:absolute;
	left:0;
	bottom:-25px;
	width:100%;
	padding:0 20px
}
.pt-footer .pt-button {
	font-size:16px;
	text-transform:uppercase;
	text-align:center;
	color:#fff;
	text-decoration:none;
	display:block;
	width:100%;
	height:50px;
	line-height:50px;
	background-color:rgba(238,143,177,.5);
	border:1px solid rgba(255,255,255,.75);
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease
}
.pt-footer .pt-button:hover,.pt-footer .pt-button:focus {
	background-color:rgba(231,99,146,.35);
	border-color:rgba(255,255,255,.5)
}
.pt-footer .pt-button:active {
	background-color:rgba(231,99,146,.45)
}
.pt-footer .pt-button:focus {
	outline:0
}
.pricing-table.oobabe {
	background-color:rgba(0,186,190,.5)
}
.pricing-table.oobabe.active {
	background-color:rgba(0,186,190,.3)
}
.pricing-table.oobabe.active .pt-footer .pt-button {
	background-color:rgba(0,161,165,.3)
}
.pricing-table.oobabe.active .pt-footer .pt-button:hover,.pricing-table.oobabe.active .pt-footer .pt-button:focus {
	background-color:rgba(0,111,114,.15)
}
.pricing-table.oobabe.active .pt-footer .pt-button:active {
	background-color:rgba(0,111,114,.25)
}
.oobabe .pt-header {
	background-color:rgba(0,161,165,.1)
}
.oobabe .ribbon-wrapper .ribbon {
	background-color:rgba(0,186,190,.8)
}
.oobabe .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(0,186,190,.5)
}
.oobabe .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(0,186,190,.5)
}
.oobabe .pt-footer .pt-button {
	background-color:rgba(0,161,165,.5)
}
.oobabe .pt-footer .pt-button:hover,.oobabe .pt-footer .pt-button:focus {
	background-color:rgba(0,111,114,.35)
}
.oobabe .pt-footer .pt-button:active {
	background-color:rgba(0,111,114,.45)
}
.pricing-table.codedo {
	background-color:rgba(192,222,208,.5)
}
.pricing-table.codedo.active {
	background-color:rgba(192,222,208,.3)
}
.pricing-table.codedo.active .pt-footer .pt-button {
	background-color:rgba(175,213,196,.3)
}
.pricing-table.codedo.active .pt-footer .pt-button:hover,.pricing-table.codedo.active .pt-footer .pt-button:focus {
	background-color:rgba(142,196,171,.15)
}
.pricing-table.codedo.active .pt-footer .pt-button:active {
	background-color:rgba(142,196,171,.25)
}
.codedo .pt-header {
	background-color:rgba(175,213,196,.1)
}
.codedo .ribbon-wrapper .ribbon {
	background-color:rgba(192,222,208,.8)
}
.codedo .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(192,222,208,.5)
}
.codedo .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(192,222,208,.5)
}
.codedo .pt-footer .pt-button {
	background-color:rgba(175,213,196,.5)
}
.codedo .pt-footer .pt-button:hover,.codedo .pt-footer .pt-button:focus {
	background-color:rgba(142,196,171,.35)
}
.codedo .pt-footer .pt-button:active {
	background-color:rgba(142,196,171,.45)
}
.pricing-table.faceoo {
	background-color:rgba(250,206,0,.5)
}
.pricing-table.faceoo.active {
	background-color:rgba(250,206,0,.3)
}
.pricing-table.faceoo.active .pt-footer .pt-button {
	background-color:rgba(225,185,0,.3)
}
.pricing-table.faceoo.active .pt-footer .pt-button:hover,.pricing-table.faceoo.active .pt-footer .pt-button:focus {
	background-color:rgba(174,143,0,.15)
}
.pricing-table.faceoo.active .pt-footer .pt-button:active {
	background-color:rgba(174,143,0,.25)
}
.faceoo .pt-header {
	background-color:rgba(225,185,0,.1)
}
.faceoo .ribbon-wrapper .ribbon {
	background-color:rgba(250,206,0,.8)
}
.faceoo .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(250,206,0,.5)
}
.faceoo .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(250,206,0,.5)
}
.faceoo .pt-footer .pt-button {
	background-color:rgba(225,185,0,.5)
}
.faceoo .pt-footer .pt-button:hover,.faceoo .pt-footer .pt-button:focus {
	background-color:rgba(174,143,0,.35)
}
.faceoo .pt-footer .pt-button:active {
	background-color:rgba(174,143,0,.45)
}
.pricing-table.dad666 {
	background-color:rgba(102,109,173,.5)
}
.pricing-table.dad666.active {
	background-color:rgba(102,109,173,.3)
}
.pricing-table.dad666.active .pt-footer .pt-button {
	background-color:rgba(87,94,162,.3)
}
.pricing-table.dad666.active .pt-footer .pt-button:hover,.pricing-table.dad666.active .pt-footer .pt-button:focus {
	background-color:rgba(69,75,129,.15)
}
.pricing-table.dad666.active .pt-footer .pt-button:active {
	background-color:rgba(69,75,129,.25)
}
.dad666 .pt-header {
	background-color:rgba(87,94,162,.1)
}
.dad666 .ribbon-wrapper .ribbon {
	background-color:rgba(102,109,173,.8)
}
.dad666 .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(102,109,173,.5)
}
.dad666 .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(102,109,173,.5)
}
.dad666 .pt-footer .pt-button {
	background-color:rgba(87,94,162,.5)
}
.dad666 .pt-footer .pt-button:hover,.dad666 .pt-footer .pt-button:focus {
	background-color:rgba(69,75,129,.35)
}
.dad666 .pt-footer .pt-button:active {
	background-color:rgba(69,75,129,.45)
}
.pricing-table.fffibo {
	background-color:rgba(255,241,176,.5)
}
.pricing-table.fffibo.active {
	background-color:rgba(255,241,176,.3)
}
.pricing-table.fffibo.active .pt-footer .pt-button {
	background-color:rgba(255,236,150,.3)
}
.pricing-table.fffibo.active .pt-footer .pt-button:hover,.pricing-table.fffibo.active .pt-footer .pt-button:focus {
	background-color:rgba(255,227,99,.15)
}
.pricing-table.fffibo.active .pt-footer .pt-button:active {
	background-color:rgba(255,227,99,.25)
}
.fffibo .pt-header {
	background-color:rgba(255,236,150,.1)
}
.fffibo .ribbon-wrapper .ribbon {
	background-color:rgba(255,241,176,.8)
}
.fffibo .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(255,241,176,.5)
}
.fffibo .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(255,241,176,.5)
}
.fffibo .pt-footer .pt-button {
	background-color:rgba(255,236,150,.5)
}
.fffibo .pt-footer .pt-button:hover,.fffibo .pt-footer .pt-button:focus {
	background-color:rgba(255,227,99,.35)
}
.fffibo .pt-footer .pt-button:active {
	background-color:rgba(255,227,99,.45)
}
.pricing-table.fe6969 {
	background-color:rgba(254,105,105,.5)
}
.pricing-table.fe6969.active {
	background-color:rgba(254,105,105,.3)
}
.pricing-table.fe6969.active .pt-footer .pt-button {
	background-color:rgba(254,80,80,.3)
}
.pricing-table.fe6969.active .pt-footer .pt-button:hover,.pricing-table.fe6969.active .pt-footer .pt-button:focus {
	background-color:rgba(253,29,29,.15)
}
.pricing-table.fe6969.active .pt-footer .pt-button:active {
	background-color:rgba(253,29,29,.25)
}
.fe6969 .pt-header {
	background-color:rgba(254,80,80,.1)
}
.fe6969 .ribbon-wrapper .ribbon {
	background-color:rgba(254,105,105,.8)
}
.fe6969 .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(254,105,105,.5)
}
.fe6969 .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(254,105,105,.5)
}
.fe6969 .pt-footer .pt-button {
	background-color:rgba(254,80,80,.5)
}
.fe6969 .pt-footer .pt-button:hover,.fe6969 .pt-footer .pt-button:focus {
	background-color:rgba(253,29,29,.35)
}
.fe6969 .pt-footer .pt-button:active {
	background-color:rgba(253,29,29,.45)
}
.pricing-table.ofaded {
	background-color:rgba(15,173,237,.5)
}
.pricing-table.ofaded.active {
	background-color:rgba(15,173,237,.3)
}
.pricing-table.ofaded.active .pt-footer .pt-button {
	background-color:rgba(13,155,213,.3)
}
.pricing-table.ofaded.active .pt-footer .pt-button:hover,.pricing-table.ofaded.active .pt-footer .pt-button:focus {
	background-color:rgba(10,120,165,.15)
}
.pricing-table.ofaded.active .pt-footer .pt-button:active {
	background-color:rgba(10,120,165,.25)
}
.ofaded .pt-header {
	background-color:rgba(13,155,213,.1)
}
.ofaded .ribbon-wrapper .ribbon {
	background-color:rgba(15,173,237,.8)
}
.ofaded .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(15,173,237,.5)
}
.ofaded .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(15,173,237,.5)
}
.ofaded .pt-footer .pt-button {
	background-color:rgba(13,155,213,.5)
}
.ofaded .pt-footer .pt-button:hover,.ofaded .pt-footer .pt-button:focus {
	background-color:rgba(10,120,165,.35)
}
.ofaded .pt-footer .pt-button:active {
	background-color:rgba(10,120,165,.45)
}
.pricing-table.oodeaf {
	background-color:rgba(0,222,175,.5)
}
.pricing-table.oodeaf.active {
	background-color:rgba(0,222,175,.3)
}
.pricing-table.oodeaf.active .pt-footer .pt-button {
	background-color:rgba(0,197,155,.3)
}
.pricing-table.oodeaf.active .pt-footer .pt-button:hover,.pricing-table.oodeaf.active .pt-footer .pt-button:focus {
	background-color:rgba(0,146,115,.15)
}
.pricing-table.oodeaf.active .pt-footer .pt-button:active {
	background-color:rgba(0,146,115,.25)
}
.oodeaf .pt-header {
	background-color:rgba(0,197,155,.1)
}
.oodeaf .ribbon-wrapper .ribbon {
	background-color:rgba(0,222,175,.8)
}
.oodeaf .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(0,222,175,.5)
}
.oodeaf .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(0,222,175,.5)
}
.oodeaf .pt-footer .pt-button {
	background-color:rgba(0,197,155,.5)
}
.oodeaf .pt-footer .pt-button:hover,.oodeaf .pt-footer .pt-button:focus {
	background-color:rgba(0,146,115,.35)
}
.oodeaf .pt-footer .pt-button:active {
	background-color:rgba(0,146,115,.45)
}
.pricing-table.ebesee {
	background-color:rgba(235,229,238,.5)
}
.pricing-table.ebesee.active {
	background-color:rgba(235,229,238,.3)
}
.pricing-table.ebesee.active .pt-footer .pt-button {
	background-color:rgba(223,214,228,.3)
}
.pricing-table.ebesee.active .pt-footer .pt-button:hover,.pricing-table.ebesee.active .pt-footer .pt-button:focus {
	background-color:rgba(199,183,208,.15)
}
.pricing-table.ebesee.active .pt-footer .pt-button:active {
	background-color:rgba(199,183,208,.25)
}
.ebesee .pt-header {
	background-color:rgba(223,214,228,.1)
}
.ebesee .ribbon-wrapper .ribbon {
	background-color:rgba(235,229,238,.8)
}
.ebesee .ribbon-wrapper .ribbon:before {
	border-bottom-color:rgba(235,229,238,.5)
}
.ebesee .ribbon-wrapper .ribbon:after {
	border-left-color:rgba(235,229,238,.5)
}
.ebesee .pt-footer .pt-button {
	background-color:rgba(223,214,228,.5)
}
.ebesee .pt-footer .pt-button:hover,.ebesee .pt-footer .pt-button:focus {
	background-color:rgba(199,183,208,.35)
}
.ebesee .pt-footer .pt-button:active {
	background-color:rgba(199,183,208,.45)
}

    </style>
</head>

<body>
    <div class="container">
        
        <div class="row">
            <div class="col-sm-12">
                <h3 class="columns-header">4 columns</h3>
            </div>
        </div>
        <!-- end .row -->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="pricing-table fe6969">
                    <div class="pt-header">
                        <h3 class="pt-title">Bronze</h3>
                    </div>
                    <div class="pt-price"><span class="price">$0<span class="decimal-points">.00</span></span>
                    </div>
                    <div class="pt-body">
                        <div class="pt-row"><span class="icon-checkmark3"></span>Unlimited access</div>
                        <div class="pt-row"><span class="icon-close2"></span>New courses weekly</div>
                        <div class="pt-row"><span class="icon-close2"></span>Subscriber benefits</div>
                        <div class="pt-row"><span class="icon-close2"></span>No advertising</div>
                    </div>
                    <!-- end .pt-body -->
                    <div class="pt-footer"><button type="button" class="pt-button">Subscribe now</button></div>
                </div>
                <!-- end .pricing-table -->
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="pricing-table fe6969">
                    <div class="pt-header">
                        <h3 class="pt-title">Gold</h3>
                    </div>
                    <div class="pt-price"><span class="price">$9<span class="decimal-points">.99</span></span>
                    </div>
                    <div class="pt-body">
                        <div class="pt-row"><span class="icon-checkmark3"></span>Unlimited access</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>New courses weekly</div>
                        <div class="pt-row"><span class="icon-close2"></span>Subscriber benefits</div>
                        <div class="pt-row"><span class="icon-close2"></span>No advertising</div>
                    </div>
                    <!-- end .pt-body -->
                    <div class="pt-footer"><button type="button" class="pt-button">Subscribe now</button></div>
                </div>
                <!-- end .pricing-table -->
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="pricing-table fe6969 active">
                    <div class="pt-header">
                        <h3 class="pt-title">Platinum</h3>
                        <div class="ribbon-wrapper">
                            <div class="ribbon">Best value</div>
                        </div>
                    </div>
                    <div class="pt-price"><span class="price">$19<span class="decimal-points">.99</span></span>
                    </div>
                    <div class="pt-body">
                        <div class="pt-row"><span class="icon-checkmark3"></span>Unlimited access</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>New courses weekly</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>Subscriber benefits</div>
                        <div class="pt-row"><span class="icon-close2"></span>No advertising</div>
                    </div>
                    <!-- end .pt-body -->
                    <div class="pt-footer"><button type="button" class="pt-button">Subscribe now</button></div>
                </div>
                <!-- end .pricing-table -->
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="pricing-table fe6969">
                    <div class="pt-header">
                        <h3 class="pt-title">Diamond</h3>
                    </div>
                    <div class="pt-price"><span class="price">$69<span class="decimal-points">.99</span></span>
                    </div>
                    <div class="pt-body">
                        <div class="pt-row"><span class="icon-checkmark3"></span>Unlimited access</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>New courses weekly</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>Subscriber benefits</div>
                        <div class="pt-row"><span class="icon-checkmark3"></span>No advertising</div>
                    </div>
                    <!-- end .pt-body -->
                    <div class="pt-footer"><button type="button" class="pt-button">Subscribe now</button></div>
                </div>
                <!-- end .pricing-table -->
            </div>
        </div>
        <!-- end .row -->
        <div class="row">
            <div class="col-sm-12">
                <h3 class="columns-header">3 columns</h3>
            </div>
        </div>
        <!-- end .row -->
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="pricing-table fe6969">
                    <div class="pt-header">
                        <h3 class="pt-title">Bronze</h3>
                    </div>
                    <div class=&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0