アラートコンポーネント
alert alert-色
適切なアラートを表示できます。
alert-link
アラートにリンクのような装飾を施すことが可能です。背景色によってリンク文字列が見にくくなるのを防ぐことが可能です。
alert-heading
アラートの見出しを作れます。(アラート内に大きな文字で表示できます。)
アラートを消すための×ボタンを表示させる。
alert-sismissible
×ボタンを囲うdivに設置します。
fade show
×ボタンを囲うdivに設置します。×ボタンが押された際に残像付きでアラートを消します。
data-dismiss="alert"
divで囲われたbuttonに設置します。
バッジコンポーネント
適用できるHTMLタグ
- span
- a
テキストの横等に背景付きの小さな文字を表示させるために使います。spanタグに設定した場合はただのバッジですがaタグに設定した場合はリンク付きのバッジを生成することが可能です。
badge badge-背景色
バッジを作成します。なおバッジの文字色は背景色によって適切に見やすい色が自動で設定されます。
badge-形(pillやcircle等)
badgeの形を指定できます。丸型やカプセル型等があります。
ボタンコンポーネント
適用できるHTML要素
- a
- button
- input type="button"
- input type="submit"
- input type="reset"
btn btn-色
ボタンに色をつける。
btn btn-outline-色
背景色がなく枠線だけのボタンを表示させれます。マウスオーバーすると背景色が表示されます。
btn-sm
小さめのボタンを作成する。
btn-lg
大きめのボタンを作成する。
btn-block
親要素の幅全体に広がるブロックレベルの幅のボタンを作成する。
disabled
ボタンを非活性にする。
カードコンポーネント
文字や画像等をカード形式にまとめて表示することが可能なコンポーネントです。ショッピングサイトとかに使われているような画像と文字を並べた形式での表示に使われていたりします。
card
div要素で一番外側に用意します。
card-body
cardクラスの一階層下に定義します。
card-title
カードタイトル
card-subtitle
カードサブタイトル
card-text
カード本文
card-img-top
画像が入った要素です。
card-deck
cardを複数ラップして複数のカードを等間隔で並べます。2行表示させたい場合はcard-deckクラスを縦に二つ並べます。なお、576px以下になった場合はカードは縦に並べて表示されます。
カルーセルコンポーネント
画像を循環させるためのスライドショーコンポーネントです。ユーザーがスライドを操作できるコンポーネントに「インジゲータ」や「コントローラ」が用意されています。
carousel slide data-ride="carousel"
div要素に囲う一番外側の要素です。JavaScriptとの紐付けを意味する「data-ride="carousel"」を指定します。
carousel-inner
一つ内側のdiv要素になります。
carousel-item active
表示したい画像をラップするdivになります。一番初めに表示したい画像の場合はactiveを付けます。二番目以降の画像に関しては必要ありません。
carousel-control-prev href="リンク先(一番外側のdivに設定したID)" data-slide="prev"
aタグに追加します。ユーザーが前のスライドを表示させることができます。
carousel-control-next href="リンク先(一番外側のdivに設定したID)" data-slide="next"
aタグに追加します。ユーザーが次のスライドを表示させることができます。
carousel-control-prev-icon
span要素に追加します。
carousel-indicators
スライドの中にインジゲータを設定します。ol要素で設定します。
data-target="リンク先(一番外側のdivに設定したID)" data-slide-to="0から始まる数字"
ol要素内のli要素で設定します。なお、初めの要素にはactiveクラスを適用します。
ジャンボトロン
jumbotron
タイトルや画像を目立つように表示させることができるコンポーネントです。通常はWebサイトの上部に配置されます。containerクラスを適用したdivの内側のdivに適用します。
jumbotron jumbotron-fluid
横幅いっぱいに広がるジャンボトロンです。containerの外にこれを適用する必要があります。
メディアオブジェクト
Twitterやブログ画像のように左に画像、右に文章を配置するためのコンポーネントです。
media
一番外側のdiv要素です。
img要素
左に配置する画像です。左右を逆にすることは可能です。
media-body
右に配置する文章のdivです。左右を逆にすることは可能です。
align-self-start
imgに適用する。画像を縦に配置したい場合に使います。縦上部に配置。(デフォルトはこれです。)
align-self-center
imgに適用する。画像を縦に配置したい場合に使います。縦中央
align-self-end
imgに適用する。画像を縦に配置したい場合に使います。縦下部
list-unstyled
ul要素に適用しこの中にmedia要素を指定していきます。
モーダル
別ウインドウを開き閉じるまでは親ウインドウの操作ができなくなるという特性があります。
data-toggle="modal" data-target="紐付け先のモーダルHTML(CSSセレクタで指定)"
モーダルのJavaScriptとの紐付けを意味します。
modal fade
モーダルの一番外側のdivになります。fadeは効果を表しゆっくりモーダルを表示させます。
modal-dialog
div、デフォルトでは画面上部に表示されます。中央に表示させたい場合は「modal-dialog-centered」を指定します。
下記3つのサイズ設定もここで指定できます。
- modal-xl(横幅特大)
- modal-lg(横幅大)
- modal-sm(横幅小)
modal-content
div
modal-header
モーダルのヘッダーのdiv
modal-title
モーダルのタイトルです。
data-dismiss="modal"
モーダルと閉じるための×ボタンを配置することが多いです。modal-headerの中に定義します。
modal-body
モーダルのコンテンツのdiv
modal-footer
モーダルのフッターのdiv、主にボタンを配置することが多いです。(例えば、「閉じるボタン」や「保存ボタン等」
ナビゲーション
ナビゲーションバーを作れるコンポーネントです。下記二つのタグのどちらかで作れます。
- ul
- nav
nav
ulやnav等の一番外側のタグに指定するクラスです。
nav-tabs
タブ型ナビゲーションを実装できます。
nav-pills
アクティブ状態がカプセル型のナビゲーションを実装できます。
nav-item
ulを使う場合のli要素に指定します。navタグを使う場合は使いません。
nav-item dropdown
ナビゲーションにドロップダウンを組み込めます。
nav-link
ナビゲーションの1つのリンクです。activeを指定すれば最初の要素とすることができdisabledを指定すれば無効とすることができます。
ページネーション
検索結果表示画面で使われます。
pagination
ul要素に適用します。
page-item
li要素に適用します。表示中の番号にはactive、非活性にする場合はdisableを指定します。
page-link
aタグに指定します。前や次やページ番号のリンクを示します。
基本的な入力コントローラ
form-group
入力コントローラ単位(テキストボックスやセレクトボックス単位)にdiv要素で作成します。
form-control
input等の入力コントローラに指定します。各入力コントローラのフォーカス状態やサイズ等を統一させます。対応するlabel要素のfor属性の値とid属性の値を一致させる必要があります。forとidを紐づけることでラベル部分をクリックしたとしても入力コントロール部分にフォーカスを当てることが可能になります。
form-control-sm
入力コントローラを小さくできます。
form-control-lg
入力コントローラを大きくできます。
readonly
入力できない非活性の入力コントローラとすることが可能です。
チェックボックス/ラジオボタン
form-check
div要素、余白がついた見やすいチェックボックス/ラジオボタンになります。
form-check-inline
div要素、チェックボックス/ラジオボタンを横に並べます。
form-check-input
チェックボックス/ラジオボタンのinput要素、チェックボックスを使う場合は「type="checkbox"」、ラジオボタンを使う場合は「type="radio"」を同時に指定する必要があります。
form-check-label
チェックボックス/ラジオボタンのlabel要素
ヘルプテキスト
form-text
入力コントローラへの注意書きの役割を行うヘルプテキストを表します。input要素の下にこのクラスを適用したsmall要素を指定する必要があります。合わせてテキストをグレーにするようにtext-mutedあたりを指定するのがベターでしょう。
トグルスイッチ
custom-control custom-switch
トグルスイッチを使うために必要な一番外側のdiv要素に指定します。
custom-control-input
トグルスイッチのinput要素です。
custom-control-label
トグルスイッチのlabel要素です。
この記事へのコメントはありません。