Bootstrap 4 tutorial

コンポーネント(4): カルーセル / 折り畳み / ドロップダウン

カルーセル

基本構成(自動スライドのみ)

構造

カルーセル(外側) div.carousel.slide 属性
- 属性 data-ride="carousel" で自動スライド(除去するとコントロール移動のみ)
- カルーセル(内側) div.carousel-inner
  - アイテムは表示順に div.carousel-item 属性
    - 最初に表示するアイテムに .active を設定(ひとつだけ)
    - (オプション) data-interval="{msec}" でスライド表示時間を設定可能
    - スライド画像 img.d-block.w-100 属性
      - 属性 src="..."

前後コントロールの追加

構造

カルーセル(外側) div.carousel.slide 属性
- 属性 id="{カルーセルID}" を設定
- カルーセル(内側) div.carousel-inner は基本構成と同じ
- 前移動ボタン a.carousel-control-prev 属性
  - 属性 href="#{carousel-id}"
  - 属性 data-slide="prev"
  - アイコン span.carousel-control-prev-icon 属性
    - アクセシビリティ属性 aria-hidden="true"
  - アクセシビリティ要素 span.sr-only
    - テキスト Previous
- 後移動ボタン a.carousel-control-next 属性
  - 属性 href="#{carousel-id}"
  - 属性 data-slide="next"
  - アイコン span.carousel-control-next-icon 属性
    - アクセシビリティ属性 aria-hidden="true"
  - アクセシビリティ要素 span.sr-only
    - テキスト Next

インジケータ(兼コントロール)の追加

構造

カルーセル(外側) div.carousel.slide 属性
- 属性 id="{カルーセルID}"
- インジケータ ol.carousel-indicators
  - インジケータアイテム li 属性
    - 属性 data-target="#{カルーセルID}"
    - 属性 data-slide-to="{index}" (index = 0,1,2, ...)
    - 初期表示アイテムに .active を追加
- カルーセル(内側) div.carousel-inner は前後コントロールの追加と同じ

見出しの追加

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

構造

カルーセル(外側) (前と同じ)
- インジケータ (前と同じ)
- カルーセル(内側) div.carousel-inner
  - アイテム div-carousel-item(.active)?
    - img.d-block.w-100 (ここまで同じ)
    - ここから先を追加 div.carousel-caption.d-none.d-md-block
      - ラベル h5
        
        テキスト(例) First slide label
      - 見出し p
        
        テキスト(例) Nulla vitae ...
- 前後コントロール(以下同じ)

クロスフェード

構造

基本構成は前後コントロールの追加の例と同じ
カルーセル(外側) div.carousel.slide に .carousel-fade を追加

折り畳み

ボタンを用いてセレクタで指定した(隠れ)ターゲット要素の表示をON/OFFする。

基本例

設定例: 左は a , 右は button , どちらもその下の div.collapse#ex-collapse をON/OFF

a.btn.btn-primary

div.collaps#ex-collapseAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

構造

操作ボタンは次のどちらかを用いる
- a の場合: a.btn.btn-(primary|secondary|...) 属性
  - 属性 data-toggle="collapse"
  - 属性 href="#{ターゲットID}" (ID以外のCSSセレクタも可)
  - アクセシビリティ属性 role="button"
- button の場合: button.btn.btn-(primary|secondary|...) 属性
  - 属性 type="button"
  - 属性 data-toggle="collapse"
  - 属性 data-target="#{ターゲットID}" (ID以外のCSSセレクタも可)
- 共通のアクセシビリティ属性属性
  - aria-expanded="false" (初期状態で表示する場合 "true" )
  - aria-controls="{ターゲットID}"
ターゲット(任意要素可) 属性
- クラス.collapse を設定(デフォルト状態は非表示)
- 初期状態で表示する場合 .show を追加
- ターゲットセレクタを設定
  - (例) id="{ターゲットID}"
  - クラスなど任意のCSSセレクタ設定も可

上のボタンやボタンも折り畳み機能を利用して作られている。

複数ターゲットの連動ON/OFF

