如何使用Bootstrap建立表單佈局

Bootstrap中提供了三種類型的表單佈局：垂直表單、橫向表單以及內聯表單；它們透過外部引入Bootstrap中的JavaScript和CSS檔案以及在元素中新增類別名稱來設定表單控制項

HTML表單是網頁和應用程式中不可或缺的一部分，但是僅使用CSS來逐個手動設定表單控制項的方式通常很麻煩且枯燥乏味。如今隨著bootstrap的出現大大簡化了表單控制項例如表單中的標籤，輸入字段，選擇框以及提交框等樣式和對齊過程。接下來在文章中將為大家詳細介紹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表單佈局，其中樣式應用於表單控件，而不會向

元素添加任何基類或標記中的任何大的更改。

此佈局中的表單控制項在頂部堆疊有左對齊標籤

例：

<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-horizo​​ntal類別

（2）在div元素中實作包裝標籤和表單控制項並新增.form-group類別

（3）使用Bootstrap的預定義網格類別來對齊標籤和表單控制項

（4）在lable元素中新增.control-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="max-width:90%">
    <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建立表單佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！