www.qjdy.com-奇迹赌场 > www.qjdy.com > 不要将表单组合输入框组混合使用

原标题:不要将表单组合输入框组混合使用

浏览次数:165 时间:2019-08-22

BootStrap注意事项小结(五)表单,bootstrap小结

1.主导实例

独自的表单控件会被自动赋予一些大局样式。全数安装了 .form-control类的 <input>、<textarea> 和 <select> 成分都将被暗中认可设置宽度属性为 width: 百分百;。 将 label 成分和前边提到的控件包裹在 .form-group中得以获得最棒的排列。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<form role="form"><div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div> 
</body>
</html>

图片 1

毫无将表单组合输入框组混合使用

永不将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中应用。

2.内联表单

为 <form> 成分增添 .form-inline 类可使其情节左对齐并且表现为inline-block 级其余控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就能够使表单折叠)。

或许要求手动设置宽度

在 Bootstrap 中,输入框和单选/多选框控件私下认可棉被服装置为 width: 百分之百; 宽度。在内联表单,大家将这几个因素的小幅度设置为 width: auto;,由此,多个控件可以排列在同一行。根据你的布局必要,大概须要有些至极的定制化组件。

一定要加多 label 标签

万一你从未为各样输入控件设置 label 标签,显示器阅读器将不能够正确识别。对于那个内联表单,你能够经过为 label 设置 .sr-only类将其逃匿。还会有一点点帮扶技艺提供label标签的代替方案,举个例子aria-label、aria-labelledby 或 title 属性。假设那一个都荒诞不经,显示器阅读器恐怕会利用利用 placeholder 属性,假如存在的话,使用占位符来替代其余的标志,但要注意,这种艺术是不妥善的。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="汇智网">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div> 
</body>
</html>

图片 2

3.程度排列的表单

透过为表单加多 .form-horizontal 类,并联合签字利用 Bootstrap 预置的栅格类,能够将 label 标签和控件组水平并排布局。那样做将改成 .form-group 的表现,使其表现为栅格系统中的行(row),因而就没有须求再额外增添 .row 了。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form"><div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div> 
</body>
</html>

图片 3

4.被辅助的控件1

表单布局实例中展现了其所帮衬的正式表单控件。

输入框

总结超越55%表单控件、文本输入域控件,还帮衬全部 HTML5 类型的输入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。

必需增多类型注脚

唯有不利安装了 type 属性的输入控件才具被给予准确的体制。

输入控件组

如需在文书输入域 <input> 前边或后边添Gavin本内容或按键控件,请参见输入控件组。

文本域

支撑多行文本的表单控件。可依赖需求转移 rows 属性。

<textarea class="form-control" rows="3"></textarea>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<div class="form-group"><input type="text" class="form-control" placeholder="文本输入"></div>
<div class="form-group"><textarea class="form-control" rows="4" placeholder="文本框"></textarea></div>
</div> 
</body>
</html>

图片 4

5.被帮助的控件2

多选和单选框

多选框(checkbox)用于选拔列表中的三个或四个挑选,而单选框(radio)用于从三个选取中只选拔二个。

设置了 disabled 属性的单选或多选框都能被予以合适的样式。对于和多选或单选框联合利用的 <label> 标签,假使也期望将适可而止于上方的鼠标设置为“禁止点击”的样式,请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <田野同志set>。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled="">
Option two is disabled
</label>
</div>
<p></p><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this and that—be sure to include why it's great
</label>
</div><p></p>
<p></p><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div><p></p>
<p></p><div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
Option three is disabled
</label>
</div>
</body>
</html>

图片 5

内联单选和多选框

经过将 .checkbox-inline 或 .radio-inline 类应用到一名目非常多的多选框(checkbox)或单选框(radio)控件上,能够使这么些控件排列在一行。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="radio">
<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>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 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>
</body>
</html>

下拉列表(select)

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
...
</select>
</body>
</html>

图片 6

6.静态控件

假诺急需在表单元帅一行纯文本和 label 元素放置于同一行,为 <p> 成分增加 .form-control-static 类就可以。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10">
<label class="col-sm-2 control-label">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label><!--影藏-->
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
</div> 
</body>
</html>

图片 7

7.难题状态

大家将或多或少表单控件的暗中认可 outline 样式移除,然后对 :focus 状态赋予box-shadow 属性。

<form>
<input class="form-control" id="focusInput" type="text" value="Demonstrative focus state">
</form>

演示:focus 状态

在本文书档案中,大家为地方实例中的输入框赋予了自定义的体裁,用于演示 .form-control 元素的 :focus 状态。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<div class="container">
<br>
<form><input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div> 
</body>
</html>

图片 8

8.禁止使用状态

为输入框设置 disabled 属性能够禁止其与顾客有其余交互(焦点、输入等)。被剥夺的输入框颜色更加浅,并且还增添了 not-allowed 鼠标状态。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">

被剥夺的 田野set

为<田野同志set> 设置 disabled 属性,可以禁止使用 <田野(field)set> 中满含的具备控件。

<a> 标签的链接功效不受影响

暗许情形下,浏览器会将 <田野先生set disabled> 内全部的原生的表单控件(<input>、<select> 和 <button> 成分)设置为禁止使用状态,幸免键盘和鼠标与她们相互。可是,如若只要表单中还满含<a ... class="btn btn-*"> 成分,那几个因素将只被予以 pointer-events: none 属性。正如在有关剥夺状态的按钮章节中(尤其是关于锚点成分的子章节中)所描述的那么,该 CSS 属性尚不规范,并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 总未有获取圆满援助,並且不会阻拦键盘客户能够获得关节或激活那些链接。所感到了安全起见,提议利用自定义 Javascript 来剥夺那几个链接。

