メディアオブジェクト

基本構成

• 外枠 div.media
  • サムネール画像 img 属性
    • クラス .mr-3 (右側の本文との間に1remの間隔を確保 ⇒ 空白ユーティリティ)
    • 属性 href="..."
    • 属性 alt="..."
  • ヘッダ + 本文 div.media-body
    • ヘッダ h5
      • テキスト Media heading
    • 本文 Lorem ipsum ...

ネスト

div.media-body の子として div.media をネストして配置できる。

2重ネストの例

3重ネスト(以下何重でもOK)

アラインメント

Flexboxユーティリティの .align-self(start|center|end) を用いる。次は img の配置例(枠に確認用のボーダーを追加)。

img.align-self-start

img.align-self-center

img.align-self-end

コンテンツの順序

(1) 要素の順序を変更して img を最後にすると右配置になる

(2) Flexboxユーティリティの .order-* を使い順序を入れ替えても同じことができる

リスト要素を用いる場合

ul ( ol でも同じ)を用いた例

• 

  Media heading (1)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• 

  Media heading (2)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• 

  Media heading (3)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• ul.list-unstyled
  • .list-unstyled で先頭シンボルを非表示(⇒ リストのデフォルト書式解除)
  • アイテム(個数分) li.media.my-3
    • .my-3 は上下マージン調整(⇒ 空白ユーティリティ)
    • 以下基本構成の内部と同様

モーダル

モーダルの構成要素

表示サンプル: 常時表示するように変更したもの(通常の初期状態は非表示)

構造

• 外枠 div.modal.fade 属性
  • クラス .fade - アニメーション効果用(外すと起動時にスライドしない)
  • 属性 id="{モーダルID}" (起動用に必要)
  • 属性 tabindex="-1" (キーフォーカスから外す)
  • アクセシビリティ属性 role="dialog"
  • アクセシビリティ属性 aria-labelledby="{ラベルID}"
  • アクセシビリティ属性 aria-hidden="true"
  • 本体 div.modal-dialog 属性
    • アクセシビリティ属性 role="document"
    • コンテント div.modal-content
      • ヘッダ div.modal-header
        • タイトル h5.modal-title 属性
          • (アクセシビリティ用)属性 id="{ラベルID}"
          • テキスト Modal title
        • 右上クローズボタン button.close 属性
          • 属性 type="button"
          • 属性 data-dismiss="modal"
          • アクセシビリティ属性 aria-label="Close"
          • ボタンシンボル span 属性
            • アクセシビリティ属性 aria-hidden="true"
            • テキスト ×
      • ボディ div.modal-body
        • (例: 上記サンプルの場合) p
          • テキスト Modal body text goes here.
      • フッタ div.modal-footer
        • Closeボタン button.btn.btn-secondary 属性
          • 属性 type="button"
          • 属性 data-dismiss="modal"
          • テキストClose
        • 用途により追加ボタン(例: 上記サンプルの場合) button.btn.btn-primary 属性
          • 属性 type="button"
          • テキスト Save changes

モーダルの起動

モーダルはボタンを使って起動できる。起動ボタンの基本構成は次の通り。

• button.btn.btn-primary : 表示設定は何でもよいが、次の属性が必須
  • 属性 type="button"
  • 属性 data-toggle="modal"
  • 属性 data-target="#{モーダルID}"
  • テキスト(例) Launch demo modal

次のボタンを押すとページが暗転し、モーダルが上からスライドする。

Launch demo modal

動作のポイント(まとめ)

• 背後の元ページを暗転するため全画面を半透明要素(バックドロップ)で覆う(z-indexは 1040 )
• その上にモーダルを中央上揃えで表示する(Z-indexは 1050 )
• .fade を付けると上からスライド(CSSアニメーション)して表示
• 表示中はキーボードフォーカスやタブストップはモーダルのみが受ける
• スクロールバーのスクロール動作もモーダルが受ける(次に例を示す)
• 次のいずれかでクローズして元に戻る
• クローズボタン(右上シンボル × または右下 Close ボタン)をクリック
• モーダル外部の背景(バックドロップ)をクリック
• Esc キー入力

モーダルの縦スクロール

モーダルの高さが表示デバイスより大きい場合はスクロールバーを表示する。この時スクロール対象はモーダルに設定され、元ページはスクロールせずモーダルだけ縦スクロールする。次のデモを起動すると確認できる。

Launch demo modal

画面中央への表示

デフォルトは中央上揃えだが、本体 div.modal-dialog に .modal-dialog-centered を追加すると画面中央揃えで表示する。

Launch demo modal

ツールチップとポップオーバー

ボディ内部ではほとんどの機能を利用できる。次は内部にツールチップとポップオーバーを用いた例。

Launch demo modal

グリッド

モーダルボディにグリッドを用いた例。

Launch demo modal

起動時のコンテント更新

同じモーダルの起動時に起動ボタンの情報を読んで表示を変える例(要JavaScript)。

JavaScriptコード

$('#examplemodal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget);
  var recipient = button.data('whatever');
  var modal = $(this);
  modal.find('.modal-title').text('New message to ' + recipient);
  modal.find('.modal-body input').val(recipient);
});

• 起動ボタンに次の属性を設定(例): data-whatever="@mdo"
• JavaScript(jQuery)で起動イベント show.bs.modal を検出(⇒ Events ): 次の2つの違いに注意
  • show.bs.modal 起動(ボタンクリック)時: まだ表示前(こちらを使用)
  • shown.bs.modal モーダル表示の完了時
• 起動ボタン( event.relatedTarget )から属性 data-whatever を読み取る
• 読み取った値をタイトルと input 要素に設定

サイズ指定

div.modal-dialog.modal-(xl|lg|sm) を用いる。

Extra large modal Large modal Default modal Small modal