Bootstrap学习之四:表单
@(Bootstrap)[网页]
导言
关于表单的应用自然不需要多说,只要您的的网站可以用户登录,那么不可能不用到表单!表单主要功能是用来与用户做交流的一个网页控件,JavaScript发明之初最大的作用也就是用来进行表单操作。所以表单是每一个前端开发者必须要熟练掌握的东西。
1.基础表单
表单控件会被自动赋予全局样式,设置了foem-control类的的input
,textarea,select元素都被默认设置宽度属性width:100%。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="快输入邮箱地址,不然我打你了">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码:</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码,放心我会偷看的">
</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>
直接在MarkDown放代码显示,输入框的提示没有显示出来,在html文档中编辑会显示出来
2.内联表单
为
4.输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
实例:
<input type="text" class="form-control" placeholder="Text input">
##5.文本域
文本域和原始使用方法一样,设置 rows可定义其高度 ,设置 cols可以设置其宽度 。但如果textarea元素中添加了类名 form-control 类名,则无需设置cols属性。因为Bootstrap框架中的 form-control 样式的表单控件宽度为100%或auto。
<textarea class="form-control" rows="3"></textarea>
6.多选框和单选框
Bootstrap对于这两个按钮进行了一些优化,要想达到最佳显示效果,有着如下说明:
不管是 checkbox 还是 radio 都使用 label 包起来了。
checkbox 按钮连同 label 标签放置在一个名为 .checkbox 的容器内, radio 连同 label 标签放置在一个名为 .radio 的容器内。
在Bootstrap框架中,主要借助 .checkbox 和 .radio 样式,来处理复选框、单选按钮与标签的对齐方式。
只需要将 checkbox 换成 checkbox-inline 就可以了,你可以添加在label上也可以添加在外部的容器上。
7.静态控件
在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为< p>元素添加.form-control-static即可。
<form class="form-horizontal" role="form">
<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>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
8.禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
9.校验状态
Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
<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>
参考:
Bootstrap官方文档
推酷文章