[解決済み] AngularプロジェクトでBootstrapを使うには?
2022-04-22 03:49:43
質問
を始めています。 アンギュラー アプリケーションを作成し、基本的なセットアップは完了しました。
を追加するにはどうすればよいですか? ブートストラップ をクリックします。
もし例を示していただけるなら、とても助かります。
どのように解決するのですか?
を使用することを条件とします。 Angular-CLI で新しいプロジェクトを生成するために、ブートストラップにアクセスできるようにする別の方法があります。 アンギュラー 2/4 .
-
コマンドラインインターフェイスから、プロジェクトフォルダに移動します。次に、以下を使用します。
npm
を実行して、bootstrapをインストールします。
$ npm install --save bootstrap
. その--save
オプションは、bootstrap を依存関係の中に表示させます。 -
プロジェクトの設定を行う.angular-cli.json ファイルを編集します。これはプロジェクトディレクトリの中にあります。プロジェクトディレクトリの中にあります。
"styles"
の配列になります。この参照は、npmでダウンロードしたブートストラップファイルの相対パスでなければなりません。私の場合、それは"../node_modules/bootstrap/dist/css/bootstrap.min.css",
私の例の.angular-cli.jsonです。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
これでbootstrapがデフォルトの設定の一部になっているはずです。
関連
-
[解決済み] Angular 4: パイプ 'AsyncPipe' に対する InvalidPipeArgument: '[object Object]' です。
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Bootstrapとは?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】angular-cliプロジェクトにbootstrapを追加する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular [disabled]="MyBoolean "が動作しない。
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】Angular 6でサービスを生成する際に、InjectableデコレータでprovidedInの目的は何ですか?
-
[解決済み] '合成プロパティ @panelState を発見しました。BrowserAnimationsModule" か "NoopAnimationsModule" のどちらかを入れてください'。
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] Angular 2 http.post()がリクエストを送信しない
-
[解決済み] Angular 2+ - ベースのhrefを動的に設定する
-
[解決済み] ファイル 'app/hero.ts' is not a module error in console, where to store interfaces files in directory structure with angular2?
-
[解決済み] ページを離れる前に、未保存の変更点を警告する