日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

以下は、指定された英文文本を日本語に翻訳し、Markdown形式で提供したものです。

Bootstrap - Dropdowns Demo

Bootstrap - ドロップダウンデモ

ドロップダウンとは？

こんにちは、Web開発者の卵さんたち！今日は、Bootstrapのドロップダウンの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅をガイドするのがとても楽しみです。コードを書いたことがない人でも大丈夫です。信じてください、このチュートリアルの終わりには、プロのようにドロップダウンを作成できるようになります！

ドロップダウンは、ユーザーがリストから1つのオプションを選択できるユーザーインターフェース要素です。クリックすると表示されるデジタルメニューのようです。レストランで、紙のメニューよりも魔法のボタンを受け取るウェイターがいたと想像してください。それを押すと、空中有効に浮かび上がる美味しい料理のリストが現れます。这正是ウェブページ上のドロップダウンが行うことです！

ドロップダウンの使用理由

ドロップダウンは以下のような用途に非常に有用です：

  1. ウェブページ上のスペースを節約する
  2. 関連するオプションを整理する
  3. 清潔で直感的なユーザーインターフェースを提供する

では、コードを少し弄ってみましょう！

Bootstrapの設定

まず、HTMLファイルにBootstrapを設定する必要があります。心配しないでください。新しいスマートフォンを設定するよりも簡単です！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap ドロップダウンデモ</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- コンテンツをここに配置 -->

    <!-- Bootstrap JSとPopper.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

このコードは基本的なHTML構造を設定し、必要なBootstrapファイルを含めます。これは、料理を始める前にキッチンを準備することに似ています！

基本的なドロップダウンの作成

簡単なドロップダウンから始めましょう。クリックするとオプションのリストが表示されるボタンを作成します。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    果物を選んでください
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">リンゴ</a></li>
    <li><a class="dropdown-item" href="#">バナナ</a></li>
    <li><a class="dropdown-item" href="#">チェリー</a></li>
  </ul>
</div>

これを分解すると：

  1. <div class="dropdown">：ドロップダウンのコンテナです。
  2. <button class="btn btn-primary dropdown-toggle" ...>：ユーザーがクリックしてドロップダウンを開くボタンです。
  3. data-bs-toggle="dropdown"：このボタンがドロップダウンを切り替えることをBootstrapに伝えます。
  4. <ul class="dropdown-menu">：ボタンをクリックすると表示されるリストです。
  5. <li><a class="dropdown-item" href="#">...：ドロップダウンリストの各項目です。

ドロップダウンの方向

バッフェで食べ物を違う方向から供けるのと同じように、Bootstrapではドロップダウンの方向を変更できます。以下のオプションを見てみましょう。

ドロップアップ

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップアップ
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
    <li><a class="dropdown-item" href="#">アクション</a></li>
    <li><a class="dropdown-item" href="#">別のアクション</a></li>
    <li><a class="dropdown-item" href="#">ここに他のもの</a></li>
  </ul>
</div>

ここでの唯一の違いは、dropupクラスがdropdownクラスの代わりに使われていることです。メニューを逆さまにするようなものです！

ドロップライトとドロップレフト

<div class="dropend">
  <button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップライト
  </button>
  <ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
    <li><a class="dropdown-item" href="#">アクション</a></li>
    <li><a class="dropdown-item" href="#">別のアクション</a></li>
    <li><a class="dropdown-item" href="#">ここに他のもの</a></li>
  </ul>
</div>

<div class="dropstart">
  <button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップレフト
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
    <li><a class="dropdown-item" href="#">アクション</a></li>
    <li><a class="dropdown-item" href="#">別のアクション</a></li>
    <li><a class="dropdown-item" href="#">ここに他のもの</a></li>
  </ul>
</div>

dropendを使うと右寄せのドロップダウン、dropstartを使うと左寄せのドロップダウンができます。これは、プレートのどちら側にフォークを置くかを選ぶのに似ています！

ドロップダウンメニューアイテム

ドロップダウンメニューにいくつかの追加機能を加えましょう：

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    ドロップダウン
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><h6 class="dropdown-header">ドロップダウンヘッダー</h6></li>
    <li><a class="dropdown-item" href="#">アクション</a></li>
    <li><a class="dropdown-item" href="#">別のアクション</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">ここに他のもの</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">無効なアクション</a></li>
  </ul>
</div>

この例では、以下を追加しています：

  1. ヘッダー（dropdown-header）
  2. ディビジョン（dropdown-divider）
  3. 無効な項目（dropdown-item disabled）

メニューにセクションを作成し、在庫切れのアイテムをグレーアウトするようなものです！

ドロップダウンのサイズ

ドロップダウンボタンのサイズを変更することもできます。小、中、大のドリンクを注文するのと同じように：

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    大ボタン
  </button>
  <ul class="dropdown-menu">
    <!-- ドロップダウンメニューアイテム -->
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    小ボタン
  </button>
  <ul class="dropdown-menu">
    <!-- ドロップダウンメニューアイテム -->
  </ul>
</div>

btn-lgを使うと大きなボタン、btn-smを使うと小さなボタンになります。簡単ですね！

ドロップダウンのメソッド

Bootstrapは、ドロップダウンをプログラムatically制御するためのいくつかのメソッドを提供しています。以下はそのメソッドの表です：

メソッド 説明
show ドロップダウンを表示する
hide ドロップダウンを非表示にする
toggle ドロップダウンを切り替える
update エレメントのドロップダウンの位置を更新する
dispose エレメントのドロップダウンを破壊する

これらのメソッドを使うにはJavaScriptを使用します。例えば：

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

// ドロップダウンを表示する
dropdownList[0].show()

// ドロップダウンを非表示にする
dropdownList[0].hide()

// ドロップダウンを切り替える
dropdownList[0].toggle()

そして、それで終わりです！Bootstrapのドロップダウンのクラスを終了しました。練習が成功の鍵ですので、自分のウェブサイトでこれらの要素を試してみてください。

間もなく、あなたのドロップダウンメニューは、最も豪華なレストランのもの都比べて劣らないものになるでしょう。快適なコーディングをし、あなたのドロップダウンが常に正しい方向にドロップすることを祈っています！

Credits: Image by storyset

前のチュートリアル:
Bootstrap - サイドバーのデモ
次のチュートリアル:
Bootstrap - リストグループデモ