【BootStrap】コンポーネントまとめ

アラートコンポーネント

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」を指定します。

下記３つのサイズ設定もここで指定できます。

• 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

ナビゲーションの１つのリンクです。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要素です。