形式
用于创建各种表单的表单控件样式,布局选项和自定义组件的示例和使用指南。
概观
确保在所有输入上使用适当的type
属性(例如,电子邮件地址的email
或数字信息的number
)以利用更新的输入控件,如电子邮件验证,数字选择等。
这是一个演示Bootstrap表单样式的简单示例。继续阅读有关所需类,表单布局等的文档。
<form>
<div class="form-group">
<label for="exampleInputEmail1">电子邮件地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">我们绝不会与其他任何人分享您的电子邮件。</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
选项一是这个
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
表格控件
文本形式控件 - 如<input>
s,<select>
s和<textarea>
s - 用.form-control
类设置样式。包括用于一般外观,焦点状态,尺寸调整等的样式。
一定要探索我们的[自定义表单](#custom-forms)来进一步设置<select>
的样式。
<form>
<div class="form-group">
<label for="exampleFormControlInput1">电子邮件地址</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">示例选择</label>
<select class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">示例多选</label>
<select multiple class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">示例Textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
对于文件输入, 交换 该.form-control
for .form-file-upload
and .form-file-simple
or .form-file-multiple
.
<div class="form-group form-file-upload form-file-simple">
<input type="text" class="form-control inputFileVisible" placeholder="Simple chooser...">
<input type="file" class="inputFileHidden">
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Single File">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-primary">
<i class="material-icons">attach_file</i>
</button>
</span>
</div>
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple>
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-info">
<i class="material-icons">layers</i>
</button>
</span>
</div>
</div>
只读
在输入上添加readonly
布尔属性以防止修改输入的值。只读输入显得更轻(就像禁用输入一样),但保留标准光标。
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
例子
<div class="form-group label-floating has-success">
<label class="control-label">成功输入</label>
<input type="text" value="Success" class="form-control" />
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
<div class="form-group label-floating has-danger">
<label class="control-label">错误 输入</label>
<input type="email" value="Error Input" class="form-control" />
<span class="material-icons form-control-feedback">clear</span>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">group</i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Material Icons">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-group"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Font Awesome Icons">
</div>
复选框和收音机
在.form-check`的帮助下改进了默认复选框和无线电,这两种输入类型的单个类改善了HTML元素的布局和行为。 复选框用于选择列表中的一个或多个选项,而无线电用于从多个选项中选择一个选项。
支持禁用复选框和无线电,但是为了在父“
默认(堆叠)
默认情况下,任意数量的立即兄弟的复选框和无线电将垂直堆叠,并用.form-check
间隔。
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
选项一是这个和那个&mdash;一定要包括为什么它很棒
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled>
选项二是禁用
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
收音机关闭
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
收音机开启
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
已禁用广播已关闭
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
排队
通过将.form-check-inline
添加到任何.form-check
,在同一水平行上对复选框或无线电进行分组。
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
布局
由于Bootstrap将display:block
和width:100%
应用于几乎所有的表单控件,因此表单默认垂直堆叠。 可以使用其他类来基于每个表单更改此布局。
表格网格
可以使用我们的网格类构建更复杂的表单。 将这些用于需要多列,不同宽度和其他对齐选项的表单布局。
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="名字">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="姓">
</div>
</div>
</form>
表格行
您也可以将.row换成.form-row,这是我们标准网格行的一种变体,它覆盖了默认的列装订线,以实现更紧凑,更紧凑的布局。
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="名字">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="姓">
</div>
</div>
</form>
More complex layouts can also be created with the grid system.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">电子邮件</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">密码</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">地址</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">地址 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">市</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-3">
<label for="inputState">州</label>
<select id="inputState" class="form-control">
<option selected>选择...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2 ml-auto">
<label for="inputZip">压缩</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
对我进行检查
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">登入</button>
</form>
残疾人表格
在输入上添加disabled
布尔属性以防止用户交互并使其显得更轻。
在输入上添加disabled
布尔属性以防止用户交互并使其显得更轻。
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput"> 禁用输入</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">禁用选择菜单</label>
<select id="disabledSelect" class="form-control">
<option></option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
不能检查我
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>
警告与锚
默认情况下,浏览器会将<fieldset disabled>
中的所有本机表单控件(<input>
,<select>
和<button>
元素)视为已禁用,从而阻止键盘和鼠标之间的交互。 但是,如果您的表单还包含<a ... class="btn btn- ">
元素,那么这些元素只会被赋予pointer-events:none
样式。 正如关于[按钮的禁用状态]({{site.baseurl}} docs {{site.docs_version}}组件按钮#disable-state)(特别是锚元素的子部分)中所述,此CSS 属性尚未标准化,并且在Opera 18及更低版本或Internet Explorer 10中不完全受支持,并且不会阻止键盘用户关注或激活这些链接。 因此,为了安全起见,请使用自定义JavaScript来禁用此类链接。
跨浏览器兼容性
虽然Bootstrap将在所有浏览器中应用这些样式,但Internet Explorer 11及更低版本不完全支持<fieldset>
上的disabled
属性。 使用自定义JavaScript在这些浏览器中禁用字段集。
文件浏览器
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail img-raised">
<img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
<div>
<span class="btn btn-raised btn-round btn-default btn-file">
<span class="fileinput-new">选择图像</span>
<span class="fileinput-exists">更改</span>
<input type="file" name="..." />
</span>
<a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
如果您想查看更多示例和属性,请查看官方 Bootstrap Documentation.