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

目前創新互聯建站已為上千家的企業提供了網站建設、域名、網絡空間、網站改版維護、企業網站設計、北安網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

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

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

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

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

• 橫向表單

• 內聯表單

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

創建垂直表單布局

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

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

例：

<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>

效果圖：

創建橫向表格布局

在橫向格式中，布局標簽右對齊并向左浮動，使它們與表單控件顯示在同一行上。橫向表單布局需要在默認表單布局中進行各種標記更改。以下就是實現橫向表單布局的具體操作步驟：

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

（2）在div元素中實現包裝標簽和表單控件并添加.form-group類

（3）使用Bootstrap的預定義網格類來對齊標簽和表單控件

（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>

效果圖：

創建內聯表單布局

有時候在創建表單時需要并排放置表單控件用來壓縮布局。如果你想實現這個效果可以向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創建表單布局的方法內容對大家有幫助，同時也希望大家多多支持創新互聯建站，關注創新互聯網站制作公司行業資訊頻道，遇到問題就找創新互聯建站，詳細的解決方法等著你來學習!

標題名稱：使用Bootstrap創建表單布局的方法-創新互聯
文章轉載：http://www.yijiale78.com/article22/ddcicc.html

成都網站建設公司_創新互聯，為您提供商城網站、網站營銷、網站設計、定制開發、關鍵詞優化、網站制作

廣告

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