boostrap复杂表单

• 之前写bootstrap表单的时候，发现bootstrap官网只有水平表单和垂直表单，竟然没有复杂表单的一个模板，实在鸡肋，这里通过代号 ../  的同事改良，完成了boostrap复杂表单。 
• 效果图如下：

• 结合bootstrapValidator使用的验证效果如下：

• 表单主要通过bootstrap的栅格系统进行排列，不改写bootstrap自带的样式，引入的文件包括bootstrap.css、
• bootstrapValidator.css，并添加样式

  show-grid 和 m0 

<style type="text/css">
/*引入 bootstrap.css、bootstrapValidator.css*/
.show-grid {
    margin-bottom: 15px;
}
.m0 {
    margin: 0!important;
}
</style>

• HTML代码如下：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">基本信息</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" action="javascript:;" id="paperForm">
            <div class="form-group">
                <label for="topic" class="col-sm-2 control-label">论文题目:</label>
                <div class="col-sm-10">
                    <input name="topic" type="text" class="form-control" id="topic"
　　　　　　　　　　　　　　　　 placeholder="请输入论文题目">
                </div>
            </div>
            <div class="form-inline row show-grid">
                <div class="m0 form-group col-sm-6">
                    <div class="row">
                        <label for="type" class="col-sm-4 control-label">论文类型:</label>
                        <div class="col-sm-8">
                            <select style="width: 100%" name="type" 
　　　　　　　　　　　　　　　　　　　　　　　　class="form-control" id="type">
                                ......
                            </select>
                        </div>
                    </div>
                </div>
                <div class="m0 form-group col-sm-6">
                    <div class="row">
                        <label for="correspondingTemp" class="col-sm-4 control-label">
　　　　　　　　　　　　　　　　　　　　通讯作者:</label>
                        <div class="col-sm-8">
                            <input style="width: 100%" name="correspondingTemp" 
　　　　　　　　　　　　　　　　　　　　　type="text" class="form-control" id="correspondingTemp"
　　　　　　　　　　　　　　　　　　　　　placeholder="点击选择通讯作者" readonly="readonly">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-inline row show-grid">
                <div class="m0 form-group col-sm-6">
                    <div class="row">
                        <label for="firstPersonTemp" class="col-sm-4 control-label">
　　　　　　　　　　　　　　　　　　　第一作者:</label>
                        <div class="col-sm-8">
                            <input style="width: 100%" name="firstPersonTemp" type="text" 
　　　　　　　　　　　　　　　　　　　　　class="form-control" id="firstPersonTemp"
 　　　　　　　　　　　　　　　　　　　　 placeholder="点击选择第一作者">
                        </div>
                    </div>
                </div>

                <div class="m0 form-group col-sm-6">
                    <div class="row">
                        <label for="publishTime" class="col-sm-4 control-label">
　　　　　　　　　　　　　　　　　　　　　　发表时间:</label>
                        <div class="col-sm-8">
                            <input style="width: 100%" name="publishTime" type="text"
　　　　　　　　　　　　　　　　　　　　  class="form-control" id="publishTime"
　　　　　　　　　　　　　　　　　　readonly="readonly" value="${paper?.publishTime}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">
　　　　　　　　　　　　<span class="glyphicon glyphicon-asterisk"></span>刊物类型:</label>
                <div class="col-sm-10">
                    <div class="checkbox-inline">
                        <input name="publicationType" type="checkbox">
                        <label style="font-weight: normal;"></label>
                    </div>
                    ......
                </div>
            </div>
        </form>
    </div>
</div>