Bootstrap页面布局11 - BS表单

表单之 文本框 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'>&yen;</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" 表示多选，去掉则是单选下拉列表

以上代码块中的效果如图：

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------