ngxブートストラップとは何ですか

「ngx-bootstrap」は、Angular の UI フレームワークです。これは、Angular が bootstrap3 または bootstrap4 コンポーネントを迅速に継承するための最良の方法であり、開発効率を効果的に向上させることができます。「npm install ngx-bootstrap -」を使用できます。 -save "「ngx-bootstrap」をインストールするコマンド。

このチュートリアルの動作環境: Windows10 システム、bootstrap5 バージョン、DELL G3 コンピューター

ngx bootstrap とは

ngx-bootstrap は Angular の UI フレームワークであり、Angular が Bootstrap 3 または Bootstrap 4 コンポーネントを迅速に統合するための最良の方法です。 ngx-bootstrap を使用すると、開発効率を向上させることができます。

ここで使用されているのは @angular/cli 8.2.5 で、bootstrap4

1 を使用します。ngx-bootstrap

----In をインストールします。プロジェクト ディレクトリで cmd コンソールを開き、

----「--save」を使用して依存関係を書き込みます

npm install ngx-bootstrap  --save
// 也可以用国内的淘宝镜像快速安装
cnpm install ngx-bootstrap --save

2 と入力します。対応する CSS をプロジェクトに導入します

angualr.json ファイルのスタイル グローバル スタイルに対応するパスを追加します

 "styles": [
              "../node_modules/bootstrap/scss/bootstrap"
            ],

3. 依存関係をインポートします

グローバルを導入した後、 css スタイルの場合、対応するコンポーネントを使用したい場合は、コンポーネントを通常に使用するには、対応するモジュールに関連する依存関係をインポートする必要もあります。

ここで折りたたみコンポーネントとタブ コンポーネントを紹介します

まず、コンポーネントをhead

import {CollapseModule, TabsModule} from 'ngx-bootstrap';

次に、@NgModule のインポートで

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

を宣言する必要があります。そうすれば、それを使用できます

関連する推奨事項: ブートストラップ チュートリアル

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