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

bootstrap的form表单控件的事例

时间:2014-12-13 09:37:22      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:bootstrap的form表单控件的事   bootstrap   bootstrap开发   bootstrap的form表单开发   

<html lang="en">
<head>
    <title>form</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="../file/jquery.js" type="text/javascript"></script>
    <link href="../book/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入您的用户名!" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" placeholder="请输入您的密码!" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">专业:</label>
            <div class="col-sm-10">
                <label class="checkbox-inline">
                   <input type="checkbox" value="体育" name="zhuangye" />体育
                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" value="音乐" name="zhuangye" />音乐
                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" value="数学" name="zhuangye" />数学
                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" value="计算机" name="zhuangye" />计算机
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">爱好的运动:</label>
            <div class="col-sm-10">
                <select multiple="multiple">
                   <option>篮球</option>
                   <option>足球</option>
                   <option>跑步</option>
                   <option>跳高</option>
                   <option>跳远</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别:</label>
            <div class="col-sm-10">
                <input type="radio" name="sex" checked="checked" value="男"/>男&nbsp;
                <input type="radio" name="sex" checked="checked" value="女" />女
            </div>
        </div>
        <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                 <label><input type="checkbox" />是否爱听音乐</label>
              </div>
           </div>
        </div>
        <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
              <input type="button" class="btn btn-default" value="注册" />
           </div>
        </div>
   </form>
</body>
</html>

效果图:

bubuko.com,布布扣

 


bootstrap的form表单控件的事例

标签:bootstrap的form表单控件的事   bootstrap   bootstrap开发   bootstrap的form表单开发   

原文地址:http://blog.csdn.net/y_f123/article/details/41907487

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