bootstrap排版5: form表单控件

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

输入框:
正确设置type属性的输入框可被赋予正确的样式(支持大部分表单控件及所有HTML5的输入控件,如 text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color),如需在文本输入框<input>前面或后面添加文本内容或按钮控件,可参考"输入控件组":
<input type="text" class="form-control" placeholder="提示文本">
 
 
文本域:
支持多行文本的表单控件,可根据需要改变 rows 属性:
<textarea class="form-control" rows="3"></textarea>
 
 
多选框:
<div class="checkbox">
<label>
<input type="checkbox" value="">
这是一个多选框
</label>
</div>
 
<div class="checkbox">
<label>
<input type="checkbox" value="">
这是一个多选框
</label>
</div>
 
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
注意:这是一个不可选择的多选框(disabled)
</label>
</div>
 
 
 单选框:
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
这是一个单选框(默认为选中)
</label>
</div>
 
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
这是一个单选框
</label>
</div>
 
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
注意:这是一个不可选择的单选框(disabled)
</label>
</div>
 
 
内联单选和多选框:
将 .checkbox-inline 或 .radio-inline 类应用到多选框(checkbox)或单选框(radio)上,可使控件排列在一行:
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
 
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
 
 
下拉列表:
默认样式:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
 
使用 multiple 属性可同时显示多个选项:
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
 
 
静态控件:
如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可:
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
 
 
默认获得焦点的输入框:
自定义样式:
#focusedInput {
border-color: #ccc;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
 
<input type="text" class="form-control" id="focusedInput" placeholder="输入提示">
 
 
被禁用的输入框:
为输入框设置 disabled 属性可以防止用户输入,并能对外观做一些修改,使其更直观:
<input type="text" class="form-control" placeholder="输入提示" disabled>
 
 
被禁用的 fieldset:
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件:
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
 
 
只读输入框(与disabled输入框的区别:只读输入框可获得焦点,但无法输入,而 disabled 无法获得焦点):
为输入框设置 readonly 属性可以禁止用户输入,并且输入框的样式也是禁用状态:
<input class="form-control" type="text" placeholder="输入提示" readonly>
 
 
校验状态:
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素内的 .control-label(控制label文字变色)、.form-control 和 .help-block 元素都将接受这些校验状态的样式:
 
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
 
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
 
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
 
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" value="option1">
Checkbox with success
</label>
</div>
</div>
 
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" value="option1">
Checkbox with warning
</label>
</div>
</div>
 
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" value="option1">
Checkbox with error
</label>
</div>
</div>
 
 
为检验状态添加额外的图标:
还可以针对校验状态为输入框添加额外的图标,只需添加 .has-feedback 类并添加正确的图标即可(对于不带有 label 标签的输入框和右侧带有附加组件的输入框组,需要手动为图标定位。如没有 label 标签,请调整图标的 top 值。对于输入框组,请根据实际情况调整 right 值):
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
 
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
 
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
 
 
为水平排列的表单设置图标:
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
 
 
为内联表单设置图标:
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
 
 
为label元素添加 .sr-only 类可使label元素不可见,在此情况下Bootstrap将自动调整图标位置:
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
 
 
控件尺寸:
通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度:
 1.设置控件高度:
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
 
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
 
 
水平排列的表单组的尺寸:
通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件设置尺寸:
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
 
 
2.设置控件宽度(意义不大,谨慎使用):
用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度:
<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>
 
 
辅助文本:
.help-block 类,针对表单控件的“块(block)”级辅助文本:
<div class="form-group">
<label class="control-label" for="inputSuccess2">用户名</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="help-block">这是关于此字段的一行说明文本.</span>
</div>
 
 
按钮:
预定义样式按钮:
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
 
按钮尺寸:
使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮:
<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
 
给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变成了块级(block)元素:
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
 
激活状态:
当按钮处于激活状态时,其外观表现为被按下去的样子(底色更深、边框颜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,由于 :active 是伪状态,因此无需设置——可将 .active 类应用到 <button> 上:
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
 
也可为基于 <a> 元素创建的按钮添加 .active 类,使其表现为“激活状态”:
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
 
禁用状态:
为 <button> 元素添加 disabled 属性,使其表现出禁用状态:
<button type="button" class="btn btn-primary" disabled="disabled">Button</button>
 
也可为基于 <a> 元素创建的按钮添加 .disabled 类,使其外观表现为"禁用状态"(但链接的原始功能不受影响):
<a href="#" class="btn btn-primary disabled" role="button">Button</a>
 
总之,可为 <a>、<button> 或 <input> 元素应用按钮类,但由于兼容性问题,强烈建议尽量使用 <button> 元素:
<button class="btn btn-default" type="submit">Button</button>
<a class="btn btn-default" href="#" role="button">Link</a>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">


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


扫描二维码加我微信!