Bootstrapフォーム要素で使用するクラスまとめ一覧

Webプログラミング

Bootstrapフォームカスタマイズ

フォームの基本的な配置【form-control】【btn】【form-text】

フォームの説明部分(テキスト入力)
<div class="form-group">
    <label for="text">テキスト入力</label>
    <input type="text" class="form-control" id="text">
    <small class="form-text">フォームの説明部分(テキスト入力)</small>
    <input type="submit" class="btn">
</div>

入力欄に【form-control】クラス、「small」タグに 【form-text】 を設定することでBootstrapの装飾が適用される。

「input」タグの「type」が「submit」に 【btn】クラスでBootstrapが適用される。

全体的にマルビを帯びて、paddingが広く設定されている。

【form-control】クラスを設定できる要素

【form-cotrol】が設定できるタグ一覧

input[type]:【text】【email】【password】【number】【date】【time】【color】

タグ:【textarea】【select

disabled

<input type="text" class="form-control">
<input type="text" class="form-control" disabled>

【disabled】を設定すると入力不可の状態にすることもできる。

<input type="email" class="form-control">
<input type="password" class="form-control">
<input type="number" class="form-control">
<input type="date" class="form-control">
<input type="time" class="form-control">
<input type="color" class="form-control">

<textarea class="form-control"></textarea>

<select class="form-control">
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<select class="form-control" size="2">
 <option value="1">1</option>
 <option value="2">2</option>
</select>

「select」タグは「size」を設定することで表示する選択肢の数を調整可能。

要素を横並びにする【form-inline】

<form class="form-inline">
 <input type="text" class="form-control" placeholder="text">
 <input type="email" class="form-control" placeholder="email">
 <input type="password" class="form-control" placeholder="password">
 <input type="number" class="form-control" placeholder="number">
</form>

「form」タグに【form-inline】クラスをつける。

チェックボックスとラジオボタンに使用するクラス

見出し
  • グループ:【form-check】
  • ラベル:【form-check-label】
  • コントロール(入力部分、input):【form-check-input】
  • 表示をインライン化:【form-check-inline】

<div class="form-check">
 <label for="" class="form-check-label">
   <input type="checkbox" class="form-check-input">check1
  </label>
</div>

<div class="form-check">
 <label for="" class="form-check-label">
   <input type="radio" class="form-check-input">radio1
  </label>
</div>

form-check】クラスをつけたタグに【form-check-inline】クラスをつけると、コントロール部分がインライン要素になる。

check1
check2
check3
<form>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="from-check-input">check1
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="from-check-input">check2
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="from-check-input">check3
    </div>
</form>

clearfix】 クラスの要素を間に入れると、インラインをリセットできる。

check1
check2
radio1
<form>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="from-check-input">check1
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="from-check-input">check2
    </div>
    <div class="clearfix"></div>
    <div class="form-check form-check-inline">
        <input type="radio" class="from-check-input">radio1
    </div>
</form>

サイズ変更【form-control-{大きさ}】【btn-{大きさ}】

form-control-lgコントロール(入力部分)大きく表示
form-control-sm コントロール(入力部分) 小さく表示
btn-lgボタンを大きく
btn-smボタンを小さく
btn-blockボタンをブロック化
<input type="text" class="form-control">

<input type="text" class="form-control form-control-lg">

<input type="text" class="form-control form-control-sm">

<input type="submit" class="btn btn-primary">

<input type="submit" class="btn btn-lg">

<input type="submit" class="btn btn-sm">

<input type="submit" class="btn btn-sm">

フォーム内のレイアウト【form-row】【col-{大きさ}】【input-group】

<form>
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control">
        </div>
        <div class="col">
            <input type="email" class="form-control">
        </div>
    </div>
    <div class="form-row">
        <div class="col">
            <input type="password" class="form-control">
        </div>
        <div class="col">
            <input type="number" class="form-control">
        </div>
    </div>
</form>

col】でコラムの幅を設定する時は【form-group】クラスを設定位しているのと同じタグに設定する。

<form>
  <div class="form-row">
    <div class="col-6 form-group">
      <input type="text" class="form-control" placeholder="text">
    </div>
    <div class="col-3 form-group">
      <input type="email" class="form-control" placeholder="email">
    </div>
    <div class="col-3 form-group">
      <input type="password" class="form-control" placeholder="password">
    </div>
  </div>
</form>

ラベルとフィールド【input-group

input-group】を設定すると、ラベルとコントロール(入力部分)がひとつのグループになる。

ラベルとコントロールの縦の位置がずれるので【aling-items-center】を設定して上下のズレをなおす。

Text
Email
<div class="form-row">
    <div class="col-6 input-group align-items-center">
        <div class="mx-2">Text</div>
        <input type="text" class="form-control" placeholder="text">
    </div>
    <div class="col-6 input-group align-items-center">
        <div class="mx-2">Email</div>
        <input type="email" class="form-control" placeholder="email">
    </div>
</div>
上下揃えのクラス
align-items-top上揃え
align-items-center中央揃え
align-items-bottom下揃え

ラベルとフィールドの一体化【input-prepend】【input-group-text

input-prepend】クラスで一体化可能。ラベル部分に【input-group-text】クラスをつける。

Text
Email
<div class="form-row">
        <div class="col-6 input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Text</span>
                <input type="text" class="form-control" placeholder="text">
            </div>
        </div>
        <div class="col-6 input-group">
            <div class="input-group-prepend">
                <div class="input-group-text">Email</div>
                <input type="email" class="form-control" placeholder="email">
            </div>
        </div>
</div>

aling-items-center】は設定していない。

デバイス毎の表示の違いを統一化(カスタムコントロール)

ブラウザによる表示の違いをBootstrapの表示で統一する。

「select」タグのカスタム表示【custom-select

<select class="custom-select">
 <option value="1">1</option>
 <option value="2">2</option>
</select>

チェックボックスとラジオボタンのカスタム表示

基本はカスタムクラス【custom-control】の「div」に「input」と「label」タグを中に組み込む。

親要素のタグ(div)custom-control
inputタグcustom-control-input
labelタグcustom-control-label
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <label class="custom-control-label">check1</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input">
    <label class="custom-control-label">radio1</label>
</div>

まとめ

フォームクラス一覧
  • form-control】
  • 【btn】
  • 【form-text】
  • 【form-inline】
  • 【form-check】
  • 【form-check-label】
  • 【form-check-input】
  • 【form-check-inline】
  • clearfix】
  • 【form-control-{大きさ}】
  • 【btn-{大きさ}】
  • 【form-row】
  • 【input-group】
  • 【aling-items-{ポジション}】
  • 【input-prepend】
  • 【input-group-text】
  • 【custom-select】
  • 【custom-control】
  • custom-control-input】
  • 【custom-control-label】

タイトルとURLをコピーしました