bootstrap实现7款不同风格响应式自适应价格套餐对比效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：bootstrap实现7款不同风格响应式自适应价格套餐对比效果代码

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

<!doctype html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Modern - Bootstrap 4 Pricing Tables</title>
    <!-- Google Font -->
    <style>
        /* latin-ext */
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 400;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 400;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 300;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 300;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      src: url(//repo.bfw.wiki/bfwrepo/fonts/Lato/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    </style>
    <!-- Font Awesome -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <!-- Page style -->
    <style>
        /* ======= GENERAL  ======= */

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #3C4857;
}

a {
    color: #9c27b0;
    text-decoration: none;
}

a:hover {
    color: #9c27b0;
    text-decoration: underline;
}

p {
    color: #3C4857;
}

.header {
    padding: 15px 0;
}

h1,
.h1 {
    font-size: 3.8em;
    line-height: 1.15em;
}

h2,
.h2 {
    font-size: 2.6em;
}

h3,
.h3 {
    font-size: 1.825em;
    line-height: 1.4em;
    margin: 10px 0 10px;
}

h4,
.h4 {
    font-size: 1.3em;
    line-height: 1.55em;
}

h5,
.h5 {
    font-size: 1.25em;
    line-height: 1.55em;
    margin-bottom: 30px;
}

h6,
.h6 {
    font-size: 1.0em;
    text-transform: uppercase;
    font-weight: 700;
}
    </style>
    <!-- Ricing style -->
    <style>
        /* This css file is to over write bootstarp css
    ---------------------------------------------------------------------- */
    /*
    Theme Name: Modern - Bootstrap Pricing Tables
    Theme URI: http://adamthemes.com/
    Author: AdamThemes
    Author URI: http://adamthemes.com/
    Description: Modern - Bootstrap Pricing Tables by AdamThemes
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: pricing, table, css3, modern, adamthemes, bootstrap
    *---------------------------------------------------------------------- */
    
    
    /*---------------------------------------------------------------------- /
    Table of Contents 
    ------------------------------------------------------------------------ /
    // . Sections
    // . Block Pricing  
    // . Block Table Color
    // . Pricing Buttons
    // . Bootstrap col-md-12 class
    // . FontAwesome fa class
    // . Bootstrap tab-space class
    
    ------------------------------------------------------------------------ /
    Table of Contents End
    ------------------------------------------------------------------------*/
    
    
    /* ======= SECTIONS  ======= */
    .section-pricing {
        z-index: 3;
        position: relative;
    }
    
    .section-gray {
        background: #E5E5E5;
    }
    
    /* ======= BLOCK PRICING ======= */
    
    .block {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-bottom: 30px;
        border-radius: 6px;
        color: rgba(0, 0, 0, 0.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    
    .block-caption {
        font-weight: 700;
        font-family: "Lato", "Times New Roman", serif;
        color: #3C4857;
    }
    
    .block-plain {
        background: transparent;
        box-shadow: none;
    }
    
    .block .category:not([class*="text-"]) {
        color: #3C4857;
    }
    
    .block-background {
        background-position: center center;
        background-size: cover;
        text-align: center;
    }
    
    .block-raised {
        box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
.........完整代码请登录后点击上方下载按钮下载查看