AdminLTE Form结构小结

常用的Form结构有两种，一种是垂直布局的Form，一种是水平布局的Form.

垂直布局

默认布局，表单的label和其对应的input各占一行。

<!--一般form都嵌套在box中，将.box-body和.box-footer包起来，这里省略了最外层的div.box和body之上的div.box-header-->
<form role="form">
    <!--role="form"语义化属性，for浏览器和搜索引擎。-->
    <div class="box-body">
        <!--每一组label及input都用div.form-group包起来-->
        <div class="form-group">
            <label for="exampleInputEmail1">Email</label>
            <!--input要加上.form-control，还可设置大小，如input-lg,input-sm等，可加上disabled属性-->
            <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email" disabled>
        </div>
        <!--文件上传，不是很好看，还是使用bootstrap fileinput控件好-->
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
    </div>
    <!--更多div.form-group-->
    <div class="box-footer">
        <!--提交按钮放在了div.box-footer中-->
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

可添加.has-success,.has-warning,.has-error等用于突出显示

<!--可添加.has-success,.has-warning,.has-error等用于突出显示-->
<div class="form-group has-success">
    <label class="control-label" for="inputSuccess">
        <i class="fa fa-check"></i> Input</label>
    <input type="text" class="form-control" id="inputSuccess" placeholder="Enter ...">
    <span class="help-block">Help block with success</span>
</div>

如果只有input，没有label时，可以不用div.form-group

<!--只有input，没有label时，可以不用div.form-group-->
<input class="form-control input-lg" type="text" placeholder=".input-lg">

input-group用于给input增加前缀和/或后缀,.input-group-lg和.input-group-sm用于设置input-group的大小。

<!--input-group用于给input增加前缀和/或后缀-->
<div class="input-group">
    <!--input-group-addon前缀，可使用图标-->
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
    <!--input-group-addon后缀，可使用图标-->
    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
</div>

带下拉按钮div.input-group-btn的input-group

<!--input-group-lg用于给input-group设置大小，还有.input-group-sm-->
<div class="input-group input-group-lg">
    <!--带下拉按钮的input-group-->
    <div class="input-group-btn">
        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="fa fa-caret-down"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control">
</div>

带普通按钮的input

<!--带普通按钮的input-->   
<div class="input-group input-group-sm">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-info btn-flat">Go!</button>
    </span>
</div>

select，checkbox，radio

<!--select-->
<div class="form-group">
    <label>Select</label>
    <select class="form-control">
        <option>option 1</option>
        <option>option 2</option>
    </select>
</div>
<!--input checkbox和radio的结构差不多-->
<div class="form-group">
    <div class="checkbox">
        <label>
            <input type="checkbox">Checkbox 1
        </label>
    </div>
    <div class="checkbox">
        <label>
            <!--设置checkbox状态为disabled-->
            <input type="checkbox" disabled="">Checkbox disabled
        </label>
    </div>
</div>
</div>

水平布局

label和input在同一行的布局形式。其中.form-horizontal很关键，涉及到form的布局，不添加的话，label的文本不会‘右对齐’，且div.form-group之间没有间隔。

1. label要设置.col--类。
2. input要用div.col--类包裹。

<!--.form-horizontal很关键，涉及到布局，不添加的话，label的文本不会‘右对齐’，且div.form-group之间没有间隔-->
<form class="form-horizontal">
    <div class="box-body">
        <div class="form-group">
            <!--lable可使用.col-sm-*等方法设置宽度-->
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <!--input要在其外包装一个div.col-sm-*来设置宽度-->
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>

        <div class="form-group">
            <!--可使用.col-sm-offset-*，对input的相对位置进行调整-->
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
    </div><!-- /.box-body -->
    <div class="box-footer">
        <!--操作按钮放在了div.box-footer中-->
        <button type="submit" class="btn btn-default">Cancel</button>
        <button type="submit" class="btn btn-info pull-right">Sign in</button>
    </div><!-- /.box-footer -->
</form>