Bootstrap實現價格表

這篇文章主要介紹了利用Bootstrap實現漂亮簡潔的CSS3價格表效果，實現的效果非常的不錯，而且能夠使用不同的螢幕尺寸，需要的朋友可以參考學習，下面來一起看看吧。

前言

這是一款漂亮簡潔的CSS3價格表樣式，該價格表基於Bootstrap網格系統來進行布局，通過簡單的CSS3代碼來美化價格表，樣式非常的時尚漂亮，且能在不同螢幕下展示良好的效果。

先來看

查看示範 下載源碼

首先在頁面中引入bootstrap.min.css檔案，這裡我用官方的CDN資源，你也可以下載到本地使用。

<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

該css3價格表的HTML結構如下：

<p class="container">     <p class="row">         <p class="col-md-4 col-sm-6">             <p class="pricingTable">                 <h3 class="title">Standard</h3>                 <p class="price-value">                     <span class="month">per month</span>                     <span class="amount">                         <span class="currency">$</span>                         10                         <span class="value">99</span>                     </span>                 </p>                 <ul class="pricing-content">                     <li>50GB Disk Space</li>                     <li>50 Email Accounts</li>                     <li>50GB Monthly Bandwidth</li>                     <li>10 Subdomains</li>                     <li>15 Domains</li>                 </ul>                 <a href="#" class="pricingTable-signup">sign up</a>             </p>         </p>          <p class="col-md-4 col-sm-6">             <p class="pricingTable">                 <h3 class="title">Business</h3>                 <p class="price-value">                     <span class="month">per month</span>                     <span class="amount">                         <span class="currency">$</span>                         20                         <span class="value">99</span>                     </span>                 </p>                 <ul class="pricing-content">                     <li>60GB Disk Space</li>                     <li>60 Email Accounts</li>                     <li>60GB Monthly Bandwidth</li>                     <li>15 Subdomains</li>                     <li>20 Domains</li>                 </ul>                 <a href="#" class="pricingTable-signup">sign up</a>             </p>         </p>     </p> </p>

CSS3

為該價格表添加下面的CSS樣式來進行渲染和美化。

.pricingTable{     text-align: center;     background: #fff;     padding: 30px 0; } .pricingTable .title{     font-size: 22px;     font-weight: 600;     color: #2e282a;     text-transform: uppercase;     margin: 0 0 30px 0; } .pricingTable .price-value{     padding: 30px 0;     background: #ba5289;     margin-bottom: 30px;     position: relative; } .pricingTable .price-value:before{     content: "";     border-top: 15px solid #fff;     border-left: 15px solid transparent;     border-right: 15px solid transparent;     position: absolute;     top: 0;     left: 46%; } .pricingTable .month{     display: block;     height: 50px;     font-size: 15px;     font-weight: 900;     color: #fff;     text-transform: uppercase; } .pricingTable .amount{     display: inline-block;     font-size: 50px;     color: #fff;     position: relative; } .pricingTable .currency{     position: absolute;     top: -1px;     left: -35px; } .pricingTable .value{     font-size: 20px;     position: absolute;     top: -11px;     right: -27px; } .pricingTable .pricing-content{     padding: 0;     margin: 0 0 30px 0;     list-style: none; } .pricingTable .pricing-content li{     font-size: 16px;     color: #868686;     line-height: 35px; } .pricingTable .pricingTable-signup{     display: inline-block;     padding: 8px 40px;     background: #fca4a7;     font-size: 15px;     font-weight: 600;     color: #fff;     text-transform: capitalize;     border: 2px solid #fca4a7;     border-radius: 30px;     transition: all 0.5s ease 0s; } .pricingTable .pricingTable-signup:hover{     background: #fff;     color: #fca4a7; } @media only screen and (max-width: 990px){     .pricingTable{ margin-bottom: 30px; } }

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS有幾種實現三欄布局的方法

CSS與Sass開發規範