bootstrap中各类表单的应用
2017-07-06 21:11
127 查看
一.bs中常用表单样式
.form-control——将单独的表单控件赋予一些全局样式,如默认宽度width:100%;
.form-group——包裹表单控件,获得最好的排列;
.form-inline——将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时;
.form-horizontal——可以将label标签和控件组水平并排布局;
![](https://img-blog.csdn.net/20170706211435241?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTY1OTA5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<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 class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
![](https://img-blog.csdn.net/20170706211631091?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTY1OTA5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170706211759216?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTY1OTA5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
二.不常见表单样式
.sr-only——将label标签隐藏;
.help-block——用于设置提示文本;
.radio-inline、.checkbox-inline——将相应控件水平排列;
.form-control-static——将p元素设置为静态控件;
.has-error、.has-warning、has-success——分别对应校验状态;
.has-feedback——为控件添加辅助图标(与图标引用类联合使用);
.input-lg——创建大一些的表单控件;
.input-sm——创建小一些的表单控件;
.input-lg/.input-sm的应用
![](https://img-blog.csdn.net/20170706221235568?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTY1OTA5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<div class="widget-body">
<div class="widget-main">
<input type="text" id="spinner1" />
<div class="space-6"></div>
.form-control——将单独的表单控件赋予一些全局样式,如默认宽度width:100%;
.form-group——包裹表单控件,获得最好的排列;
.form-inline——将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时;
.form-horizontal——可以将label标签和控件组水平并排布局;
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<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 class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
二.不常见表单样式
.sr-only——将label标签隐藏;
.help-block——用于设置提示文本;
.radio-inline、.checkbox-inline——将相应控件水平排列;
.form-control-static——将p元素设置为静态控件;
.has-error、.has-warning、has-success——分别对应校验状态;
.has-feedback——为控件添加辅助图标(与图标引用类联合使用);
.input-lg——创建大一些的表单控件;
.input-sm——创建小一些的表单控件;
.input-lg/.input-sm的应用
<div class="widget-body">
<div class="widget-main">
<input type="text" id="spinner1" />
<div class="space-6"></div>
<input type="text" class="input-sm" id="spinner2" /> <div class="space-6"></div> <input type="text" id="spinner3" /> <div class="space-6"></div> <input type="text" class="input-lg" id="spinner4" /> </div> </div>
相关文章推荐
- html中bootstrap表单内元素的各类属性简析
- bootstrap导航栏、下拉菜单、表单的简单应用实例解析
- 贴一个自定义的 symfony 的表单皮肤 应用bootstrap效果
- bootstrap导航栏、下拉菜单、表单的简单应用
- InfoPath 2007表单应用
- 各类session监听器的应用
- Struts的动态表单的应用
- 初探jquery――表单应用范例
- Struts的动态表单的应用
- Struts的动态表单的应用
- [ InfoPath应用场景:库存管理 ] 在InfoPath Form Service利用WSS Web Service技术,通过VSTA代码把复杂表单写入SharePoint列表数据库 (二)
- jquery表单应用
- Java模拟POST表单操作 HttpClient的应用及注意事项
- js常见表单应用技巧
- Ajax在用户注册表单和用户登录表单方面应用 [转帖]
- 基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)
- java 模拟 POST表单操作 HTTPCLIENT的应用 及注意事项
- 如何把INFOPATH设计成的表单脱离开INFOPATH应用到WEB页面中
- [VB][测试技术应用]VB与IE交互实现WEB画面的自动测试(用VB填写IE中控件的内容和提交表单)
- struts中应用JS做表单验证的问题