ブートストラップにjsを導入する方法

下次还敢
リリース: 2024-04-05 02:42:16
オリジナル
899 人が閲覧しました

Bootstrap JS を導入する方法には、CDN 経由 (bootstrap.bundle.min.js を推奨)、ローカルから関連ファイルをダウンロードする、npm 経由でインストールして関連モジュールを導入するなどがあります。

ブートストラップにjsを導入する方法

#Bootstrap JS の導入方法

Bootstrap JS を導入するには、以下の方法があります。

方法 1: CDN を使用する

<code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>
ログイン後にコピー

方法 2: ローカルからダウンロード

    ブートストラップ ライブラリをダウンロードします。
  1. bootstrap.js ファイルをプロジェクトに追加します。

方法 3: npm 経由

<code class="shell">npm install bootstrap</code>
ログイン後にコピー
次に、コードに次の内容を導入します:

<code class="js">import * as bootstrap from 'bootstrap';</code>
ログイン後にコピー

手順:

    Bootstrap CSS バージョンと一致する JS バージョンを使用してください。
  • Bootstrap 5 の場合は、すべての JavaScript コンポーネントが含まれる
  • bootstrap.bundle.min.js を使用することをお勧めします。
  • Bootstrap の古いバージョンの場合は、各コンポーネントの JS ファイルを個別に導入する必要がある場合があります。

JS コンポーネントの使用

Bootstrap JS を導入した後、その JavaScript コンポーネントを使用できるようになります。例:

    ポップアップ ボックス (モーダル):
  • $('#myModal').modal()
  • タブ (タブ):
  • $ ('#myTabs').tab()
  • スライダー (カルーセル):
  • $('#myCarousel').carousel()
  • # #特定のコンポーネントの詳細については、ブートストラップのドキュメントを参照してください。

以上がブートストラップにjsを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!