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.bf.........完整代码请登录后点击上方下载按钮下载查看

网友评论0