首页 > 代码库 > BootStrap响应式表单

BootStrap响应式表单

2024-09-08 08:49:10   217人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--以移动设备为优先，user-scalable=no禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"</script>
    <script src="bootstrap/js/bootstrap.min.js"</script>
    <style type="text/css" media="screen"> 
    </style>
</head>
<body>
<div class="container" style="background: #fff";>
    <form class="form-horizontal">
    
    <div class="form-group">
       <!--表单在栅格系统中可以不加row-->
       <!--通过列的数量决定输入框的宽度-->
       <label class="col-md-2 col-xs-2 col-sm-2 text-right" for="username">账号</label>
       <div class="col-md-2 col-xs-2 col-sm-2">
          <input type="text" name="username" id="username" class="form-control">
       </div>
    </div>
    <div class="form-group">
       <label class="col-md-2 col-xs-2 col-sm-2 text-right" for="username">密码</label>
       <div class="col-md-2 col-xs-2 col-sm-2">
          <input type="password" name="pwd" id="pwd" class="form-control">
       </div>
    </div>
    </form>
</div>
</body>
</html>

技术分享

 

BootStrap响应式表单


联系
我们