Bootstrap系列 -- 12. 水平表單

 

　　Bootstrap框架預設的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標籤居左，表單控制元件居右）

　　

　　在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
　　1、在<form>元素是使用類名“form-horizontal”。
　　2、配合Bootstrap框架的網格系統。

 

　　在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
　　1、設定表單控制元件padding和margin值。
　　2、改變“form-group”的表現形式，類似於網格系統的“row”。

 

<form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址"/>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"/>
                        記住密碼
       
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">進入郵箱</button>
            </div>
        </div>
</form>