Bootstrap4のフォームコントロール(Form controls)

Bootstrap3では.form-control + .input-lg等でしたがBootstrapでは.form-control.form-control-lgnに変更された。

.input-{size} ⇒ .form-control-{size} に名称変更

テキストエリア

<input><select><textarea> のようなテキスト形式のコントロールは、.form-control クラスでスタイルを決める。

大きめ:.form-control  .form-control-lg

小さめ:.form-control  .form-control-sm

標準:.form-control

選択メニュー(Select menu)

カスタム <select> メニューはカスタムクラスのみを必要とし、.custom-select がカスタムスタイルに切り替える。

<select class="custom-select">
  <option selected>この選択メニューを開く</option>
  <option value="1">その1</option>
  <option value="2">その2</option>
  <option value="3">その3</option>
</select>

大きめ:.custom-select  .custom-select-lg

小さめ:.custom-select  .custom-select-sm

<select class="custom-select custom-select-lg">
  <option selected>この選択メニューを開く</option>
  <option value="1">その1</option>
  <option value="2">その2</option>
  <option value="3">その3</option>
</select>

 

コメント

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