正文
Bootstrap页面布局12 - BS表单元素的排版
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
首先看看这行代码：
<label for='account'>帐号</label>
<input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' />
<p class='help-block'>请输入您注册时的手机/邮箱</p><label for='password'>密码</label>
<input id='password' name='account' type='password' value='' placeholder='请输入账号密码' />
<p class='help-block'>请输入帐号密码</p><button type='button' class='btn btn-primary'>登录</button>
如图效果：
为了使之在同一行上，我们需要改进一下代码
<form class='form-horizontal'>
<fieldset>
<legend>用户登录</legend>
<div class='control-group'>
<label class='control-label' for='account'>帐号</label>
<div class='controls'>
<input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' />
<p class='help-block'>请输入您注册时的手机/邮箱</p>
</div>
</div> <div class='control-group'>
<label class='control-label' for='password'>密码</label>
<div class='controls'>
<input id='password' name='account' type='password' value='' placeholder='请输入账号密码' />
<p class='help-block'>请输入帐号密码</p>
</div>
</div>
</fieldset>
<div class='form-actions'>
<button type='submit' class='btn btn-primary'>登录</button>
</div>
</form>
说明：
legend标签:定义表单描述，且下方会有灰色的线
.form-actions: 灰色背景和适当的边距
.controls:包围住表单元素
.control-label:如果要使“密码”文字和文本框在同一线上，需要给“密码”外围的lable添加.control-label类,同时需要给文本框和提示文字外围包围一个类为.cnotrols的div
效果如图：
