AngularにBootstrap5をインストールする方法

このチュートリアルでは、Angular13アプリケーションにブートストラップ5をインストールして使用する方法を学習します。

新しいAngular13アプリを作成する

コマンドプロンプトを開き、次のコマンドを実行して、Angular13アプリをシステムにインストールします。次のように：

npm install -g @angular/cli 

ng new angularbootstrap//Create new Angular Project

cd angularbootstrap

Bootstrap5をインストールします

もう一度コマンドプロンプトを開き、Angular13アプリケーションに移動します。次に、次のコマンドを実行して、ブートストラップ5をAngular13アプリにインストールします。次のように：

npm install bootstrap
npm i @popperjs/core

Bootstrap5をAngularアプリに構成する

そして、Angular 13アプリに移動し、package.jsonファイルを開きます。次に、次のコードを追加します。次のように：

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

AngularでBootstrap5を使用する

src / app /ディレクトリに移動し、Angular13アプリからapp.component.htmlファイルを開きます。次に、次のコードを追加します。次のように：

<div class="container  text-center mt-5 mb-5">
  <h1>Bootstrap 5 is working fine with Angular 13!!</h1>
</div>

Angularアプリを実行する

次に、ターミナルで次のコマンドを実行して、Angularアプリケーションを実行します。次のように：

ng serve

次に、Webブラウザーにアクセスして、次のURLを入力します。

http://localhost:4200

ブートストラップ5をAngular13にインストールするには; このチュートリアルを通じて、Angular13アプリケーションにブートストラップ5をインストールして使用する方法を学びました。

What is GEEK

Buddha Community

AngularにBootstrap5をインストールする方法

このチュートリアルでは、Angular13アプリケーションにブートストラップ5をインストールして使用する方法を学習します。

新しいAngular13アプリを作成する

コマンドプロンプトを開き、次のコマンドを実行して、Angular13アプリをシステムにインストールします。次のように：

npm install -g @angular/cli 

ng new angularbootstrap//Create new Angular Project

cd angularbootstrap

Bootstrap5をインストールします

もう一度コマンドプロンプトを開き、Angular13アプリケーションに移動します。次に、次のコマンドを実行して、ブートストラップ5をAngular13アプリにインストールします。次のように：

npm install bootstrap
npm i @popperjs/core

Bootstrap5をAngularアプリに構成する

そして、Angular 13アプリに移動し、package.jsonファイルを開きます。次に、次のコードを追加します。次のように：

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

AngularでBootstrap5を使用する

src / app /ディレクトリに移動し、Angular13アプリからapp.component.htmlファイルを開きます。次に、次のコードを追加します。次のように：

<div class="container  text-center mt-5 mb-5">
  <h1>Bootstrap 5 is working fine with Angular 13!!</h1>
</div>

Angularアプリを実行する

次に、ターミナルで次のコマンドを実行して、Angularアプリケーションを実行します。次のように：

ng serve

次に、Webブラウザーにアクセスして、次のURLを入力します。

http://localhost:4200

ブートストラップ5をAngular13にインストールするには; このチュートリアルを通じて、Angular13アプリケーションにブートストラップ5をインストールして使用する方法を学びました。