angular-cli 1.0.0-beta.5 (w / 노드 v6.1.0)로 생성 된 앱에서 부트 스트랩 4 (4.0.0-alpha.2)를 사용하려고합니다.

npm으로 부트 스트랩과 그 종속성을 얻은 후 첫 번째 접근 방식은 다음과 같이 추가했습니다 angular-cli-build.js.

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

그리고 우리의 수입 index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

이것은 잘 작동 ng serve했지만 -prod플래그 가있는 빌드를 생성 하자마자이 모든 의존성이 사라졌습니다 dist/vendor(서프라이즈!).

angular-cli로 생성 된 프로젝트에서 이러한 시나리오 (예 : 부트 스트랩 스크립트로드)를 처리하기위한 방법은 무엇입니까?

우리는 다음과 같은 생각을 가지고 있었지만 실제로 어떤 길을 갈지 모른다 ...

• CDN을 사용 하시겠습니까? 그러나 우리는이 파일들을 사용할 수 있도록하기 위해 오히려이 파일들을 제공 할 것입니다

• 의존성을 복사 dist/vendor한 후에 ng build -prod? 그러나 그것은 angular-cli가 빌드 부분을 '관리'하기 때문에 제공 해야하는 것 같습니다.

• jquery, 부트 스트랩 및 테더를 추가 src/system-config.ts하고 어떻게 든 번들로 가져 오는가 main.ts? 그러나 애플리케이션 코드에서 명시 적으로 사용하지 않을 것이라는 점을 고려할 때 (예를 들어 moment.js 또는 lodash와 같은) 잘못된 것으로 보였습니다.

중요 업데이트 : NG2 - 부트 스트랩은 지금 교체 NGX-부트 스트랩

ngx-bootstrap 은 Angular 3과 4를 모두 지원합니다.

업데이트 : 1.0.0-beta.11-webpack 이상

먼저 터미널에서 다음 명령을 사용 하여 angular-cli 버전을 확인하십시오 .

ng -v

귀하의 경우 각-CLI 버전보다 큰 1.0.0-beta.11-웹팩 , 당신은 다음 단계를 수행해야합니다 :

1. ngx-bootstrap 및 bootstrap을 설치 하십시오 .

   npm install ngx-bootstrap bootstrap --save

이 줄은 현재 Bootstrap 3을 설치하지만 나중에 Bootstrap 4를 설치할 수 있습니다. 명심 NGX-부트 스트랩 지원하는 두 버전을.

2. 열기 SRC / 응용 프로그램 / app.module.ts 및 추가 :

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. 열기 각도-cli.json (angular6 및 변경 이후의 파일 이름에 대한 angular.json )과은에 새 항목을 삽입 styles배열 :

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

4. 여 SRC / 응용 프로그램 / app.component.html 및 추가 :

   <alert type="success">hello</alert>

1.0.0-beta.10 이하 버전 :

또한, angular-cli 버전이 1.0.0-beta.10 이하인 경우 아래 단계를 사용할 수 있습니다.

먼저 프로젝트 디렉토리로 이동하여 다음을 입력하십시오.

npm install ngx-bootstrap --save

그런 다음 angular-cli-build.js를 열고 다음 줄을 추가하십시오.

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

이제 src / system-config.ts 를 열고 다음을 작성하십시오.

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...과:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

https://github.com/angular/angular-cli 에서 키워드> 글로벌 라이브러리 설치 를 찾으면 답을 찾는 데 도움이됩니다.

문서에 따라 다음 단계를 수행하여 Bootstrap 라이브러리를 추가 할 수 있습니다.

먼저 npm에서 Bootstrap을 설치하십시오.

npm install bootstrap@next

그런 다음 angular-cli.json 파일의 apps [0] .scripts에 필요한 스크립트 파일을 추가하십시오.

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

마지막으로 bootsstrap CSS를 apps [0] .styles 배열에 추가하십시오 :

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

