這篇文章主要介紹了使用Bootstrap創(chuàng)建表單布局的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、北安網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

Bootstrap中提供了三種類(lèi)型的表單布局：垂直表單、橫向表單以及內(nèi)聯(lián)表單；它們通過(guò)外部引入Bootstrap中的JavaScript和CSS文件以及在元素中添加類(lèi)名來(lái)設(shè)置表單控件

HTML表單是網(wǎng)頁(yè)和應(yīng)用程序中不可或缺的一部分，但是僅使用CSS來(lái)逐個(gè)手動(dòng)設(shè)置表單控件的方式通常很麻煩且枯燥乏味。如今隨著bootstrap的出現(xiàn)大大簡(jiǎn)化了表單控件比如表單中的標(biāo)簽，輸入字段，選擇框以及提交框等樣式和對(duì)齊過(guò)程。接下來(lái)在文章中將為大家詳細(xì)介紹Bootstrap中的表單布局樣式

在Bootstrap中提供了三種不同類(lèi)型的表單布局：

• 垂直表單（默認(rèn)表格布局）

• 橫向表單

• 內(nèi)聯(lián)表單

接下來(lái)在文章中將和大家逐一詳細(xì)介紹這些表單布局以及各種與表單相關(guān)的Bootstrap組件

外部引入Bootstrap

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

創(chuàng)建垂直表單布局

這是默認(rèn)的Bootstrap表單布局，其中樣式應(yīng)用于表單控件，而不向<form>元素添加任何基類(lèi)或標(biāo)記中的任何大的更改。

此布局中的表單控件在頂部堆疊有左對(duì)齊標(biāo)簽

例：

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用戶(hù)名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">密碼</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">記住密碼</label>
        </div>
        <button type="submit" class="btn btn-primary">登錄</button>
    </form>
</div>

效果圖：

創(chuàng)建橫向表格布局

在橫向格式中，布局標(biāo)簽右對(duì)齊并向左浮動(dòng)，使它們與表單控件顯示在同一行上。橫向表單布局需要在默認(rèn)表單布局中進(jìn)行各種標(biāo)記更改。以下就是實(shí)現(xiàn)橫向表單布局的具體操作步驟：

（1）為form元素添加.form-horizontal類(lèi)

（2）在div元素中實(shí)現(xiàn)包裝標(biāo)簽和表單控件并添加.form-group類(lèi)

（3）使用Bootstrap的預(yù)定義網(wǎng)格類(lèi)來(lái)對(duì)齊標(biāo)簽和表單控件

（4）在lable元素中添加.control-label到<label>類(lèi)

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用戶(hù)名</label>
            <div class="col-xs-10">
                <input type="username" class="form-control" id="inputName" placeholder="username" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">密碼</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox">記住密碼</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">登錄</button>
            </div>
        </div>
    </form>
</div>

效果圖：

創(chuàng)建內(nèi)聯(lián)表單布局

有時(shí)候在創(chuàng)建表單時(shí)需要并排放置表單控件用來(lái)壓縮布局。如果你想實(shí)現(xiàn)這個(gè)效果可以向form元素中添加form-inline類(lèi)。

<div style="margin: 30px;">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用戶(hù)名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">密碼</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">記住密碼</label>
        </div>
        <button type="submit" class="btn btn-primary">登錄</button>
    </form>
</div>

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享使用Bootstrap創(chuàng)建表單布局的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

標(biāo)題名稱(chēng)：使用Bootstrap創(chuàng)建表單布局的方法-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.rwnh.cn/article22/ddcicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)