Bootstrap實現價格表

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

前言

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

先來看效果圖

#檢視示範下載原始碼

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

<link>

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

<p> 
    </p><p> 
        </p><p> 
            </p><p> 
                </p><h3 id="Standard">Standard</h3> 
                <p> 
                    <span>per month</span> 
                    <span> 
                        <span>$</span> 
                        10 
                        <span>99</span> 
                    </span> 
                </p> 
                

                      
• 50GB Disk Space
                      
• 50 Email Accounts
                      
• 50GB Monthly Bandwidth
                      
• 10 Subdomains
                      
• 15 Domains
                  

                  sign up                                    

              

                  

Business

                  

                      per month                                                $                          20                          99                                        

                  

                      
• 60GB Disk Space
                      
• 60 Email Accounts
                      
• 60GB Monthly Bandwidth
                      
• 15 Subdomains
                      
• 20 Domains
                  

                  sign up                               

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中文網其它相關文章！

推薦閱讀：

Bootstrap教學

########## CSS有幾種實作三欄佈局的方法###############CSS與Sass開發規格#########

以上是Bootstrap實現價格表的詳細內容。更多資訊請關注PHP中文網其他相關文章！