表单之 文本框 text
<input type='text' value='' placeholder='输入您的用户名' class='input-mini' />
①几个类控制文本框长度
input-mini:最小
如图：
input-small:次小
如图：
input-medium:中等
如图：
input-max:最长
如图：
spanN:N代表数字，最大12，N表示1个网格的宽度
例如：span4表示对应的input框占用4个网格的宽度
②属性：placeholder="输入您的用户名",当用户开始输入时，提示文字自动消失。
看图如下：
代码如下：
<label for='username'>用户名</label>
<input id='username' type='text' title='输入您的用户名' class='span-medium' placeholder="输入您的用户名" /><span class='help-block'>以字母开头，16位的字母、数字、下划线的组合</span>
.help-block | .help-inline
提示文字【这里的提示文字是 “以字母开头，16位的字母、数字、下划线的组合”】另起一行显示/在输入框后显示
-----------------------------------------------------------------------------------------------------------------------------------------------------
文本框的前缀和后缀
<div class='input-prepend input-append'><span class='add-on'>¥</span><input type='text' placeholder='输入金额' class='input-medium' /><span class='add-on'>.00</span></div>
说明：
类
.input-prepend:添加前缀
.input-append: 添加后缀
.add-on:修饰要添加的字符，一般使用它的元素为span标签
这时候如图：
在给文本框添加前缀或者是后缀的时候需要添加以下css样式
<style>
.input-prepend input, .input-append input {
margin-top:10px;
}
</style>
这时候再看：
将按钮作为后缀
<div class='input-append'><input type='text' placeholder='请输入搜索内容' class='input-medium' /><button class='btn'>搜索</button></div>
说明：
button:按钮标签
.btn:定义的一个按钮的样式
.input-append:将按钮作为后缀
如果文本框和按钮错位，同样需要设置文本框的margin-top:10px;
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之单选按钮 radio
简单用法：
<label>性别</label>
<label class='radio'><input type='radio' name='sex' value='1' />男</label>
<label class='radio'><input type='radio' name='sex' value='2' />女</label>
<label class='radio'><input type='radio' name='sex' value='0' />保密</label>
如果要排在同一行上，那么设置label属性的 class='radio inline'
如图效果：
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之复选按钮 checkbox
<label>请选择下面的书籍类别</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='1' />人物传记</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='2' />财经</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='3' />法律</label>
如果设置label元素的class='checkbox',那么每个checkbox各占一行。
以上代码块中如图效果：
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之下拉列表 select
<label for='go-where'>到哪去?</label>
<select id='go-where' multiple='multiple'>
<option value='1'>荷兰</option>
<option value='2'>新西兰</option>
<option value='3'>法国</option>
<option value='4'>德国</option>
</select>
注意这里的 multiple="multiple" 表示多选，去掉则是单选下拉列表
以上代码块中的效果如图：
-----------------------------------------------------------------------------------------------------------------------------------------------------