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>

オンラインフォームと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基础教程のフォーム部分です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。