码迷,mamicode.com
首页 > 其他好文 > 详细

BootStrap响应式表单

时间:2017-03-12 19:20:32      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:doctype   span   密码   ref   char   input   缩放   png   images   

<!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响应式表单

标签:doctype   span   密码   ref   char   input   缩放   png   images   

原文地址:http://www.cnblogs.com/juansilence/p/6538785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!