一步一步學習Bootstrap系列--表單布局

前言：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剛好抵消占滿了整個屏幕

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