Bootstarp 基礎教程之表單部分執行個體代碼，bootstarp基礎教程

Bootstarp 基礎教程之表單部分執行個體代碼，bootstarp基礎教程

參考：BootStrap中的表單大全

bootstrap 表單部分，具體代碼如下所示：

<div class="container">  <form action="#" method="post">    <fieldset>      <legend>使用者登陸</legend>      <div class="form-group">        <label>使用者名稱：</label>        <input type="text" class="form-control" name="name" placeholder="使用者名稱">      </div>      <div class="form-group">        <label>密碼：</label>        <input type="password" class="form-control" name="pwd" placeholder="密碼">        <!--form-control代表的是佔滿容器-->      </div>      <div class="checkbox">        <label><input type="checkbox">記住密碼</label>      </div>      <!--多選框必須這麼寫 不然會造成選框與文本重疊的問題-->      <div class="form-group">        <button type="submit" class="btn btn-default">提交</button>      </div>    </fieldset>  </form></div>

inline表單與label隱藏

<div class="container">  <form action="#" method="post" class="form-inline">    <!--form-inline讓表單橫向放置-->    <fieldset>      <legend>使用者登陸</legend>      <div class="form-group">        <label class="sr-only">使用者名稱：</label>        <!--sr-only讓label隱藏-->        <input type="text" class="form-control" name="name" placeholder="使用者名稱">      </div>      <div class="form-group">        <label>密碼：</label>        <input type="password" class="form-control" name="pwd" placeholder="密碼">        <!--form-control代表的是佔滿容器-->      </div>      <div class="checkbox">        <label><input type="checkbox">記住密碼</label>      </div>      <!--多選框必須這麼寫 不然會造成選框與文本重疊的問題-->      <div class="form-group">        <button type="submit" class="btn btn-default">提交</button>      </div>    </fieldset>  </form></div>

把label和input放在同一行內的方法

<div class="container">  <form action="#" method="post" class="form-horizontal">    <!--form-horizontal讓表單初始化-->    <fieldset>      <legend>使用者登陸</legend>      <div class="form-group">        <label class="col-xs-3 control-label">使用者名稱：</label>        <!--藉助柵格系統設定label的寬度-->        <div class="col-xs-9">          <input type="text" class="form-control" name="name" placeholder="使用者名稱">        </div>        <!--用div設定柵格並包裹input-->      </div>  </form></div><!--注意！把label和input放在同一行在768解析度一下是有問題的 在md和lg上正常-->

小表徵圖的添加

<div class="container">  <form action="#" method="post" class="form-horizontal">    <!--form-horizontal讓表單初始化-->    <fieldset>      <legend>使用者登陸</legend>      <div class="form-group has-feedback has-success">        <!--在項目的div外包圍class加has-feedback-->        <label class="col-xs-3 control-label">使用者名稱：</label>        <div class="col-xs-9">          <input type="text" class="form-control" name="name" placeholder="使用者名稱">          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>          <!--在input之下添加一個span 記得加form-c-f-->        </div>      </div>  </form></div>

一堆按鈕組件

<div class="container">  <div class="btn-toolbar">    <div class="btn-group">      <button class="btn btn-success"><span class="glyphicon glyphicon-star"></span></button>      <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button>      <button class="btn btn-danger"><span class="glyphicon glyphicon-star"></span></button>      <button class="btn btn-default"><span class="glyphicon glyphicon-star"></span></button>    </div>  </div></div>

不要強行去做一個按鈕分離 因為這是一組 中間的按鈕不是圓角的

搜尋方塊

<div class="col-md-4 col-md-offset-2">  <div class="input-group input-lg">    <div class="input-group-addon">      <a href=""><span class="glyphicon glyphicon-star"></span></a>    </div>      <input type="text" class="form-control input-xs">    </div>  </div></div>

以上所述是小編給大家介紹的Bootstarp 基礎教程之表單部分，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！