ng serve를 실행중인 경우 다시 시작하면 Bootstrap 4가 앱에서 작동해야합니다.

이것이 가장 좋은 해결책입니다. 그러나 ng serve를 다시 시작하지 않으면 작동하지 않습니다. 이 마지막 작업을 수행하는 것이 좋습니다.

다음을 수행하십시오.

npm i bootstrap@next --save

부트 스트랩 4가 프로젝트에 추가됩니다.

다음으로 src/style.scss또는 src/style.css파일 로 이동하여 (사용중인 것을 선택하십시오) 부트 스트랩을 가져 오십시오.

style.css의 경우

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

style.scss의 경우

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

스크립트를 들어 당신은 여전히 같은 각도-cli.json 파일에 파일을 추가해야합니다 ( 각도 버전 6에서는이 편집 파일에서 수행 할 필요가 angular.json ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

처음에는 다음 명령으로 테더, jquery 및 부트 스트랩을 설치해야합니다.

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

angular-cli.json (버전 6 이후의 angular.json) 파일에이 행을 추가 한 후

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

아무도 아직 부트 스트랩을 포함시키는 방법에 대한 공식 (angular-cli 팀) 이야기를 언급하지 않았으므로 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

부트 스트랩 포함

부트 스트랩 은 Angular 프로젝트 내에서 사용할 수있는 널리 사용되는 CSS 프레임 워크입니다. 이 안내서는 Angular CLI 프로젝트에 부트 스트랩을 추가하고 부트 스트랩을 사용하도록 구성하는 과정을 안내합니다.

CSS 사용

시작하기

새 프로젝트를 만들고 프로젝트를 탐색하십시오.

ng new my-app
cd my-app

부트 스트랩 설치

새 프로젝트가 작성되고 준비되면 다음으로 프로젝트에 부트 스트랩을 종속성으로 설치해야합니다. --save옵션을 사용하면 의존성이 package.json에 저장됩니다

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

이제 프로젝트가 설정되었으므로 부트 스트랩 CSS를 포함하도록 구성해야합니다.

• .angular-cli.json프로젝트 루트 에서 파일 을여십시오.
• 속성 아래 apps에서 해당 배열의 첫 번째 항목이 기본 응용 프로그램입니다.
• styles외부 전역 스타일을 응용 프로그램에 적용 할 수 있는 속성 이 있습니다.
• 경로를 지정하십시오 bootstrap.min.css

완료되면 다음과 같아야합니다.

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

참고 : 변경하면 구성 변경을 .angular-cli.json시작 ng serve하기 위해 다시 시작해야합니다 .

테스트 프로젝트

app.component.html다음 마크 업을 열고 추가하십시오.

<button class="btn btn-primary">Test Button</button>

애플리케이션이 구성된 상태 ng serve에서 개발 모드에서 애플리케이션을 실행 하도록 실행하십시오. 브라우저에서 응용 프로그램으로 이동하십시오 localhost:4200. 부트 스트랩 스타일 버튼이 나타나는지 확인하십시오.

SASS 사용

시작하기

새 프로젝트를 만들고 프로젝트를 탐색하십시오.

ng new my-app --style=scss
cd my-app

부트 스트랩 설치

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

프로젝트 구성

에 빈 파일 _variables.scss을 만듭니다 src/.

를 사용하는 경우 bootstrap-sass다음을 추가하십시오 _variables.scss.

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

다음을 styles.scss추가하십시오.

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

테스트 프로젝트

app.component.html다음 마크 업을 열고 추가하십시오.

<button class="btn btn-primary">Test Button</button>

애플리케이션이 구성된 상태 ng serve에서 개발 모드에서 애플리케이션을 실행 하도록 실행하십시오. 브라우저에서 응용 프로그램으로 이동하십시오 localhost:4200. 부트 스트랩 스타일 버튼이 나타나는지 확인하십시오. 변수가 열려 있는지 확인 _variables.scss하고 다음을 추가하십시오.

$brand-primary: red;

글꼴 색이 변경된 것을 보려면 브라우저를 반환하십시오.

v1.0.0-beta.26 업데이트

당신은 부트 스트랩 가져 오기위한 새로운 방법에 대한 문서를 볼 수 있습니다 여기에

여전히 작동하지 않으면 ng serve 명령으로 다시 시작하십시오.

1.0.0 이하 버전 :

index.html 파일에서 부트 스트랩 CSS 링크가 필요합니다 (js 스크립트 필요 없음)

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

과

npm install ng2-bootstrap --save
npm install moment --save

my_project / src / system-config.ts 에 ng2-bootstrap 을 설치 한 후 :

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

그리고 my_project / angular-cli-build.js에서 :

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

공급 업체에 모듈을 넣으려면이 명령을 잊지 마십시오.

ng build

동일한 원리 인 다른 모듈에서 가져옵니다.

릴리스 후 위의 방법이 변경된 것 같습니다.이 링크를 확인하십시오.

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

프로젝트를 시작하다

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

ng-bootstrap 및 부트 스트랩 설치

npm install ng2-bootstrap bootstrap --save

src / app / app.module.ts를 열고 추가하십시오

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

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

angular-cli.json을 열고 스타일 배열에 새 항목을 삽입하십시오.

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

src / app / app.component.html을 열고 추가하여 모든 작품을 테스트하십시오

<alert type="success">hello</alert>

Angular 5의 부트 스트랩 4 단계

1. Angular 5 프로젝트 생성

   새로운 AngularBootstrapTest

2. 프로젝트 디렉토리로 이동

   cd AngularBootstrapTest

3. 부트 스트랩 다운로드

   npm 설치 부트 스트랩

4. 프로젝트에 부트 스트랩 추가

   4.1 열린 .angular-cli.json

   4.2 json에서 "styles"섹션을 찾으십시오

   4.3 부트 스트랩 CSS 경로를 아래와 같이 추가하십시오

   .

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

이제 각도 5 프로젝트에서 부트 스트랩 CSS를 성공적으로 추가했습니다.

부트 스트랩 테스트

5. 열다 src/app/app.component.html
6. 부트 스트랩 버튼 구성 요소 추가

.

<button type="button" class="btn btn-primary">Primary</button>

여기에서 버튼 스타일을 참조 할 수 있습니다 ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. 파일을 저장

8. 프로젝트를 실행

   ng 서브-오픈

이제 페이지에 부트 스트랩 스타일 버튼이 표시됩니다

참고 : ng serve 후에 부트 스트랩 경로를 추가 한 경우 변경 사항을 반영하기 위해 ng serve를 중지했다가 다시 실행해야합니다.

이것이 혼란스럽고 여기에 대한 답변이 완전히 혼합 되어 있기 때문에 BS4 저장소 의 공식 ui-team을 사용하는 것이 좋습니다 (그렇습니다 .NG -Bootstrap에 대한 저장소가 너무 많습니다.

BS4를 얻으려면 https://github.com/ng-bootstrap/ng-bootstrap 의 지침을 따르십시오 .

lib에서 인용 :

이 라이브러리는 ui-bootstrap 팀이 처음부터 작성했습니다. TypeScript를 사용하고 Bootstrap 4 CSS 프레임 워크를 대상으로합니다.

Bootstrap 4와 마찬가지로이 라이브러리는 진행중인 작업입니다. 구현중인 모든 사항을 보려면 문제 목록을 확인하십시오. 거기에 의견을 주시기 바랍니다.

그것을 위해 거기에 붙여 넣기를 복사하십시오.

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

설치가 끝나면 메인 모듈을 가져와야합니다.

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

남은 부분은 응용 프로그램 모듈에서 가져온 모듈을 나열하는 것입니다. 정확한 방법은 루트 (최상위 레벨) 모듈에 대해 약간 다르며,이 부분은 (Notice NgbModule.forRoot ())와 비슷한 코드로 끝나야합니다.

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

응용 프로그램의 다른 모듈은 NgbModule을 간단히 가져올 수 있습니다.

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

이것은 지금까지 가장 일관된 행동 인 것 같습니다

1. 부트 스트랩 설치

   npm install bootstrap@next

2. .angular-cli.json에 코드를 추가하십시오.

   "styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ],
   "scripts": [
     "../node_modules/jquery/dist/jquery.js",
     "../node_modules/tether/dist/js/tether.js",
     "../node_modules/bootstrap/dist/js/bootstrap.js"
   ],

3. 코드 스타일에 bootstrap.css를 마지막으로 추가하십시오.

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. 로컬 서버를 다시 시작하십시오.

다음 단계를 수행하십시오.

1. npm install --save bootstrap

2. .angular-cli.json에서 스타일 섹션에 추가하십시오.

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

그 후에는 ng 서브를 다시 시작해야합니다

즐겨

1. npm을 사용하여 부트 스트랩 설치

   npm install bootstrap

2. Popper.js 설치

npm install --save popper.js

3.Goto의 angular.json 각도 6 프로젝트 /에서 .angular-cli.json 각도 (5)과는 목록에 추가

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

이 시도

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Mike Brocchi의이 비디오를 시청하면 Angular-Cli 생성 프로젝트에 부트 스트랩을 추가하는 방법에 대한 유용한 정보가 있습니다. https://www.youtube.com/watch?v=obbdFFbjLIU (약 13:00 분)

1. bash에서 실행 npm install ng2-bootstrap bootstrap --save
2. 다음에서 추가 / 변경 angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

해당 프로젝트 디렉토리에서 터미널 / 명령 프롬프트를 열고 다음 명령을 입력하십시오.

npm install --save bootstrap

그런 다음 .angular-cli.json 파일을 열고

"styles": [ "styles.css" ],

로 변경

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

다 했어요

이제 새로운 ng-bootstrap 1.0.0-beta.5 버전에서는 Bootstrap의 마크 업 및 CSS를 기반으로 대부분의 기본 Angular 지시문을 지원합니다.

이 작업에 필요한 유일한 종속성은 bootstrap입니다. jquery 및 popper.js 종속성 을 사용할 필요가 없습니다 .

ng-bootstrap은 컴포넌트의 JavaScript 구현을 완전히 대체하는 것입니다. 따라서 bootstrap.min.js.angular-cli.json의 스크립트 섹션에 포함시킬 필요가 없습니다 .

부트 스트랩을 생성 된 프로젝트와 angular-cli 최신 버전과 통합 할 때 다음 단계를 따르십시오.

• .angular bootstrap.min.css-cli.json, 스타일 섹션에 참여하십시오.

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

• ng-bootstrap 종속성을 설치하십시오 .

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

• 이것을 메인 모듈 클래스에 추가하십시오.

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

• 기본 모듈 가져 오기 섹션에 다음을 포함하십시오.

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

• 해당 모듈 클래스 내에서 ng-bootstrap 구성 요소를 사용하려는 경우 하위 모듈에서도 다음을 수행하십시오.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• 이제 프로젝트는 사용 가능한 ng-bootstrap 구성 요소를 사용할 준비가되었습니다.

1. 부트 스트랩, popper.js 설치

npm install --save bootstrap npm install --save popper.js

3. 에서 SRC /을 styles.css , 수입 부트 스트랩의 스타일

@import '~bootstrap/dist/css/bootstrap.min.css';

1 단계 :
npm install bootstrap@latest --save-dev 최신 버전의 부트 스트랩이 설치되지만 버전 번호를 추가하여 지정된 버전을 설치할 수 있습니다.

2 단계 : styles.css를 열고 다음을 추가하십시오. @import "~bootstrap/dist/css/bootstrap.css"

부트 스트랩과 Jquery를 모두 추가하려면

npm install bootstrap@3 jquery --save

이 명령을 실행 한 후 부트 스트랩과 jquery가 추가 된 것을 확인할 수있는 node_modules 폴더를 확인하십시오.

angular-cli이제 필요한 모든 것을 찾을 수 있는 전용 위키 페이지 가 있습니다. TLDR을 bootstrap통해 설치 npm하고 .angular-cli.json파일의 "스타일"섹션에 스타일 링크를 추가 하십시오.

angular-cli 및 css를 사용하는 경우의 실제 예 :

1. 부트 스트랩 설치

npm 설치 부트 스트랩 테더 jquery --save

.angular-cli.json에 추가

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

npm을 사용하여 boostrap 설치

npm install boostrap@next --save

그런 다음 node_modules 폴더에서 boostrap.css 파일 (dist 내)을 확인하십시오.

"../node_modules/bootstrap/dist/css/bootstrap.css",

이 경로를 추가 | style.css 또는 style.scss 내에서 boostrap 가져 오기

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

그게 다야.

프로젝트 내에서 다음 명령을 실행하십시오.

npm install --save @bootsrap@4

이런 확인을 받으면

+ bootstrap@4.1.3
updated 1 package in 8.245s

그것은 boostrap 4가 성공적으로 설치되었음을 의미합니다. 그러나이를 사용하려면 angular.json 파일에서 "styles"배열을 업데이트해야합니다.

부트 스트랩이 기존 스타일을 대체 할 수 있도록 다음과 같이 업데이트하십시오.

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

모든 것이 올바르게 설정되었는지 확인 ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below하려면를 실행 한 다음 boostrap을 사용하는 것이 좋습니다.

이걸 여기에서 보지 못했습니다 :

@import 'bootstrap/scss/bootstrap.scss';

방금 style.scss 에이 줄을 추가했습니다. 제 경우에는 부트 스트랩 변수를 무시하고 싶었습니다.

angular 및 bootstrap으로 시작한 경우 간단한 대답은 다음 단계입니다. 1. 부트 스트랩의 노드 패키지를 dev 종속성으로 추가

npm install --save bootstrap

2. 부트 스트랩 스타일 시트를 angular.json 파일로 가져옵니다.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. 스타일링, 그리드 등에 부트 스트랩을 사용할 준비가되었습니다.

   <div class="container">My first bootstrap div</div>

내가 찾은 가장 좋은 부분은 타사 모듈 종속성없이 부트 스트랩을 사용하여 지시한다는 것입니다. 명령 npm install --save bootstrap@4.4등을 업데이트하여 언제든지 부트 스트랩을 업그레이드 할 수 있습니다 .

Angular 프로젝트에서 Bootstrap 4 를 추가 하는 방법에는 여러 가지가 있습니다 .

• Angular 프로젝트의 index.html 파일 섹션에 a 및 태그가 포함 된 Bootstrap CSS 및 JavaScript 파일 포함

• @import 키워드를 사용하여 Angular 프로젝트의 전역 styles.css 파일에서 Bootstrap CSS 파일 가져 오기

• 프로젝트의 angular.json 파일의 스타일 및 스크립트 배열에 Bootstrap CSS 및 JavaScript 파일 추가

이 명령을 실행

npm install bootstrap@3

당신의 Angular.json

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

부트 스트랩을 사용하여 각도로 설치할 수 있습니다 npm install bootstrap명령을 .

angular.json파일의 다음 설정 부트 스트랩 경로style.css 파일의 .

부트 스트랩 설치 및 설정 방법에 대한 전체 블로그 를 읽고 여기를 클릭하여 이에 대한 전체 블로그를 읽으십시오.

angular-cli를 사용하는 경우의 실제 예 :

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

CSS와 scss에서 작동합니다. 부트 스트랩 v3 및 v4를 사용할 수 있습니다.

부트 스트랩 회로도에 대한 자세한 내용은 여기 를 참조 하십시오 .