bootstrap 复杂表单水平布局多列表单漂亮表单
关键字：bootstrap 复杂表单水平布局多列表单漂亮表单表单布局bootstrap 怎么布局两列或者多列表单
目录
部分效果图： (1)
栅格说明: (2)
代码： (2)
部分效果图：
栅格说明:
Bootstrap栅格系统一行最多。
通过为表单添加.form-horizontal类，并联合使用Bootstrap 预置的栅格类，可以
将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
向父<form>元素添加class .form-horizontal。
代码：
<form class="form-horizontal formfontset"role="form">
<div class="panel panel-success">
<div class="panel-heading">
<h3class="panel-title">贷款信息</h3>
</div>
<div class="panel-body">
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">姓名:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.Name"placeholder="姓名
"class="form-control"/>
</div>
<div class="col-sm-2 control-label labelshowset">性别:</div>
<div class="col-sm-4">
<select ng-model="formModel.UserInfo.Sex"class="form-control"><option ng-repeat="x in UserI nfoSexList"value="{{x.Id}}">{{x.Name}}</option></select>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">身份证号:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.IdCard"placeholder="身份证号
"class="form-control"/>
</div>
<div class="col-sm-2 control-label labelshowset">婚姻状况:</div>
<div class="col-sm-4">
<select ng-model="formModel.UserInfo.MaritalEnum"class="form-control">
<option ng-repeat="x in UserInfoMaritalEnumList"value="{{x.Id}}">{{x.Name}}</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">固定电话:</div>
<div class="col-sm-4">
<div class="col-sm-5"><input type="text"ng-model="formModel.UserInfo. AreaCode"placeholder="区号"class="form-control"/></div>
<div class="col-sm-7"><input type="text"ng-model="formMo del.UserInfo.Telephone"placeholder="电话号码"class="form-control"/></div>
</div>
<div class="col-sm-2 control-label labelshowset">联系手机:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.MobilePhone"placeholder="联系手机
"class="form-control"/>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">QQ号码:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.QQNumber"placeholder="QQ号码
"class="form-control"/>
</div>
<div class="col-sm-2 control-label labelshowset">:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.Email"placeholder="
"class="form-control"/>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">户口类型:</div>
<div class="col-sm-4">
<select ng-model="formModel.UserInfo.AccountEnum"class="form-control">
<option ng-repeat="x in UserInfoAccountEnumList"value="{{x.Id}}">{{x.Name}}</option> </select>
</div>
<div class="col-sm-2 control-label labelshowset">学历:</div>
<div class="col-sm-4">
<select ng-model="formModel.UserInfo.EducationEnum"class="form-control">
<option ng-repeat="x in UserInfoEducationEnumList"value="{{x.Id}}">{{x.Name}}</option> </select>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">子女个数:</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.ChildNumber"placeholder="子女个数"class="form-control"/>
</div>
<div class="col-sm-2 control-label labelshowset">居住状况:</div>
<div class="col-sm-4">
<select ng-model="formModel.UserInfo.LiveEnum"class="form-control">
<option ng-repeat="x in UserInfoLiveEnumList"value="{{x.Id}}">{{x.Name}}</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-2 control-label labelshowset">现居住地址:</div>
<div class="col-sm-10">
<div class="col-sm-2">
<select ng-model="formModel.UserInfo.ProvinceId"class="form-control"ng-change="changePro vince(formModel.UserInfo.ProvinceId)">
<option ng-repeat="x in UserInfoProvinceList"value="{{x.Id}}">{{x.Name}}</option>
</select>
</div>
<div class="col-sm-2">
<select ng-model="formModel.UserInfo.CityId"class="form-control"ng-change="changeCityId( formModel.UserInfo.CityId)">
<option ng-repeat="x in UserInfoCityList"value="{{x.Id}}">{{x.Name}}</option>
</select>
</div>
<div class="col-sm-2">
<select ng-model="formModel.UserInfo.AreaId"class="form-control">
<option ng-repeat="x in UserInfoAreaList"value="{{x.Id}}">{{x.Name}}</option>
</select>
</div>
<div class="col-sm-4">
<input type="text"ng-model="formModel.UserInfo.Address"placeholder="详细地址
"class="form-control"/>
</div>
</div>
</div>
</div>
</div>
</form>
<style>
.labelshowset {
margin-left: -1em;
margin-right: -1.2em;
color: #000000;
}
.formfontset {
bootstrap 5
font-family: 宋体;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。