トップページ >  Bootstrap >  Bootstrapのフォーム
初版2014/06/15: 最終更新日2014/06/15
  Bootstrapのフォーム
目次
Bootstrapのフォーム
フォームのサイズを変更する
Bootstrapのフォーム
Bootstrapのフォーム部品にform-controlクラスを追加すればレスポンシブデザインになります。
テキストボックスやテキストエリア、セレクトボックス、チェックボックスもform-controlクラスを付けるだけです。

<div class="container">
  <form>
    <fieldset>
      <legend>フォーム</legend>
      <label>テキストボックス</label>
      <input type="text" class="form-control"><br>
      
      <label>テキストエリア</label>
      <textarea class="form-control"></textarea><br>
      
      <label>セレクトボックス</label>
      <select class="form-control">
      <option>セレクト1</option>
      <option>セレクト2</option>
      </select>
      
      <label>チェックボックス</label>
      <input type="checkbox" class="form-control" value="1" checked="checked">
      <input type="checkbox" class="form-control" value="2">
      <input type="checkbox" class="form-control" value="3">
    </fieldset>
  </form>
</div>

フォームにレスポンシブデザインを適用したDEMOです。

フォームのサイズを変更する
Bootstrapのフォームはinput-lg,input-smをクラスに追加することによりサイズを大きくしたり小さくしたりすることが可能です。

<div class="container">
  <form>
    <fieldset>
      <legend>フォーム</legend>
      <label>テキストボックス</label>
      <input type="text" class="form-control input-lg"><br>
      
      <label>テキストエリア</label>
      <textarea class="form-control input-lg"></textarea><br>
      
      <label>セレクトボックス</label>
      <select class="form-control input-sm">
        <option>セレクト1</option>
        <option>セレクト2</option>
      </select>
      
      <label>チェックボックス</label>
      <input type="checkbox" class="form-control input-sm" value="1" checked="checked">
      <input type="checkbox" class="form-control" value="2">
      <input type="checkbox" class="form-control input-lg" value="3">
    </fieldset>
  </form>
</div>

フォーム部品のサイズを変更したDEMOです。