Bootstrap入門（五）表單

Bootstrap入門（五）表單

 

先引入本地的CSS文件 

        

  <link href="css/bootstrap.min.css" rel="stylesheet">

一.內聯表單

單獨的表單控件會被自動賦予一些全局樣式。所有設置了  .form-control 類的  <input>、 <textarea> 和  <select> 元素都將被默認設置寬度屬性為  width: 100%;。

而內聯表單，要為  <form> 元素添加  .form-inline 類可使其內容左對齊並且表現為  inline-block 級別的控件。只適用於視口至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

 

需要手動設置寬度:

在 Bootstrap 中，輸入框和單選/多選框控件默認被設置為  width: 100%; 寬度。在內聯表單，我們將這些元素的寬度設置為  width: auto;，因此，多個控件可以排列在同一行。根據你的布局需求，可能需要一些額外的定制化組件。

 

一定要添加  label 標簽:

如果你沒有為每個輸入控件設置 label 標簽，屏幕閱讀器將無法正確識別。對於這些內聯表單，你可以通過為label 設置 .sr-only 類將其隱藏。

 

代碼操作（在chrome中運行，不同瀏覽器效果可能不同）：

先創建一個表單 

      

        <form role="form" class="form-inline">           
           ... 
        </form> 

在表單中，可以有文本，輸入框，選擇文件，button按鈕等，

 

1.日期。

先創建一個div，class為"form-group"，嘗試日期的選擇：

            

            <div class="form-group">
                <label>日期</label>
                <input type="date" class="form-control">
            </div>

點擊右側按鈕，效果：

 

2.輸入框

（placeholder =X，X為提示內容；type= Y，Y為輸入框應遵守的約束）：

設置兩個輸入框，一個是輸入郵箱，一個輸入密碼，一個提示“email ”，另一個提示“password ”

            

            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" placeholder="email">
                <label>Password</label>
                <input type="password" class="form-control" placeholder="password">
            </div>

 

提示效果：

 

輸入時遵守約束/違反約束時的效果（type="email" 的輸入框提示需要@符號，type="password" 的輸入框輸入內容變成點號）：

 

 

3.選擇文件 

            

            <div class="form-group">
                <label>選擇</label>
                <input type="file">
                <p class="help-block">選擇文件</p>
            </div> 

效果：

點擊“選擇文件”，選擇任意文件后，效果：

4.單選/多選框：

（不同的是，他的class是radio/checkbox） 

            

            <div class="radio">
                <label>
                    <input type="radio"> Check me out 1
                </label>
                <label>
                    <input type="radio"> Check me out2
                </label>
                <label>
                    <input type="radio"> Check me out3
                </label>
            </div>
            <br>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out 1
                </label>
                <label>
                    <input type="checkbox"> Check me out2
                </label>
                <label>
                    <input type="checkbox"> Check me out3
                </label>
            </div> 

 

效果：

 

選擇后效果：

 

 

二.水平表單

 

通過為表單添加  .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將  label 標簽和控件組水平並排布局。

 

代碼操作：

先創建一個class為“form-horizontal”的表單

        

        <form class="form-horizontal">
            ...
        </form>

 添加第一個內容

           

            <div class="form-group">
                <label>email</label>
                <input type='email' placeholder="email">
            </div>
 
            <div class="form-group">
                <label>password</label>
                <input type='password' placeholder="password">
            </div>

 

但是發現效果有點不對，部分內容被覆蓋掉了，如圖：

 

我們可以使用柵格來解決這個問題（Bootstrap入門（二）柵格 ），修改代碼為

            

           <div class="form-group">
                <label class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                    <input type='email' placeholder="email">
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-2 control-label">password</label>
                <div class="col-sm-10">
                <input type='password' placeholder="password">
                </div>
            </div>

得到的效果是：

 

 

同樣，可以對單/多選框，按鈕等都可以這樣進行處理，添加代碼：

            

            <div class="form-group">
                <div class='col-sm-offset-2 col-sm-10'>
                    <div class='checkbox'>
                        <label>
                            <input type='checkbox'>test
                        </label>
                    </div>
                </div>
            </div>
 
            <div class='form-group'>
                <div class='col-sm-offset-2 col-sm-10'>
                    <button type='submit' class="btn btn-default">test</button>
                </div>
            </div> 

得到

 

三.表單中的一些處理

有時候，我們希望禁止使用一些輸入框，可以添加“disabled ”

            

            <input type="text" class='form-control' placeholder="asd">
            <input type="text" class='form-control' placeholder="asd" disabled>
            <textarea class="form-control" rows='5'>ASD</textarea>

對比看到第二行變藍，無法再里面進行編輯，還有一個5行的文本框：

 

 

四.表單輸入框顏色

新建一個表單 

        

        <form role="form">
          ...
        </form> 

先新建幾個輸入框

         

         <form role="form">
            <div class="form-group">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
            <div class="form-group">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
            <div class="form-group">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
        </form>

效果：

 

 

修改/添加輸入框的class（添加has-warning /has-success/has-error 等）

         

         <form role="form">
             <div class="form-group has-warning">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
            <div class="form-group has-success">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
            <div class="form-group has-error">
                <label>test</label>
                <input class="form-control" type="text">
            </div>
        </form>

根據不同情況，輸入框有了不同的顏色效果：

 

 

如果想使用一些圖標，比如：

就要先把本地的css文件改為網絡地址

<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

 

新添加一個<span>來承載這個圖標，把class改為圖標的名字就行，比如： 

            

            <div class="form-group has-warning has-feedback">
                <label>test</label>
                <input class="form-control" type="text">
                <span class="glyphicon glyphicon-ok form-control-feedback" ></span>
            </div>

 

效果

 

組合其他 

             

         　 <div class="form-group has-success has-feedback">
                <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
            </div>

效果