ターゲットセレクタに(IDではなく)クラスを用いることにより複数ターゲットを同時にON/OFFすることができる。

構造

操作ボタンの属性を変更(複数なのでクラスを用いる)

a の場合 href=".{ターゲットクラス}"
button の場合 data-target=".{ターゲットクラス}"

連動ON/OFFするコンテンツに class="{ターゲットクラス}" を設定

例1: a を用いた場合(1,2単独はID、両方はクラスでターゲットを設定、詳細はソース参照)

Toggle (1)Toggle (2)Toggle (1)+(2)

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

例2: button を用いた場合

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

アコーディオン

表示にカードを用い、3つのテキストを交互に出し入れする組み合わせ応用例。

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

(3) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

構造

親 div 属性
- 属性 id="{親ID}"
- div.card (ここから先が出し入れするアイテム: 個数分)
  - タイトル(常に表示) div.card-header 属性
    - アクセシビリティ属性 id="{見出しID}"
    - ヘッダ h5
      - 操作ボタン button.btn.btn-link 属性
        
        属性 data-toggle="collapse"
        
        属性 data-target="#{子ターゲットID}"
        
        アクセシビリティ属性 aria-expanded="false" or "true" (初期状態「開」の場合)
        
        アクセシビリティ属性 aria-controls="{子ターゲットID}"
        
        タイトルテキスト
  - div.collapse (アコーディオン操作でON/OFF) 属性
    - 初期状態「開」のアイテムに .show を追加
    - 属性 id="{子ターゲット子ID}"
    - 属性 data-parent="#{親ID}"
    - アクセシビリティ属性 aria-labelledby="{見出しID}"
    - 本文テキスト

ドロップダウン

基本例

ボタンに `button` を用いる場合

構造

親 div.dropdown (position: relative; であれば他の要素も可)
- ボタン button.btn.btn-(primary|secondary|success|info|warning|danger) 属性
  - 属性 type="button"
  - 属性 data-toggle="dropdown"
  - (アクセシビリティ用)属性 id="{dropdown-id}"
  - アクセシビリティ属性 aria-haspopup="true"
  - アクセシビリティ属性 aria-expanded="false"
  - テキスト(例) Dropdown button
- ドロップダウンメニュー div.dropdown-menu 属性
  - アクセシビリティ属性 aria-labelledby="{dropdown-id}"
  - メニューアイテム(通常複数) a.dropdown-item 属性
    - 属性 href="..."
    - テキスト(例) Action
  - 上下区切りは div.dropdown-divider ⇒ ディバイダ

ボタンに `a` を用いる場合

構造

ボタン用要素以外は同じ(異なる点のみ示す)。

親(同上)
- ボタン a.btn.btn-(primary|secondary|success|info|warning|danger).dropdown-toggle 属性
  - 属性 href="..."
  - 属性 data-toggle="dropdown"
  - アクセシビリティ属性(追加) role="button"
  - 他の属性(id , aria-haspopup , aria-expanded ) は同じ
  - テキスト(同じ)
- ドロップダウンメニュー(同じ)

色サンプル

構造

親(横並び配置用) div.btn-group
- 内部(同上)

スプリットボタン

左側は通常のボタン、右端にドロップダウン用タブ(実際は2つの button 要素)

構造

親(必須) div.btn-group (注: スプリットボタンに .dropdown を使うと間が空くため不適)
- 左(通常ボタン) button.btn.btn-(primary|secondary|...)
  - ボタンテキスト(例) Primary
- 右側ボタン button.btn.btn-(primary|secondary|...) に次を設定
  - クラス .dropdown-toggle-split
  - ボタンテキストはなし
  - スクリーンリーダ用(非表示) span.sr-only
    - テキスト(例) Toggle Dropdown
- ドロップダウンメニュー(同じ)

サイズ設定

.btn-(lg|sm) を追加する。

(a|button).btn.btn-secondary.btn-lg

(Default)

(a|button).btn.btn-secondary.btn-sm

ドロップ方向 (上 / 右 / 左)

親として div.btn-group を用い、さらに .(dropup|dropright|dropleft) を追加する。

