首页 > 代码库 > Bootstrap 表单
Bootstrap 表单
col-sm-2指的是12栅格系统中在小屏幕下占两列， control-label则指的是控制标签(label)样式的一个类，一般用于控制表单控件。<form class="form-horizontal" role="form"> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="请输入你的密码“> </div> </div></form>
label 的 for 属性:当点击label标签中的文字 会定位到 for指向的标签.
<form role="form"></form> 中 role属性是给给读屏软件识别用的,方便有阅读障碍的人.
对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。
对于input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
legend 下划线
内联表单:有时候我们需要将表单的控件都在一行内显示，在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名“form-inline”即可。如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：<form class="form-inline" role="form"><div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label></div><div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"></div></form>
单行输入框<form role="form"><div class="form-group"><input type="email" class="form-control" placeholder="Enter email"></div></form>
Bootstrap 表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。