Bootstrap 水平表單

2018-09-08 19:18 更新

bootstrap水平表單

ootstrap框架默認(rèn)的表單是垂直顯示風(fēng)格，但很多時候我們需要的水平表單風(fēng)格（標(biāo)簽居左，表單控件居右）

　　

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

 

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設(shè)置表單控件padding和margin值。
2、改變“form-group”的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的“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">進(jìn)入郵箱</button>
            </div>
        </div>
</form>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號