Bootstrap之表单
基础表单
当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
![](http://images0.cnblogs.com/blog2015/749243/201504/241644580464207.png)
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。
![](http://images0.cnblogs.com/blog2015/749243/201504/241645333756380.png)
<form class="form-horizontal" role="form"> <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="请输入您的邮箱地址"> </div> </div>
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
![](http://images0.cnblogs.com/blog2015/749243/201504/241645546717207.png)
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"> </div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241646391251560.png)
2、checkbox 连同 label 标签放置在一个名为“.checkbox”的div容器内
(2) radio连同label标签放置在一个名为“.radio”的div容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
<div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div>
<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢 </label> </div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241646597035773.png)
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
<div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">游戏 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">摄影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅游 </label> </div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241648423596610.png)
<div class="form-group"> <label> <input type="checkbox" value="option1">游戏 </label> <label> <input type="checkbox" value="option2">摄影 </label> <label> <input type="checkbox" value="option3">旅游 </label> </div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241649054069636.png)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:
☑ input[type=“submit”]
☑ input[type=“button”]
☑ input[type=“reset”]
☑ <button>
在Bootstrap框架中的按钮都是采用<button>来实现,注意button中也要有 type = "button"。
![](http://images0.cnblogs.com/blog2015/749243/201504/241649439375764.png)
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件。
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
<div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div>
表单状态的作用:
每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。
<form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend> … </fieldset> </form>
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
注意:这个是在form-group容器上对应添加状态类名的。<label>上加入class="control-label",同时也会把里面的label字体颜色改变。
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div>![]()
<div class="form-group has-successhas-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphicon glyphicon-ok form-control-feedback"></span>
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241652299372184.png)
<form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功状态</label> <div class="row"><div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <span class="col-xs-6 help-block">你输入的信息是正确的</span> </div> </div> </form>
![](http://images0.cnblogs.com/blog2015/749243/201504/241652429218418.png)
![](http://images0.cnblogs.com/blog2015/749243/201504/241653136714624.png)
<button class="btn btn-default" type="button">button标签按钮</button> <input type="submit" class="btnbtn-default" value="input标签按钮"/> <a href="##" class="btn btn-default">a标签按钮</a> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div>
![](http://images0.cnblogs.com/blog2015/749243/201504/241654019848329.png)
![](http://images0.cnblogs.com/blog2015/749243/201504/241654162185849.png)
![](http://images0.cnblogs.com/blog2015/749243/201504/241654590316502.png)
![](http://images0.cnblogs.com/blog2015/749243/201504/241655185463374.png)
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
使用方法:
使用方法非常简单,只需要在<img>标签上添加对应的类名,如下代码:
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
<span class="glyphicon glyphicon-okform-control-feedback"></span>
<span>
标签,并将图标类应用到这个 <span>
标签上。2.只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。