bootstrap学习(三)表单
2019-05-04 18:22
1276 查看
bootstrap学习(三)表单
基本实例:
from-group:可以是其内的标签排列更好
from-control:使标签宽度为100%
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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-inline: 其内标签水平排列
.form-inline类可使其内容左对齐并且表现为
inline-block级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
必须有label标签:如果不限让label显示。可以设置 .sr-only
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
水平排列:
通过为表单添加
.form-horizontal类,并联合使用 Bootstrap 预置的栅格类,可以将
label标签和控件组水平并排布局。这样做将改变
.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加
.row了。
将每一个 .form-group水平排列
control-label:将label和div 水平排列整齐
<form class="form-horizontal"> <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>
posted @ 2019-05-04 18:22 巡山小妖N 阅读(...) 评论(...) 编辑 收藏
相关文章推荐
- Bootstrap学习之四:表单
- bootstrap表单学习笔记3-2
- Flask学习笔记-在Bootstrap框架下Web表单WTF的使用
- Bootstrap学习:表单
- Bootstrap基础学习(二)—表单
- Bootstrap3.0学习第六轮(表单)
- Bootstrap3.0学习第六轮(表单)
- Bootstrap简单表单显示学习笔记
- 学习小记 - Flask Web (3) 不使用bootstrap模板完成表单处理
- bootStrap学习10---- 表单
- bootstrap学习心得(1)-------框架-----表单
- Bootstrap学习笔记-表单
- Bootstrap学习之四:表单
- [学习][记录][转]JS组件系列——Form表单验证神器: BootstrapValidator
- bootstrap表单学习笔记3-1
- bootstrap表单学习笔记3-3
- 一步一步学习Bootstrap系列--表单布局
- bootstrap 学习笔记 - 3 (表格 + 表单 +控件)
- Bootstrap学习-排版-表单