bootstrap实现自适应价格套餐对比代码-html代码-BFW代码库

代码语言：html

代码描述：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:sca.........完整代码请登录后点击上方下载按钮下载查看