type = "text" id = "value" placeholder = "姓名" >
http://wenda.jikexueyuan.com/question/9680/
2.2 表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如：
<body >
<form role ="form" >
<div class ="form-group" >
<select class ="form-control" >
<option > 1option >
<option > 2option >
<option > 3option >
<option > 4option >
<option > 5option >
select >
div >
<div class ="form-group" >
<select multiple ="mutiple" class ="form-control" >
<option > 1option >
<option > 2option >
<option > 3option >
<option > 4option >
<option > 5option >
select >
div >
form >
body >
运行效果：
备注：multiple="multiple"或multiple都可以
2.3 表单控件(文本域textarea)
文本域和原始使用方法一样。
设置rows 可定义其高度
设置cols 可定义其宽度
但如果textarea元素中添加了类名“form-control”类名 ，则无需设置cols属性 。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<body >
<form role ="form" >
<div class ="form-group" >
<textarea class ="form-control" rows ="3" > textarea >
div >
form >
body >2.4 表单控件(复选框checkbox和单选择按钮radio)
Bootstrap框架中checkbox 和radio 有点特殊，Bootstrap针对他们做了一些特殊化处理； checkbox 和radio 与label 标签配合使用会出现一些小问题（最头痛的是对齐问题）。
<body >
<form role ="form" >
<h3 > 案例1h3 >
<div class ="checkbox" >
<label >
<input type ="checkbox" value ="" >
记住密码
label >
div >
<div class ="radio" >
<label >
<input type ="radio" name ="optionsRadios" id ="optionsRadios1" value ="love" checked >
喜欢
label >
div >
<div class ="radio" >
<label >
<input type ="radio" name ="optionsRadios" id ="optionsRadios2" value ="hate" >
不喜欢
label >
div >
form >
body >
实现效果：
备注： label包起来 了 checkbox连同label标签 放置在一个名为“.checkbox”的容器 内 radio连同label标签 放置在一个名为“.radio”的容器 内 主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式 。源码请查看bootstrap.css文件第1742行～第1762行。
2.5 表单控件(复选框和单选按钮水平排列)
将复选框和单选按钮需要水平排列的布局要求。 类名“checkbox-inline” 类名“radio-inline”
<body >
<form role ="form" >
<form role ="form" >
<div class ="form-group" >
<label class ="checkbox-inline" >
<input type ="checkbox" value ="option1" > 游戏
label >
<label class ="checkbox-inline" >
<input type ="checkbox" value ="option2" > 摄影
div >
<div class ="form-group" >
<label class ="radio-inline" >
<input type ="radio" value ="option1" name ="sex" > 男性
label >
<label class ="radio-inline" >
<input type ="radio" value ="option2" name ="sex" > 女性
div >
form >
body >实现效果：
备注：第二个实现效果checkbox标签中的label标签没有使用类checkbox-inline也可以实现水平，只是页面样式略有区别。
单选控件radio标签：
2.6 表单控件(按钮)
按钮也是表单重要控件之一。
☑ input[type=“submit”]
☑ input[type=“button”]
☑ input[type=“reset”]
☑
在Bootstrap框架中的按钮都是采用来实现。
2.7 表单控件大小
HTML中的表单控件大小通过height，line-height，padding和font-size等属性来实现控件的高度 设置。
Bootstrap框架采用
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
来控制表单中的input，textarea 和selec控件 的高度
<body >
<form role ="form" >
<div class ="form-group" >
<label class ="control-label" > 控件变大label >
<input class ="form-control input-lg" type ="text" placeholder ="添加.input-lg，控件变大" >
div >
<div class ="form-group" >
<label class ="control-label" > 正常大小label >
<input class ="form-control" type ="text" placeholder ="正常大小" >
div >
<div class ="form-group" >
<label class ="control-label" > 控件变小label >
<input class ="form-control input-sm" type ="text" placeholder ="添加.input-sm，控件变小" >
div >
form >
body >实现效果：
表单控件的宽度处理类：.col-xs-* 。其中*表示1~12之间的任意整数（系统会自动分为最多12列）；三个等宽的可以用“.col-xs-4 “来实现。
如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”。换句话说，如果没有这样做，要通过网格系统来控制表单控件宽度.
2.8 表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现。
源码请查阅bootstrap.css文件第1707行～第1712行：
.form-control :focus {
border-color : #66afe9 outline : 0 -webkit-box-shadow : inset 0 1 px 1 pxrgba(0 ,0 ,0 ,.075 ) , 0 0 8 px rgba(102 , 175 , 233 , .6 ) box-shadow : inset 0 1 px 1 pxrgba(0 ,0 ,0 ,.075 ) , 0 0 8 px rgba(102 , 175 , 233 , .6 ) } 这段代码应该是不正确的，因为没有引入类.form-control:focus 。
for=”focus“ 和id=”focus “ 来实现绑定。
2.9 表单控件状态(禁用状态)
Bootstrap框架表单控件的禁用状态仅在样式风格上优化以下，其实现方法是一样的——在相应的表单控件上添加属性“disabled”。
"form-control" type ="text" placeholder="表单已禁用，不能输入" disabled>具体实现
备注：在使用了类“form-control” 的表单控件中，样式设置了禁用表单背景色为灰色 ，而且手型变成了不准输入的形状 。如果控件中不使用类名“form-control” ，禁用的控件只会有一个不准输入的手型 出来（删除之后没有出来，只是鼠标点不动，与浏览器有关）。
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
<form role ="form" >
<fieldset disabled >
<div class ="form-group" >
<label for ="disabledTextInput" > 禁用的输入框label >
<input type ="text" id ="disabledTextInput" class ="form-control" placeholder ="禁止输入" >
div >
<div class ="form-group" >
<label for ="disabledSelect" > 禁用的下拉框label >
<select id ="disabledSelect" class ="form-control" >
<option > 不可选择option >
select >
div >
<div class ="checkbox" >
<label >
<input type ="checkbox" > 无法选择
label >
div >
<button type ="submit" class ="btn btn-primary" > 提交button >
fieldset >
form >
属性disabled 作用在
<html >
<body >
<form >
<fieldset >
<legend > 健康信息legend >
身高：<input type ="text" />
体重：<input type ="text" />
fieldset >
form >
body >
html >
Bootstrap 框架中的使用方法
<form role ="form" >
<fieldset disabled >
<legend > <input type ="text" class ="form-control" placeholder ="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /> legend >
<div class ="form-group" >
<label for ="disabledTextInput" > 禁用的输入框label >
<input type ="text" id ="disabledTextInput" class ="form-control" placeholder ="禁止输入" >
div >
<div class ="form-group" >
<label for ="disabledSelect" > 禁用的下拉框label >
<select id ="disabledSelect" class ="form-control" >
<option > 不可选择option >
select >
div >
<div class ="checkbox" >
<label >
<input type ="checkbox" > 无法选择
label >
div >
<button type ="submit" class ="btn btn-primary" > 提交button >
fieldset >
form >
2.10 表单控件状态(验证状态)
表单验证的几个验证状态样式，
.has-warning:警告状态（黄色）
.has-error：错误状态（红色）
.has-success：成功状态（绿色）
使用的时候只需要在form-group容器 上对应添加状态类名。
三种状态主要是颜色不一样来体现验证状态
如果在不同表单验证状态下显示不同的icon，如成功是一个对号（√），错误是一个叉号（×）等。 类名“.has-feedback” ，此类名必须与与“.has-error”、“.has-warning” 和“.has-success” 同时出现。
2.11 表单提示信息
使用了一个类”.help-block” 样式可以为表单验证时提供不同的提示信息，将提示信息以块状显示，并且显示在控件底部。
<form role ="form" >
<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 >
<div class ="form-group has-warning has-feedback" >
<label class ="control-label" for ="inputWarning1" > 警告状态label >
<input type ="text" class ="form-control" id ="inputWarning1" placeholder ="警告状态" >
<span class ="help-block" > 请输入正确信息span >
<span class ="glyphicon glyphicon-warning-sign form-control-feedback" > span >
div >
<div class ="form-group has-error has-feedback" >
<label class ="control-label" for ="inputError1" > 错误状态label >
<input type ="text" class ="form-control" id ="inputError1" placeholder ="错误状态" >
<span class ="help-block" > 您输入的信息是错误的span >
<span class ="glyphicon glyphicon-remove form-control-feedback" > span >
div >
form >
Bootstrap V2.x版本的行内提示信息使用类名”help-inline“实现的，但是在Bootstrap V3.x中取消了，可以添加如下代码来实现提示信息显示在控件的后面。
.help-inline {
display :inline-block padding-left :5 pxcolor : #737373 } 如果不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。
3 按钮
3.1 按钮类型
class="btn" type ="button" >基础按钮.btn
class="btn btn-default" type ="button" >默认按钮.btn-default
class="btn btn-primary" type ="button" >主要按钮.btn-primary
class="btn btn-success" type ="button" >成功按钮.btn-success
class="btn btn-info" type ="button" >信息按钮.btn-info
class="btn btn-warning" type ="button" >警告按钮.btn-warning
class="btn btn-danger" type ="button" >危险按钮.btn-danger
class="btn btn-link" type ="button" >链接按钮.btn-link
3.2 按钮大小调整
通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
class="btn btn-primary btn-lg" type ="button" >大型按钮.btn-lg
class="btn btn-primary" type ="button" >正常按钮
class="btn btn-primary btn-sm" type ="button" >小型按钮.btn-sm
class="btn btn-primary btn-xs" type ="button" >超小型按钮.btn-xs
备注：类.btn-primary去掉后蓝色变为灰色
3.3 块状按钮
使用类名“btn-block” 让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。常把这种按钮称为块状按钮 。
class="btn btn-primary btn-lg btn-block" type ="button" >大型按钮.btn-lg
class="btn btn-primary btn-block" type ="button" >正常按钮
class="btn btn-primary btn-sm btn-block" type ="button" >小型按钮.btn-sm
< button class ="btn btn-primary btn-xs btn-block" type ="button" >超小型按钮.btn-xs
4 图像
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格通过在
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
<div class ="container" >
<div class ="row" >
<div class ="col-sm-4" >
"http://placehold.it/140x140" >
<div >默认图片div>
div>
<div class ="col-sm-4" >
"img-rounded" alt="140x140" src="http://placehold.it/140x140" >
<div >圆角图片div>
div>
<div class ="col-sm-4" >
"img-circle" alt="140x140" src="http://placehold.it/140x140" >
<div >圆形图片div>
div>
<div class ="row" >
<div class ="col-sm-6" >
"img-thumbnail" alt="140x140" src="http://placehold.it/140x140" >
<div >缩略图div>
div>
<div class ="col-sm-6" >
"img-responsive" alt="140x140" src="http://placehold.it/140x140" />
<div >响应式图片div>
div>
div>
div>
div>
注意：对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。
Bootstrap框架为了更好的维护图像的样式，同样将这部分样式独立出来：
5 图标
在Bootstrap框架中用CSS3的@font-face属性配合字体来实现的200个icon效果图片。
<body >
<span class ="glyphicon glyphicon-search" > span >
<span class ="glyphicon glyphicon-asterisk" > span >
<span class ="glyphicon glyphicon-plus" > span >
<span class ="glyphicon glyphicon-cloud" > span >
body >
在Bootstrap框架中glyphicon默认样式是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码： 源码请查看bootstrap.css文件第2381行～第2992行 /
.glyphicon {
position : relative top : 1 px display : inline-block font-family : 'Glyphicons Halflings' font-style : normal font-weight : normal line-height : 1 -webkit-font-smoothing : antialiased -moz-osx-font-smoothing : grayscale }
.glyphicon-asterisk :before {
content : "\2a" }
….另：
该icon是由http://glyphicons.com/提供的
可能时先入为主的思想观念，个人觉得http://fontawesome.dashgame.com/更值得拥有
http://www.imooc.com/code/2804
