Bootstrap常见表单demo

一.居中的输入框

代码：

 1 <div class="container">
 2             <div class="row">
 3                 <div class="col-xs-offset-2 col-xs-8">
 4                     <form class="form-horizontal">
 5                         <div class="form-group has-feedback">
 6                             <label for="input1" class="col-sm-3 control-label">请输入公司或组织名称</label>
 7                             <div class="col-sm-6">
 8                                 <input type="text" class="form-control" id="input1" placeholder="Email">
 9                                 <span class="glyphicon form-control-feedback"></span>
10                             </div>
11                             <div class="col-sm-3">
12                                 <span class="help-block" id="heleBlock1"></span>
13                             </div>
14                         </div>
15                         <div class="form-group has-feedback">
16                             <label for="input2" class="col-sm-3 control-label">请输入邮箱地址</label>
17                             <div class="col-sm-6">
18                                 <input type="text" class="form-control" id="input2" placeholder="Email">
19                                 <span class="glyphicon form-control-feedback"></span>
20                             </div>
21                             <div class="col-sm-3">
22                                 <span class="help-block" id="heleBlock2"></span>
23                             </div>
24                         </div>
25                         <div class="form-group has-feedback">
26                             <label for="input3" class="col-sm-3 control-label">请输入密码</label>
27                             <div class="col-sm-6">
28                                 <input type="text" class="form-control" id="input3" placeholder="Email">
29                                 <span class="glyphicon form-control-feedback"></span>
30                             </div>
31                             <div class="col-sm-3">
32                                 <span class="help-block" id="heleBlock3"></span>
33                             </div>
34                         </div>
35 
36                         <div class="form-group">
37                             <label for="input4" class="col-sm-3 control-label">请再次输入密码</label>
38                             <div class="col-sm-6">
39                                 <input type="password" class="form-control" id="input4" placeholder="Password">
40                             </div>
41                             <div class="col-sm-3">
42                                 <span class="help-block" id="heleBlock4"></span>
43                             </div>
44                         </div>
45                         <div class="form-group">
46                             <div class="col-sm-offset-3 col-sm-9">
47                                 <div class="checkbox">
48                                     <label>
49                                         <input type="checkbox"> 已阅读 <a href=""><<条例>></a>
50                                     </label>
51                                 </div>
52                             </div>
53                         </div>
54                         <div class="form-group">
55                             <div class="col-sm-offset-3 col-sm-9">
56                                 <button type="submit" class="btn btn-default">取&nbsp;&nbsp;消</button>
57                                 <button type="submit" class="btn btn-success btn-next">下一步</button>
58                             </div>
59                         </div>
60                     </form>
61                 </div>
62             </div>
63 </div>
居中的输入框demo

效果图：

 

二.行内输入框

代码：

 1 <form class="form-horizontal text-left">
 2                         <div class="form-group has-feedback">
 3                             <label for="input11" class="col-xs-3 col-md-2 control-label">用户名:</label>
 4                             <div class="col-xs-12 col-md-9">
 5                                 <div class="col-md-8 c-xs-12">
 6                                     <input type="text" class="form-control " id="input11" placeholder="用户名输入规则">
 7                                     <span class="glyphicon  form-control-feedback"></span>
 8                                 </div>
 9                                 <span id="helpBlock11"></span>
10                             </div>
11                         </div>
12                     </form>
行内输入框

效果图：

三.上下结构输入框

代码：

<div class="form-group has-feedback">
                        <label class="control-label">用户名:</label>
                        <!--指定 date标记-->
                        <input type='text' class="form-control" id="form1"/>
                        <span class="glyphicon  form-control-feedback"></span>
                        <span id="helpBlockup" class="help-block">用户名输入规则:最少6位.</span>
                    </div>

　　

posted @ 2017-04-11 20:04  二四八月时晴偶雨  阅读(934)  评论(0)    收藏  举报