使用Bootstrap創(chuàng)建表單布局的方法-創(chuàng)新互聯(lián)

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

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

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

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

在Bootstrap中提供了三種不同類型的表單布局：

• 垂直表單（默認表格布局）

• 橫向表單

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

接下來在文章中將和大家逐一詳細介紹這些表單布局以及各種與表單相關(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)建垂直表單布局

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

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

例：

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用戶名</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)簽右對齊并向左浮動，使它們與表單控件顯示在同一行上。橫向表單布局需要在默認表單布局中進行各種標(biāo)記更改。以下就是實現(xiàn)橫向表單布局的具體操作步驟：

（1）為form元素添加.form-horizontal類

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

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

（4）在lable元素中添加.control-label到<label>類

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用戶名</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)表單布局

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

<div style="margin: 30px;">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用戶名</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>

效果圖：

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

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

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

廣告

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