前言：Bootstrap 屬于前端 ui 庫，通過現成的ui組件能夠迅速搭建前端頁面，簡直是我們后端開發的福音，通過幾個項目的鍛煉有必要總結些常用的知識，本篇把常用的Bootstrap表單布局進行歸納

Bootstrap 提供了下列類型的表單布局：

• 垂直表單（默認）
• 內聯表單
• 水平表單

基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟：

• 向父 <form> 元素添加?role="form"。
• 把標簽和控件放在一個帶有 class?.form-group?的 <div> 中。這是獲取最佳間距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class?.form-control。

Bootstrap中文網：http://www.bootcss.com/

一、效果預覽

二、垂直表單（默認表單）

代碼如下：

<div><div class="form-group"><label class="control-label">名稱</label><input class="form-control" type="text" placeholder="請輸入用戶名" /></div><div class="form-group"><label class="control-label">密碼</label><input class="form-control" type="password" placeholder="請輸入密碼" /></div><div class="form-group"><div class="checkbox"><label><input type="checkbox"> 請打勾</label></div></div><div class="form-group"><button type="button" class="btn btn-default">提交</button></div></div>

效果：

這種表單不用給form（本文先用DIV代替）添加任何class通過.from-control設置width為100%所以一個控件占滿了一行

三、內聯表單

代碼如下：

<div class="form-inline"><div class="form-group"><label class="sr-only">名稱</label><input style="width:200px" class="form-control" type="text" placeholder="請輸入用戶名" /></div><div class="form-group"><label class="sr-only">密碼</label><input class="form-control" type="password" placeholder="請輸入密碼" /></div><div class="checkbox"><label><input type="checkbox"> 記住密碼</label></div><button type="button" class="btn btn-default">提交</button></div>

效果：

這種表單的布局是內聯樣式就是所有控件都在同一行，在項目開發過程中一半用于快速查詢的環境下，如果想改變控件的長度也是容易做到的，當前樣式控件width為auto可以用style控制或者在form-group中設置，值得一提的是當lable想隱藏可以

使用.sr-only樣式

四、水平表單

代碼：

<div class="form-horizontal"><div class="form-group"><label class="control-label col-sm-1">名稱</label><div class="col-sm-5"><input class="form-control" type="text" placeholder="請輸入用戶名" /></div><label class="control-label col-sm-1">密碼</label><div class="col-sm-5"><input class="form-control" type="password" placeholder="請輸入密碼" /></div></div><div class="form-group"><label class="control-label col-sm-1 sr-only">名稱</label><div class="col-sm-5"><div class="checkbox"><label><input type="checkbox"> 請打勾</label></div></div></div><div class="form-group"><div class="col-sm-offset-7 col-sm-6"><button type="button" class="btn btn-default">提交</button></div></div></div>

這種布局方式是最常用的一種，在開發中廣泛應用并且支持各種設備自適應，可以根據需求選擇不同的表單布局方式

五、Bootstrap要點

? ? ??使用bootstrap對前端頁面的布局，container、row、col-xs-4等css樣式的使用，使網頁的布局更漂亮，值得一提的而是在使用container容器時，給內容一個15的內邊距，此時如果想布局的合理需要給內容一個.row樣式，在谷歌瀏覽器下我們可以看見

.container的 padding-left：15px 、 padding-right:15px ? ?和 ? .row的 margin-left:-15px 、margin-right:-15px剛好抵消占滿了整個屏幕

所以在實際項目開發中二者都嵌套使用。

?

轉載于:https://www.cnblogs.com/CallmeYhz/p/5608167.html

總結

以上是生活随笔為你收集整理的一步一步学习Bootstrap系列--表单布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。