div.btn-group.dropup

div.btn-group.dropright

div.btn-group.dropleft

スプリット左ドロップだけ構造が若干異なる(一層多く必要)。

構造(スプリット左ドロップ)

(必須) 祖先ラッパ div.btn-group
- (中間)親 div.btn-group.dropleft 属性
  - アクセシビリティ属性 role="group"
  - 選択タブが先 button.btn.dropdown-toggle.dropdown-toggle-split ...
  - 通常ボタンが後 button.btn.dropdown-toggle

(バージョン4から)メニューアイテムとして button.dropdown-item が使える(リンクではないため選択してもデフォルト動作でページ移動しない)。

構造

選択できない(テキスト表示のみの)アイテムを (span).dropdown-item-text で作成できる。またアイテムには任意のHTML要素やCSSを用いた書式設定を行うことができる。

状態表示(アクティブ / 無効)

アイテムに .active を設定するとアクティブ(青背景に白字)表示になる(次の2番目アイテム)。

アイテムに .disabled を設定すると灰色表示になる(次の2番目アイテム)。

ただしどちらも表示効果のみの設定で、.active を用いたドロップダウンで別のアイテムを選択してもアクティブアイテムは変更されない。また.disabled を設定したアイテムも選択可能で、要素が a の場合はページ移動もする(無効化されない)。これは上の2つのボタンで実際に確認することができる。

(応用) JavaScriptによる処理

これらを適切に処理するにはJavaScriptが必要になる。簡単な例を作ってみた。

アクティブアイテムは Item 1

構造(ポイントのみ) JavaScriptコード

ボタンは今までと同じ
ドロップダウンメニューにIDを設定 id="active-disabled-example"
アイテム1を .active 、アイテム5を.disabled に設定
別の位置にspan#active-indicator で現在のアクティブアイテムを表示

// Dropdown: Active/disabled states demo
$('#active-disabled-example').delegate('a', 'click', function(event) {
  var item = $(this);
  event.preventDefault();                   // prevent default link behaviors
  if (item.hasClass('disabled')) return;    // implement disabled behaviors
  // update the active item
  $('#active-disabled-example a').removeClass('active');
  item.addClass('active');
  $('#active-indicator').text(item.text());
});

click イベントハンドラを親(ドロップダウンメニュー)に設定
- イベントは親が受けて子アイテム a にデリゲート(子アイテムが個別に受けるより効率的)
イベントハンドラ
- まず event.preventDefault() でデフォルト動作を阻止
  - アイテムが a の場合必須 - これがないと(先頭に)ジャンプする
  - アイテムが button の場合は不要
- 無効化の動作を実装
  - クリックしたアイテムに .disabled が設定されていれば何もしない(return)
- アクティブ動作を実装
  - まず全アイテムから .active を削除
  - クリックしたアイテムに .active を追加
- アクティブアイテム表示を更新

デフォルトではドロップダウンメニューは親要素(起動ボタンでも同じ)の左端に揃えるが、ドロップダウンメニューに .dropdown-menu-right を設定すると右端同士が一致するように揃える。

例

構造

親 div.dropdown
- ボタン button.btn.btn-secondary.dropdown-toggle
- ドロップダウンメニュー div.dropdown-menu
  - フォームアイテム form 属性
    - パディング調整 .px-4.py-3
    - 内部はフォーム - 基本例と同様
  - ディバイダ div.dropdown-divider
  - テキストアイテム (New around here? Sign up)
  - テキストアイテム (Forget password?)

属性 data-offset="{x-offset-px},{y-offset-px}" を用いて表示位置の基準点を平行移動できる。

設定

属性 data-reference="parent" を用いてメニュー表示の基準位置を親要素に変えることができる。スプリットボタンに用いると親(ボタングループ)を基準としてメニュー配置を行う。

設定

属性 data-display="static" を設定すると(Popperによる動的位置判定を無効化して)常に下向きにドロップする。

設定

Bootstrap 4 tutorial

First slide label

Second slide label

Third slide label

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

ボタンに button を用いる場合

ボタンに a を用いる場合