使用Bootstrap創(chuàng)建表單布局的方法

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

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

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

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

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

• 橫向表單

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

接下來在文章中將和大家逐一詳細(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>元素添加任何基類或標(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)簽右對齊并向左浮動，使它們與表單控件顯示在同一行上。橫向表單布局需要在默認(rèn)表單布局中進(jìn)行各種標(biāo)記更改。以下就是實(shí)現(xiàn)橫向表單布局的具體操作步驟：

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

（2）在div元素中實(shí)現(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)建表單時需要并排放置表單控件用來壓縮布局。如果你想實(shí)現(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>

效果圖：

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