私はバックエンドの開発者で、Angular4を使って遊んでいます。そこで、このインストールチュートリアルを行いました。
これを踏まえて、アプリにbootstrapを追加して、"container-fluid"や"col-md-6"などのクラスを使えるようにするにはどうしたらいいでしょうか?
npm install --save bootstrap
その後、 angular-cli.json の中(プロジェクト'のルートフォルダの中)で、 styles
を見つけて、ブートストラップの css ファイルを以下のように追加します。
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
UPDATE:
angular 6+では、angular-cli.json
がangular.json
に**変更されました。
Angular4では、@types**システムを扱う際に、以下のことを行う必要があります。
してください。
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.jsonを参照してください。
の配列を探して、jqueryとbootstrapの項目を追加します。
"types": [
"jquery",
"bootstrap",
"node"
]
インデックス.htmlに
headセクションに以下のエントリを追加します。
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>
そして、jqueryとbootstrapの両方を使い始めます。
プロジェクト内で以下のコマンドを実行します。 npm install [email protected] -save.
上記の依存関係をインストールした後、次のnpmコマンドを実行すると、bootstrapモジュールがインストールされます npm install -save @ng-bootstrap/ng-bootstrap
参考までにこちらをご覧ください - https://github.com/ng-bootstrap/ng-bootstrap
以下のインポートをapp.moduleに追加します。 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and NgbModuleをインポートに追加します。
stye.cssに @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";