#8 Bootstrapの各機能まとめ1

Bootstrapを機能毎にまとめて行きます。
今回は第一弾としてBackground、Visually hidden、Form controlsの3つをまとめて行きます。

1. Background

1. bg-

bg-XXXX と指定することで背景色を変更できます。例. bg-primary：青背景

html

<div class="bg-primary"></div>

2. bg-gradient

bg-gradientを以下のようにHTML、CSSファイルに追加することにより、線形グラデーションが背景画像として背景に追加されます

html

<div class="bg-primary bg-gradient"></div>

css

.bg-gradient {
    background-image: var(--bs-gradient)!important;
}

※ 分かりづらいですが変わっています

2. Visually hidden

1. visually-hidden, visulally-hidden-focusable

visually-hiddenは要素を視覚的に隠すことができます。補助技術 (画像読み上げソフトウェア) などに用いられる
visually-hidden-focusableはデフォルトでは要素を視覚的に非表示にすることができるが、フォーカスされたときに表示できる

html

<div class="visually-hidden">ここの内容が消える</div>
<div class="visually-hidden-focusable">ここの内容が消える</div>

css

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}

3. Form controls

1. form-control

＜input＞や＜textarea＞に、カスタムスタイル、サイズ調整、フォーカス状態などを自動で設定する
また、末尾に-lg, -smを付けることで高さを調節することができる。

html

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

2. disabled, readonly

disabled、readonlyという属性を追加することでinput, textareaへの書き込みができなくなる。この2つの違いとして、disabledはボックスの選択すらできなくなってしまうが、readonlyはボックスを選択することは可能

html

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

3. File input

html

<input class="form-control" type="file" id="formFile">

4. Detalists

データリストでは、＜input>＞の中から自動補完できる＜option>＞のグループを作成することができる。

html

<input class="form-control" list="datalistOptions"">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>