bootstrap+jquery实现移动端手机端选择金额充值表单效果代码-html代码-BFW代码库

bootstrap+jquery实现移动端手机端选择金额充值表单效果代码

代码语言：html

代码描述：bootstrap+jquery实现移动端手机端选择金额充值表单效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        *{
      margin:0;padding:0
    }
    ol,ul{
      list-style: none;
    }
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14{
      float:none;
    }
    .mask{
      background:#f0eff5;
      position:fixed;
      top:0;
      bottom:0;
      left:0;
      right:0;
      z-index:-1;
    }
    .h1{padding-top:50px}
    .container{
      width:90%;
      margin:0 auto;
      background:#fff;
      margin-top:5%;
    }
    .container_logo{
      background:#fbfbfb
    }
    .play{
      margin:0 auto;
      padding:10px 0px;
    }
    .play img{
      width:80%;
      display:block;
      margin:0 auto;
    }
    .number_amount{
      position:relative;
      height:42px;
    }
    .number_amount label{
      position:absolute;
      top:50%;
      margin-top:-18px;
      font-size:24px;
      left:0;
    }
    .play input[type="number"]{
      width:100%;
      height:100%;
      font-size:24px;
      border:none;
      border-bottom:1px solid #eee;
      outline: none;
      padding:0 30px;
    }
    .quick_amount{
      margin:0 auto;
      padding:0;
    }
    .quick_amount p{
      display:inline-block;
      text-align:center;
      font-size:16px;
      line-height:40px;
      border:dashed 1px #eee;
      color:#888;
      margin:10px 3.3%;
    }
    .quick_amount p.active{
      border:#337ab7 1px solid;
      color:#337ab7;
      border-radius:2px;
    }
    ._submit{
      margin:30px auto;
    }
    .submit-amount{
      width:100%;
    }
    /* .getId{
      display:none;
    } */
    </style>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="container_logo">
                <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <img src="//repo.bfw.wiki/bfwrepo/icon/5dfc717cd7564.png" />
                </div>
            </div>
        </div>
        <form action="" method="post">
            <div class="row">
                <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <div class="form-group">
                        <input type="hidden" class="getId" name="id">
                        <h4>充值金额</h4>
                        <div class="number_amount">
                            <label>￥</label>
                            <input type="number" name="amount">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="quick_amount col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='100'>100</p>
                    <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='200'>200</p>
                    <p class="col-xs-3.........完整代码请登录后点击上方下载按钮下载查看