web-dev-qa-db-ja.com

Bootstrapの使い方 Angular プロジェクト？

最初の Angular アプリケーションを起動して、基本的な設定は完了です。

アプリケーションに Bootstrap を追加する方法を教えてください。

あなたが例を提供することができればそれはそれから大きな助けになるでしょう。

angulartwitter-bootstraptypescripttwitter-bootstrap-3
165
user3739018

Angular-CLI を使用して新しいプロジェクトを生成する場合、 Angular 2/4 でブートストラップにアクセスできるようにする別の方法があります。

  1. コマンドラインインターフェイスを介してプロジェクトフォルダに移動します。それから npm を使ってブートストラップをインストールします。
    $ npm install --save bootstrap。 --saveオプションはブートストラップを依存関係に表示させます。
  2. プロジェクトを構成する.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": {}
  }
}

これでブートストラップはあなたのデフォルト設定の一部になるはずです。

112
LaPriWa

Angular 2との統合は ng2-bootstrap project： https://github.com/valor-software/ng2-bootstrap からも利用できます。

インストールするには、メインのHTMLページにこれらのファイルを追加するだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

そうすれば、あなたのコンポーネントにこのように使うことができます。

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
77
Thierry Templier

あなたがする必要があるのはあなたのindex.htmlファイルの中にブートストラップcssを含めることだけです。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
38
user2263572

もう1つの非常に良い（より良い？）選択肢は、angle-uiチームによって作成されたウィジェットのセットを使用することです： https://ng-bootstrap.github.io

20
pkozlowski.opensource

このスレッドに記載されているAngular-uiチームの ng-bootstrap で必要なBootstrap 4を使用する予定の場合は、代わりにこれを使用します（注：JSを含める必要はありません）ファイル）：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

SASSを使用していると仮定して、npm install [email protected] --saveファイル内のファイルを指すことで、styles.scssを実行した後でこれをローカルに参照することもできます。

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
15
occasl

最も一般的な方法は、ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap またはAngular UI Bootstrap libraryのように、npmパッケージとして配布されているサードパーティのライブラリを使用することです。 。

私は個人的にng2-bootstrapを使います。設定はあなたのAngularプロジェクトがどのようにビルドされているかに依存するのでそれを設定する多くの方法があります。その下に、Angular 2 QuickStart project https://github.com/angular/quickstart に基づく設定例を投稿します。

まず、package.jsonに依存関係を追加します。

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

それからsystemjs.config.jsで適切なURLに名前をマッピングする必要があります。

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

ブートストラップの.cssファイルをindex.htmlにインポートする必要があります。ハードドライブの/ node_modules/bootstrapディレクトリ（bootstrap 3.3.7依存関係を追加したため）またはWebから入手できます。 Webから入手しています。

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

/ appディレクトリからapp.module.tsファイルを編集します。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

そして最後に/ appディレクトリのapp.component.tsファイル

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

それから、アプリを実行する前に、ブートストラップとng2-bootstrap依存関係をインストールする必要があります。プロジェクトディレクトリに移動して次のように入力します。

npm install

最後にアプリを起動できます

npm start

Ng2-bootstrapプロジェクトgithubには、さまざまなAngular 2プロジェクトビルドにng2-bootstrapをインポートする方法を示すコードサンプルが多数あります。 plnkrサンプルもあります。 Valor-software（図書館の作者）WebサイトにもAPIドキュメントがあります。

10
luke

Angular-Cli環境では、私が見つけた最も簡単な方法は次のとおりです。


1. s̲c with environment̲ Solution̲スタイルシートのある環境での解決策 

npm install bootstrap-sass —save

style.scssの場合： 

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

注1：~文字は nodes_modules フォルダーへの参照です。
注2：scssを使用しているので、必要なすべてのブーストストラップ変数をカスタマイズできます。


2. c̲s̲s̲スタイルシートがある環境での解決策 

npm install bootstrap —save

style.cssの場合： 

@import '~bootstrap/dist/css/bootstrap.css';
8
Michael P. Bazos

BootstrapでAngular 2を設定するにはいくつかの方法があります。最も有効な方法の1つはng-bootstrapを使用することです。 .js.

