bootstrap之 formgroup表單布局樣式


<form class="form-horizontal" role="form">
                    <fieldset>
                        <legend>配置數據源</legend>
                       <div class="form-group">
                          <label class="col-sm-2 control-label" for="ds_host">主機名</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/>
                          </div>
                          <label class="col-sm-2 control-label" for="ds_name">數據庫名</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_name" type="text" placeholder="msh"/>
                          </div>
                       </div>
                       <div class="form-group">
                          <label class="col-sm-2 control-label" for="ds_username">用戶名</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_username" type="text" placeholder="root"/>
                          </div>
                          <label class="col-sm-2 control-label" for="ds_password">密碼</label>
                          <div class="col-sm-4">
                             <input class="form-control" id="ds_password" type="password" placeholder="123456"/>
                          </div>
                       </div>
                    </fieldset>     
                    <fieldset>
                         <legend>選擇相關表</legend>
                        <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label">表名</label>
                           <div class="col-sm-10">
                              <select id="disabledSelect" class="form-control">
                                 <option>禁止選擇</option>
                                 <option>禁止選擇</option>
                              </select>
                           </div>
                        </div>
                    </fieldset>
                    
                       <fieldset>
                         <legend>字段名</legend>
                        <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label">表名</label>
                           <div class="col-sm-10">
                              <select id="disabledSelect" class="form-control">
                                 <option>禁止選擇</option>
                                 <option>禁止選擇</option>
                              </select>
                           </div>
                        </div>
                    </fieldset>
                </form>

  

效果圖:

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM