@(Bootstrap)[网页]
##导言 > 关于表单的应用自然不需要多说,只要您的的网站可以用户登录,那么不可能不用到表单!表单主要功能是用来与用户做交流的一个网页控件,JavaScript发明之初最大的作用也就是用来进行表单操作。所以表单是每一个前端开发者必须要熟练掌握的东西。 [toc] ##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>
Example block-level help text here.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
显示效果如下 ![Alt text](./1495012817269.png) ## 3.水平表单 Bootstrap框架默认的表单是 垂直显示风格 ,除了上面的内联表达之外,很多时候我们需要的是 水平表单风格 。在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 在 `` 元素是使用类名 .form-horizontal ,作用如下: 设置表单控件padding和margin值。 改变“form-group”的表现形式,类似于栅格系统的“row”。 配合Bootstrap框架的栅格系统。 例如:使用 `
` 将我们的`input`进行包裹
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">我是密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</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>
<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的同一行,为
元素添加.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>
10.高度尺寸
通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。
创建大一些或小一些的表单控件以匹配按钮尺寸。
<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官方文档
推酷文章