1、基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control
的<input>
、<textarea>
和<select>
元素都将被默认设置为width: 100%;
。将label和前面提到的这些控件包裹在.form-group
中可以获得最好的排列。
<form role="form">
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
<div class="form-group">
<label for=""></label>
<input type="password" class="form-control" id="email" placeholder="Password"/>
</div>
<div class="form-group">
<label for="file"></label>
<input type="file" id="file" />
<p class="help-block">例子的帮助文字</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" />check me out
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
效果:
两个文本框的宽度的确为100%。并且有三个form-group。
2、内联表单
为左对齐和inline-block级别的控件设置.form-inline
,可以将其排布的更紧凑。只适用于浏览器窗口至少在 768px 宽度时(窗口宽度再小的话就会使表单折叠)。
需要设置宽度:在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单,你需要专门为使用到的表单控件设置宽度。
一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置
.sr-only
已将其隐藏。
3、水平排列的表单
通过为表单添加.form-horizontal
,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row
了。
代码段:
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="email" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="">
<input type="checkbox" />check me out
</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>
4、被支持的控件
在表单布局案例中展示了其所支持的标准表单控件。
Input
大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和color
。
注意:有正确设置了
type
的input控件才能被赋予正确的样式。
文本框示例
<input type="text" class="form-control" placeholder="Text input">
Textarea
支持多行文本的表单控件。可根据需要改变rows
属性。
<h1>textarea</h1> <textarea class="form-control" rows="3"></textarea>
Checkbox 和 radio
Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。
默认外观(堆叠在一起)
Inline checkboxes
通过将.checkbox-inline
或 .radio-inline
应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。
<div class="checkbox"> <label for=""> <input type="checkbox" value=""/> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label for=""> <input type="radio" value="" name="optionsradios" checked/> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label for=""> <input type="radio" value="" name="optionsradios"/>
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@exampel.com</p> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="password"/> </div> </div> </form>
Option two can be something else and selecting it will deselect option one</label></div>
Inline checkboxes
通过将
.checkbox-inline
或.radio-inline
应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行。同理Radio是一样的,只需要添加一下样式即可。<label for="" class="checkbox-inline"> <input type="checkbox" id="" value=""/>1 </label> <label for="" class="checkbox-inline"> <input type="checkbox" id="" value=""/>2 </label> <label for="" class="checkbox-inline"> <input type="checkbox" id="" value=""/>3 </label>
Select
使用默认选项或添加multiple
属性可以显示多个选项。
代码段:
效果:<select name="" id="" class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> <select multiple id="" class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select>
5、静态控件
在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为
<p>
元素添加.form-control-static
即可。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@exampel.com</p> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="password"/> </div> </div> </form>
预览:6、控件状态
通过为控件和label设置一些基本状态,可以为用户提供回馈。
输入焦点
我们移除了某些表单控件的默认
outline
样式,并对其:focus
状态赋予了box-shadow
样式。<input class="form-control" id="focusedInput" type="text" value="This is focused...">
被禁用的输入框
为输入框设置
disabled
属性可以防止用户输入,并能改变一点外观,使其更直观。<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的fieldset
为
<fieldset>
设置disabled
属性可以禁用<fieldset>
中包含的所有控件。
<a>
标签的链接功能不受影响这个class只改变
<a class="btn btn-default">
按钮的外观,并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上,Internet Explorer 9及以下浏览器中的
<fieldset>
并不支持disabled
属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset<form action="" role="form"> <fieldset disabled> <div class="form-group"> <label for="">Disabled input</label> <input type="text" class="form-control" placeholder="Disabled input"/> </div> <div class="form-group"> <label for="">Disabled select menu</label> <select name="" id="" class="form-control"> <option value="Disabled select"></option> </select> </div> <div class="checkbox"> <label for=""> <input type="checkbox" />can't check this. </label> </div> <button type="submit" class="btn btn-primary">submit</button> </fieldset> </form>
校验状态
Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加
.has-warning
、.has-error
或.has-success
到这些控件的父元素即可。任何包含在此元素之内的.control-label
、.form-control
和.help-block
都将接受这些校验状态的样式。
7、控件尺寸
通过
.input-lg
之类的class可以为控件设置高度,通过.col-lg-*
之类的class可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
<input type="text" class="form-control input-lg" placeholder=".input-lg"/> <input type="text" class="form-control" placeholder="Default input-lg"/> <input type="text" class="form-control input-sm" placeholder=".input-sm"/> <select name="" id="" class="form-control input-lg">...</select> <select name="" id="" class="form-control">...</select> <select name="" id="" class="form-control input-sm">...</select>
调整列尺寸
用栅格系统中的列包裹input或其任何父元素,都可很容易的为其设置宽度。
<div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>
8、帮助文本
用于表单控件的块级帮助文本。
<span class="help-block">自己独占一行或多行的块级帮助文本。</span>