はじめに

bootstrap にはクラス名を用いて様々なスタイルを提供してくれる機能の他に、ドロップダウンやモーダルなど、よく使うコンポーネントとその挙動を提供してくれる機能などもあります。

今回自分のプロジェクトでは、PandaCSSという CSS フレームワークを用いてスタイルを定義しているので、『bootstrap でスタイルを定義するわけではないけど、ドロップダウンとかモーダルとかのコンポーネントは使いたい』という場面があったので、やり方を紹介しま す。

https://panda-css.com/

bootstrap のバージョン

bootstrap: v5.3.0

やり方

今回は CDN を使ってファイルを読み込む方法ではなく、npm パッケージを利用します。

bootstrap パッケージを追加

npm install bootstrap@5.3.0

scss ファイルを作成

https://getbootstrap.jp/docs/5.3/customize/sass/

ドロップダウンのコンポーネントは CSS を使って表示と非表示が切り替えられているので、bootstrap パッケージから必要な css を import する必要があります。公式ドキュメントを参考に、必要なファイルのみを import した、bootstrap.custom.scssファイルを以下のように作成します。

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import 'bootstrap/scss/functions';

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';

// 6. Optionally include any other parts as needed
@import 'bootstrap/scss/dropdown';

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`

// 8. Add additional custom code here

これでドロップダウンの挙動に必要なスタイルのみを含んだ scss ファイルができました。

必要なものを読み込む

https://getbootstrap.jp/docs/5.3/components/dropdowns/

ドロップダウンを正しく動作させるためには

• bootstrap.bundle.min.js  もしくは  bootstrap.bundle.js
• 先ほど定義したスタイルシート

の二つが必要になります。

import '@/styles/bootstrap.custom.scss';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

適当なコンポーネントで import してあげましょう。自分はアプリ全体のレイアウトコンポーネントで import しました。

完成

https://getbootstrap.jp/docs/5.3/components/dropdowns/

あとは公式ドキュメントを参考にして、カスタマイズしながら使いましょう

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

最後に

ドロップダウンのためのライブラリを入れようかとも思いましたが、後々にモーダルなども実装したかったので bootstrap を利用することにしました。d-flex とかのスタイルを当てる目的ではなく、コンポーネントを使うためだけに bootstrap を利用するのは正しいやり方なんでしょうか？ちょっとわかんないけど、やりたいことはできたのでヨシ

では

Bye