首頁  >  文章  >  web前端  >  如何使用Bootstrap建立表單佈局

如何使用Bootstrap建立表單佈局

清浅
清浅原創
2019-01-16 10:09:594510瀏覽

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

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

效果圖:


如何使用Bootstrap建立表單佈局

建立橫向表格佈局

在橫向格式中,佈局標籤右對齊並向左浮動,使它們與表單控制項顯示在同一行上。橫向表單佈局需要在預設表單佈局中進行各種標記變更。以下就是實作橫向表單佈局的具體操作步驟:

(1)為form元素新增.form-horizo​​ntal類別

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

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

(4)在lable元素中新增.control-label到

以上是如何使用Bootstrap建立表單佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn