<form>
        <div class="form-group">
            <label for="username">用戶名</label>
            <
 
input type="text" id="username" placeholder="請輸入用戶名"  class="form-control" >
        </div>

        <div class="form-group">
            <label for="passwd">密碼</label>
            <input type="text" id="passwd" placeholder="請輸入密碼"  class="form-control" >
        </div
 
>

        <div class="form-group">
            <label for="email">郵件地址</label>
            <input type="email" class="form-control" id="email" placeholder="請輸入郵箱">
        </div>
        <div class="form-group">
            <input type="submit" value="提交"  class
 
="btn btn-primary">
        </div>
    </form>

結果如下圖，註意：

1. label中的for屬性作用： 當鼠標點擊該label時，鼠標光標會移動到id等於該for的值的元素中。

2.將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

2.內聯表單

• 為 <form> 元素添加 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
• 修改上述例子的代碼，只修改如下部分：

 <form class="form-inline">

• 結果如下圖。

• 請註意：

3. 水平排列的表單

• 通過為表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平並排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用戶名</label>
            <div class="col-sm-10 " >
                <input type="text" id="username" placeholder="請輸入用戶名"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="passwd" class="col-sm-2 control-label">密碼</label>
            <div class="col-sm-10 " >
                <input type="text" id="passwd" placeholder="請輸入密碼"  class="form-control" >
            </div>
        </div>

        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">郵件地址</label>
            <div class="col-sm-10 " >
               <input type="email" class="form-control" id="email" placeholder="請輸入郵箱">
             </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">    記住我
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="提交"  class="btn btn-primary">
            </div>
        </div>

    </form>

• 結果如下圖，註意：

1. 這裏用到了 col-sm 柵格系統，後面章節會重點講解，而 control-label 表示和 父元素樣式同步。

2. input 標簽不能直接寫 col-sm-10 樣式，必須外面加一層div。
3. control-label的文本采用右對齊方式，加載label標簽中，使得布局更合理。