bootstrap实现自适应价格套餐对比代码
代码语言: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: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