bootstrap排版4: form表单布局

发表于:2017-11-06 19:38 阅读:

表单:
bootstrap为所有表单控件自动赋予了一些全局样式。除此之外,所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都被设置为 width: 100%。将 label 元素和前面提到的控件包裹在设置了 .form-group 类的div中可获得最好的排列。下面是一个基本示例:
 
<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> 元素添加 .form-inline 类可使其内容左对齐并且表现为inline-block级别的控件,如需隐藏 label,可为其设置 .sr-only 类。(只适用于视口宽度至少在768px时,视口宽度再小表单控件就会折叠)。示例:
 
<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>
 
 
水平排列的表单(即:让label元素与其后的表单控件并排显示):
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可将 label 标签和控件水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。示例:
 
<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>


灵石网络专注于营销型网站设计、SEO搜索引擎优化、PHP开发、企业网络营销服务。


扫描二维码加我微信!