bootstrap-vue3

このスキルを使用するタイミング

ユーザーが以下を希望する場合は、いつでもこのスキルを使用してください。

• Bootstrap Vue コンポーネントを使って Vue 3 アプリケーションを構築する
• Bootstrap UI コンポーネント（Button、Form、Table、Modal など）を使用する
• Bootstrap グリッドを使ってレスポンシブレイアウトを作成する
• Bootstrap Vue ディレクティブ（v-b-tooltip、v-b-popover、v-b-modal）を使用する
• Bootstrap のスタイルを適用したフォームを実装する
• Bootstrap テーブルにデータを表示する
• モーダルやアラートを作成する
• Bootstrap のナビゲーションコンポーネントを使用する
• Bootstrap のテーマをカスタマイズする
• Bootstrap Vue 2.x から 3.0 に移行する

このスキルの使用方法

このスキルは、Bootstrap Vue 3.0 の公式ドキュメントの構成（https://bootstrap-vue.org/docs、https://bootstrap-vue.org/docs/components）に合わせて整理されています。Bootstrap Vue 3.0 を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに／快速开始 → examples/getting-started/installation.md または examples/getting-started/basic-usage.md
   • Button／ボタン → examples/components/button.md
   • Form／フォーム → examples/components/form.md
   • Table／テーブル → examples/components/table.md
   • Modal／モーダル → examples/components/modal.md
   • Alert／アラート → examples/components/alert.md
   • Navbar／ナビゲーションバー → examples/components/navbar.md
   • Grid／グリッド → examples/components/grid.md
   • Directives／ディレクティブ → examples/directives/tooltip.md または examples/directives/modal.md

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（快速开始）- examples/getting-started/：

   • examples/getting-started/installation.md - Bootstrap Vue のインストールと基本設定
   • examples/getting-started/basic-usage.md - コンポーネントの基本的な使い方

   コンポーネント（组件）- examples/components/：

   • examples/components/button.md - Button コンポーネント
   • examples/components/form.md - Form コンポーネント
   • examples/components/input.md - Input コンポーネント
   • examples/components/table.md - Table コンポーネント
   • examples/components/modal.md - Modal コンポーネント
   • examples/components/alert.md - Alert コンポーネント
   • examples/components/navbar.md - Navbar コンポーネント
   • examples/components/grid.md - グリッドシステム（Container、Row、Col）
   • examples/components/card.md - Card コンポーネント
   • examples/components/badge.md - Badge コンポーネント
   • examples/components/dropdown.md - Dropdown コンポーネント
   • examples/components/pagination.md - Pagination コンポーネント
   • examples/components/tabs.md - Tabs コンポーネント
   • examples/components/collapse.md - Collapse コンポーネント
   • examples/components/popover.md - Popover コンポーネント
   • examples/components/tooltip.md - Tooltip コンポーネント

   ディレクティブ（指令）- examples/directives/：

   • examples/directives/tooltip.md - v-b-tooltip ディレクティブ
   • examples/directives/popover.md - v-b-popover ディレクティブ
   • examples/directives/modal.md - v-b-modal ディレクティブ
   • examples/directives/toggle.md - v-b-toggle ディレクティブ

   応用（高级）- examples/advanced/：

   • examples/advanced/theme-customization.md - Bootstrap テーマのカスタマイズ
   • examples/advanced/composables.md - コンポーザブル（useToast、useModal）の使用

3. そのサンプルファイルに記載された構文、構成、ベストプラクティスに関する具体的な手順に従います。

   重要な注意事項：

   • すべてのサンプルは Bootstrap Vue 3.0 API（Vue 3 + Bootstrap 5）に準拠しています
   • サンプルでは Composition API の構文を使用しています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが含まれています
   • ベストプラクティスや一般的なパターンを確認するため、必ずサンプルファイルを参照してください

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/components.md - コンポーネント API リファレンス
   • api/directives.md - ディレクティブ API リファレンス
   • api/composables.md - コンポーザブル API リファレンス

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/project-setup.md - プロジェクト設定のテンプレート
   • templates/component-template.md - コンポーネントの使用テンプレート

ドキュメントマッピング（公式ドキュメントとの一対一対応）

ガイド (指南):

• examples/guide/ または examples/getting-started/ 内のガイドファイルを参照してください → https://bootstrap-vue.org/docs

コンポーネント (组件):

• examples/components/ 内のコンポーネントファイルを参照してください → https://bootstrap-vue.org/docs/components

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に対応するように整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記のマッピングを参照してください）。

サンプルを使用するには:

• ユーザーのリクエストからトピックを特定します
• 上記のマッピングから適切なサンプルファイルを読み込みます
• そのファイル内の手順、構文、ベストプラクティスに従います
• コードサンプルを特定のユースケースに合わせて調整します

テンプレートを使用するには:

• 一般的なスキャフォールディングについては templates/ ディレクトリ内のテンプレートを参照してください
• テンプレートを特定のニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、公式の Bootstrap Vue 3.0 API ドキュメントの構成に対応するように整理されています:

コンポーネント API (api/components.md)

• すべてのコンポーネントの props と API
• コンポーネントのイベントとスロット
• コンポーネントの型とインターフェース

ディレクティブ API (api/directives.md)

• ディレクティブの構文と使用方法
• ディレクティブの修飾子
• ディレクティブのオプション

コンポーザブル API (api/composables.md)

• useToast コンポーザブル
• useModal コンポーザブル
• usePopover コンポーザブル

API リファレンスを使用するには:

1. サポートが必要な API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、サンプルを確認します
4. 詳細な使用パターンについては、リンクされているサンプルファイルを参照してください
5. すべての API ファイルには、examples/ ディレクトリ内の関連するサンプルファイルへのリンクが含まれています

ベストプラクティス

1. Bootstrap CSS のインポート: エントリーファイルで Bootstrap CSS をインポートします
2. Composition API の使用: Vue 3 プロジェクトでは Composition API を優先します
3. ツリーシェイキング: より良いツリーシェイキングのためにコンポーネントを個別にインポートします
4. レスポンシブデザイン: レスポンシブレイアウトには Bootstrap のグリッドシステムを使用します
5. アクセシビリティ: Bootstrap のアクセシビリティガイドラインに従います
6. テーマのカスタマイズ: 一貫したテーマ設定には Bootstrap の変数を使用します
7. ディレクティブ: プログラムによるコンポーネント制御にはディレクティブを使用します
8. コンポーザブル: プログラムによる API アクセスにはコンポーザブルを使用します
9. コンポーネントのコンポジション: 複雑な UI にはコンポーネントを組み合わせます
10. パフォーマンス: ツリーシェイキングでバンドルサイズを最適化します

リソース

• 公式ウェブサイト: https://bootstrap-vue.org
• ドキュメント: https://bootstrap-vue.org/docs
• コンポーネント: https://bootstrap-vue.org/docs/components
• GitHub リポジトリ: https://github.com/bootstrap-vue/bootstrap-vue-next

キーワード

Bootstrap Vue, Bootstrap Vue 3.0, Vue 3, Bootstrap 5, コンポーネント, Button, Form, Table, Modal, Alert, Navbar, Grid, ディレクティブ, v-b-tooltip, v-b-popover, v-b-modal, コンポーザブル, useToast, useModal, 组件库, 按钮, 表单, 表格, 模态框, 警告框, 导航栏, 栅格, 指令