Angular は bootstrap4 をどのように統合しますか?手法の紹介

この記事では、Bootstrap4 を Angular に統合する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「angularjs ビデオ チュートリアル 」、「ブートストラップ チュートリアル 」

angular 統合ブートストラップ4

1. ターミナルを開いてコマンドを入力し、新しい angular アプリを作成します

ng new app

2. ブートストラップを統合します

インストール ngx-bootstrap および Bootstrap

新しいプロジェクトでターミナルを開き、次のコマンドを実行します

npm install ngx-bootstrap bootstrap --save

3. ブートストラップ スタイルを使用します

プロジェクトを構成するには: ブートストラップ スタイルを使用するには、ブートストラップ CSS を含めるようにプロジェクトを構成する必要があります。

angular.json にブートストラップ スタイルを追加する: プロジェクトのルート ディレクトリからファイル angular.json を開き、スタイル構成項目を見つけて、bootstrap.min.css へのパスを指定します。完了すると、次のようになります。

"styles": [
              "src/styles.sass",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

注: angular.json に変更を加える場合は、構成の変更を反映するために ng サービスを再起動する必要があります。

4. app.module.ts

Opensrc/app/app.module.ts## で使用する ngx-bootstrap モジュールを導入します。 # そして、BsDropdownModule.forRoot() など、使用するコンポーネント モジュールを追加します。

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})

具体的にどのブートストラップ コンポーネントを使用するかについては、https://valor-software.com/ngx-bootstrap/#/documentation をクリックして表示してください

プログラミング関連の知識の詳細については、以下を参照してください。

プログラミング教育 ! ！

以上がAngular は bootstrap4 をどのように統合しますか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。