bootstrap中各类表单的应用

最新推荐文章于 2023-04-28 00:03:48 发布

转载最新推荐文章于 2023-04-28 00:03:48 发布 · 452 阅读

文章标签：

#bootstrap #表单 #css

bs-表单专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Bootstrap中常见的表单样式，包括.form-control、.form-group等，并展示了如何使用这些样式来构建不同类型的表单，例如内联表单和水平表单。此外，还介绍了一些不常见的表单样式，如.sr-only、.help-block等。

一.bs中常用表单样式

.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>