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

效果如图：