初學 Bootstrap 表單

ㅤㅤ發表於2018-10-23
boot
<div class="container">
    <form action="#" method="post">
        <fieldset>
            <legend>使用者登入</legend>
            <div class="form-group">
                <label for="username">使用者名稱:</label>
                <input type="text" class="form-control" name="username" id="username" placeholder="輸入手機號或郵箱">
            </div>
            <div class="form-group">
                <label for="password">密碼:</label>
                <input type="password" class="form-control" name="password" id="password" placeholder="輸入密碼">
            </div>
            <div class="checkbox">
                <label><input type="checkbox">記住密碼</label>
            </div>
            <button type="submit" class="btn btn-info">登陸</button>
        </fieldset>
    </form>
</div>

file
注意,隨著瀏覽器寬度的改變,表單會自適應的改變大小.
這裡用到的兩個類值得注意一下.

.form-control {
  display: block;
  width: 100%;
  border-radius: 4px;
  }
.form-group {
  margin-bottom: 15px;
}

給 <form> 新增一個 .form-inline 可以將表單中的元素變成內聯塊.

<div class="container">
    <form action="#" method="post" class="form-inline">
        <fieldset>
            <legend>使用者登入</legend>
            <div class="form-group">
                <label for="username">使用者名稱:</label>
                <input type="text" class="form-control" name="username" id="username" placeholder="輸入手機號或郵箱">
            </div>
            <div class="form-group">
                <label for="password">密碼:</label>
                <input type="password" class="form-control" name="password" id="password" placeholder="輸入密碼">
            </div>
            <div class="checkbox">
                <label><input type="checkbox">記住密碼</label>
            </div>
            <button type="submit" class="btn btn-info">登陸</button>
        </fieldset>
    </form>
</div>

file
file
在上面兩個圖中,當螢幕寬度小於等於767 px的時候,表單又堆疊起來了.

給表單新增 .form-horizontal 類樣式,並結合柵格系統,可以使表單變成橫向表單.

<div class="container">
    <form action="#" method="post" class="form-horizontal">
        <fieldset>
            <legend>使用者登入</legend>
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">使用者名稱:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="username" id="username" placeholder="輸入手機號或郵箱">
                </div>

            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密碼:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" name="password" id="password" placeholder="輸入密碼">
                </div>
            </div>
            <div class="form-group">
                <div class="checkbox col-sm-10 col-sm-offset-2">
                    <label><input type="checkbox">記住密碼</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="submit" class="btn btn-info">登陸</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

file
在上面這個例子中,只有螢幕寬度大於等於768 px的時候才會生效,要注意的是:

  • .form-group 修飾的div充當了柵格系統裡的行
  • .col-sm-2 修飾的label充當了柵格系統中的列
  • .control-label 修飾的label中的文字會右對齊
  • <input> 標籤需要放到一個 .col-sm-10 修飾的div中,該div充當了柵系統中的列,對於單選框和按鈕也需要這樣做

常用的控制元件

常用的控制元件比較簡單,就放在一起記錄了.
要注意幾個點:

  • 輸入框和文字域以及下拉選單控制元件都可以新增 form-control 類樣式,這個類樣式除了會改變一些顏色以及字型大小外,重要的是會將標籤的寬度設定為 100% ,會加上一個4px 的圓角,還會把元素變成塊級元素
  • 單選框和多選框,要將其包裹在 <label> 標籤內,再包裹在帶有 .checkbox 或者 .radio 類樣式的 <div> 中
<div class="container">
    <input type="text" class="form-control">
    <textarea rows="4" class="form-control"></textarea>
    <select class="form-control">
        <option value="">1</option>
        <option value="">3</option>
        <option value="">4</option>
    </select>
    <div class="checkbox">
        <label><input type="checkbox">男</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox">女</label>
    </div>
    <hr>
    <div class="radio">
        <label><input type="radio" name="test">亞洲</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="test">非洲</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="test">歐洲</label>
    </div>
</div>

file

內聯單選框或者多選框

比較簡單,注意一下,這裡不需要用 <div> 來包裹了,另外還要在 <label> 標籤上加上 .checkbox-inline 或者 .radio-inline 類樣式.

<div class="container">
    <label class="checkbox-inline"><input type="checkbox">男</label>
    <label  class="checkbox-inline"><input type="checkbox">女</label>
    <hr>
    <label class="radio-inline"><input type="radio" name="test">亞洲</label>
    <label class="radio-inline"><input type="radio" name="test">非洲</label>
    <label class="radio-inline"><input type="radio" name="test">歐洲</label>
</div>

file

如果需要在表單中將一行純文字和 label 元素放置於同一行,為 <p> 元素新增 .form-control-static 類即可.不過要在橫向表單中才有意義,並且螢幕寬度要大於等於 768 px.

<div class="container">
    <form action="#" method="post" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">使用者名稱:</label>
            <div class="col-md-10">
                <p class="form-control-static">admin</p>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密碼:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="password" placeholder="輸入密碼">
            </div>
        </div>
    </form>
</div>

file

提供了3個類供使用,用法比較簡單,將其新增到包裹這些控制元件的父 <div> 標籤中即可,會改變這些控制元件的顏色.

  • .has-warning
  • .has-error
  • .has-success
<div class="container">
    <form action="#" method="post" class="form-horizontal">
        <div class="form-group has-warning">
            <label for="password" class="col-sm-2 control-label">密碼:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="password" placeholder="輸入密碼">
            </div>
        </div>
    </form>
</div>

file

給輸入控制元件新增 .input-sm .input-lg 類,可以將輸入控制元件的高度變小或者變大,比較簡單.例如下面這個

<input type="password" class="form-control input-lg" placeholder="輸入密碼">

針對橫向表單,由於標籤和空間是以表單組的形式存在的,如果要改變它們的大小,需要使用 form-group-lg form-group-sm 類樣式,例如

<div class="form-group form-group-lg">
    <label for="password" class="col-sm-2 control-label">密碼:</label>
    <div class="col-sm-10">
        <input type="password" class="form-control input-lg" id="password" placeholder="輸入密碼">
    </div>
</div>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章