跨浏览器包容性

虽说 Bootstrap 会将这几个样式应用到持有浏览器上,Internet Explorer 11 及以下浏览器中的 <田野先生set> 成分并不完全辅助 disabled 属性。由此建议在这么些浏览器上通过 Javascript 代码来剥夺<田野先生set>。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<form class="form-horizontal" role="form"><div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
</form> 
</body>
</html>

图片 9

9.只读状态

为输入框设置 readonly 属性能够禁止客商修改输入框中的从头到尾的经过。处于只读状态的输入框颜色更加浅(就如被剥夺的输入框同样),不过如故保留规范的鼠标状态。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly="">
</body>
</html>

图片 10

10.校验状态

Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了体制。使用时,加多 .has-warning、.has-error 或 .has-success 类到那几个控件的父成分就能够。任何带有在此因素之内的.control-label、.form-control 和 .help-block 元素都将接受那么些校验状态的体制。

将表明状态传达给救助设备和盲人客商

采纳那一个校验样式只是为表单控件提供三个可视的、基于色彩的唤起,不过并不可能将这种提醒音信传达给使用协助设备的客户

  • 譬如说显示器阅读器 - 恐怕青光眼顾客。

为了保证全部用户都能收获科学新闻,Bootstrap 还提供了另一种提示方式。比如,你可以在表单控件的 <label> 标签上以文件的款式显得提示消息(就像下面代码中所显示的);包涵一个Glyphicon 字体Logo (还大概有赋予 .sr-only 类的文书音讯 - 参照他事他说加以考察Glyphicon 字体Logo实例);或然提供一个附加的 扶助音讯块。其余,对于利用帮忙设施的客户,无效的表单控件还是能授予叁个aria-invalid="true" 属性。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<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" id="checkboxSuccess" value="option1">Checkbox with success</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label>
</div>
</div> 
</body>
</html>

图片 11

11.增多额外的Logo

你还能本着校验状态为输入框增添额外的Logo。只需安装相应的 .has-feedback 类并累加正确的Logo就可以。

报告Logo(feedback icon)只可以使用在文书输入框 <input class="form-control"> 成分上。

Logo、label 和输入控件组

对此不含有 label 标签的输入框以及侧边带有附加组件的输入框组,要求手动为其图标定位。为了让抱有客户都能访谈你的网址,大家刚烈提出为有着输入框添加label 标签。倘令你不指望将label 标签展现出来,能够透过足够 .sr-only 类来促成。假设真的无法加多 label 标签,申请调离度Logo的 top 值。对于输入框组,请根据你的骨子里情形调治 right 值。

向扶助技艺设备传递图标的意义

为了确定保证救助技艺- 如荧屏阅读器 - 正确传达二个Logo的意思,额外的隐身的文书应包涵在 .sr-only 类中,并鲜明关系应用了 aria-describedby 的表单控件。只怕,以某个其余花样(举例,文本输入字段有八个特定的警告音信)传达含义,举个例子改变与表单控件实际相关联的 <label> 的文本。

固然如此上面包车型地铁事例已经涉及各自表单控件自身的 <label> 文本的表达状态,上述技能(使用 .sr-only 文本 和 aria-describedby) )已经席卷了必要验证的目的。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<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" aria-describedby="inputSuccess2Status">

(success)
</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" aria-describedby="inputWarning2Status">

(warning)
</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" aria-describedby="inputError2Status">

(error)
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
@
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>

(success)
</div> 
</body>
</html>

图片 12

12.控件尺寸

通过 .input-lg 类似的类可以为控件设置中度,通过 .col-lg-* 类似的类可认为控件设置宽度。

可观尺寸

创设大学一年级部分或小一些的表单控件以合营按键尺寸。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<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> 
</body>
</html>

图片 13

水平排列的表单组的尺寸

经过抬高 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal包裹的 label 成分和表单控件急忙设置尺寸。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<form class="form-horizontal">
<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>
</body>
</html>

图片 14

调整列(column)尺寸

用栅格系统中的列(column)包裹输入框或其任何父成分,都可很轻巧的为其设置宽度。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<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>
</body>
</html>

图片 15

13.扶植文本

本着表单控件的“块(block)”级救助文本。

与表单控件相关联的帮忙文本

与表单控件相关联的协助文本 aria-describedby 属性的表单控件关联,那将保障使用帮衬才具- 如显示器阅读器 - 的客商获得控件主旨或步向调整时展现这几个援助文本。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
</head>
<body>
<form role="form">帮助文本实例
<input class="form-control" type="text" placeholder="">
一个较长的帮助文本块,超过一行,需要扩展到下一行。本实例中的帮助文本总共有两行。
</form> 
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
一块帮助文本,突破到一个新的线,可以超越一行。 
</body>
</html>

图片 16

如上所述是小编给我们介绍的BootStrap注意事项小结(五)表单,希望对我们持有援救,假若大家有别的疑问请给自家留言,我会及时复苏大家的。在此也非常多谢大家对帮客之家网址的支撑!

1.中央实例 单独的表单控件会被机关赋予一些大局样式。全部安装了 .form-control类的 input、...

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:不要将表单组合输入框组混合使用

关键词: ag电子游戏试玩

上一篇:关于ui-router中嵌套路由中的问题

下一篇:没有了