1 - Angular-CLIでコマンドラインを使用して作成された新しいプロジェクトを出発点として、ng-bootstrapをインストールします。

npm install @ng-bootstrap/ng-bootstrap --save

注： https://ng-bootstrap.github.io/#/getting-started に詳しい情報があります。

2 - 次に、CSSとグリッドシステム用のブートストラップをインストールする必要があります。

npm install [email protected] --save

注： https://getbootstrap.com/docs/4.0/getting-started/download/ に詳しい情報があります。

これで環境の設定が完了しました。そのためには、スタイルに追加する.angular-cli.jsonを変更する必要があります。

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

これが一例です。

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "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"
      }
    }
  ]

次のステップは、ng-boostrapモジュールをプロジェクトに追加することです。そのためには、app.module.tsを追加する必要があります。

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

次に、アプリケーションモジュールに新しいモジュールを追加します。NgbModule.forRoot（）

例：

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

これで、angle2/5プロジェクトでbootstrap4を使い始めることができます。

6
UHDante

私は同じ質問をしました、そして本当にきれいな解決策でこの記事を見つけました：

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/ -

ここに指示があります、しかし私の単純化された解決策と：

Bootstrap 4をインストールします（ 手順 ）。

npm install --save [email protected]

必要に応じて、変更を反映するように src/styles.css を styles.scss に変更し、 .angular-cli.json を更新します。

"styles": [
  "styles.scss"
],

次に、この行を styles.scss に追加します。

@import '~bootstrap/scss/bootstrap';
3
jared_flack

package.jsonファイルをチェックして、ブートストラップの依存関係を追加するだけです。

"dependencies": {

   "bootstrap": "^3.3.7",
}

それから.angular-cli.jsonファイルに以下のコードを追加してください

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

最後に、ターミナルを使用してローカルのnpmを更新するだけです。

$ npm update
3
Tanjeeb Ahsan

Angular 6+およびブートストラップ4+を使用した手順：

  1. プロジェクトのフォルダにシェルを開く
  2. 次のコマンドでブートストラップをインストールします。npm install --save [email protected]
  3. ブートストラップには依存関係jqueryが必要なので、持っていない場合は、次のコマンドでインストールできます。npm install --save jquery 1.9.1
  4. あなたはコマンドで脆弱性を修正する必要があるかもしれません：npm audit fix
  5. メインのstyle.scssファイルに次の行を追加します。@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

OR

この行をメインのindex.htmlファイルに追加してください：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2
veben
  1. npm install --saveブートストラップ

  2. - > angular-cli.json fileに移動し、スタイルのプロパティを見つけて次の文字列を追加するだけです。

    "styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
2
31113

私は同じ答えを探していました、そしてついに私はこのリンクを見つけました。 Angular 2プロジェクトにブートストラップCSSを追加する方法について、3つの方法で説明しています。それは私を助けました。

これがリンクです： http://codingthesmartway.com/using-bootstrap-with-angular/ /

1
MiroslavStojakovic

あなたはPrettyfox UI library /を使うことを試みることができます http://ng.prettyfox.org

このライブラリはブートストラップ4スタイルを使用し、jqueryを必要としません。

0
Langaner

角度クリップを使用する場合は、package.jsonにブートストラップを追加してパッケージをインストールした後に、.angular-cli.jsonの「スタイル」セクションにboostrap.min.cssを追加するだけです。

重要なことの1つは、「.angular-cli.jsonを変更した場合は、設定の変更を反映するためにserveを再起動する必要がある」ということです。

参照：

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

0
ninetiger

私のお勧めは、すべてをコンパイルして1か所にまとめるために、JSONスタイラスで宣言してscssに入れることです。

1）ブートストラップをnpmでインストールする

 npm install bootstrap

2）私たちのスタイルでCSSでブートストラップのNPMを宣言

_bootstrap-custom.scssを作成します。

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3）styles.scss内に挿入します

@import "bootstrap-custom";

だから私たちはすべての私たちのコアをコンパイルして一箇所にするでしょう

0
JMF

htmlページに次の行を追加してください

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
0
sriram26

スケルトンAngular 2/4 + Bootstrap 4

1）ZipをダウンロードしてZipフォルダを解凍

2）サービス

0
Janka