[twitter-bootstrap] Angular 4 : 부트 스트랩을 포함하는 방법?

아래 세부 단계 및 작업 예를 보려면 다음을 방문하십시오.
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ 하십시오.

적절한 설명과 함께 매우 자세한 단계.

단계 :
NPM에서 부트 스트랩 설치

다음으로 부트 스트랩을 설치해야합니다. 디렉토리를 우리가 만든 프로젝트 (cd angular-bootstrap-example)로 변경하고 다음 명령을 실행합니다.

부트 스트랩 3 :

npm install bootstrap --save

Bootstrap 4 (현재 베타 버전) :

npm install bootstrap@next --save

또는
대안 : 로컬 부트 스트랩 CSS
대안으로 부트 스트랩 CSS를 다운로드하여 프로젝트에 로컬로 추가 할 수도 있습니다. 웹 사이트에서 Bootstrap을 다운로드하고 폴더 스타일 (styles.css와 동일한 수준)을 만들었습니다.

노트 :
자산 폴더 아래에 로컬 CSS 파일을 배치하지 마십시오. Angular CLI로 프로덕션 빌드를 수행하면 .angular-cli.json에 선언 된 CSS 파일이 축소되고 모든 스타일이 단일 styles.css로 번들됩니다. 자산 폴더는 빌드 프로세스 중에 dist 폴더에 복사됩니다 (CSS 코드가 복제 됨). index.html에서 직접 가져 오는 경우에만 로컬 CSS 파일을 자산 아래에 배치하십시오.

CSS 가져 오기
1. NPM에서 설치된 Bootstrap에서 CSS를 가져 오는 두 가지 옵션이 있습니다.

강력한 텍스트 1 : .angular-cli.json 구성 :

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

2 : src / style.css 또는 src / style.scss에서 직접 가져 오기 :

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

저는 개인적으로 src / style.css의 모든 스타일을 .angular-cli.json에 이미 선언되어 있기 때문에 가져 오는 것을 선호합니다.

3.1 대안 : 로컬 부트 스트랩 CSS
부트 스트랩 CSS 파일을 로컬에 추가했다면 .angular-cli.json으로 가져 오기만하면됩니다.

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

또는
src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4 : ngx-bootstrap으로 JavaScript 구성 요소를 부트 스트랩 (옵션 1)
Bootstrap JavaScript 구성 요소 (JQuery가 필요함)를 사용할 필요가없는 경우, 이것이 필요한 설정입니다. 그러나 모달, 아코디언, 날짜 선택기, 도구 설명 또는 기타 구성 요소를 사용해야하는 경우 jQuery를 설치하지 않고 이러한 구성 요소를 어떻게 사용할 수 있습니까?

NPM에서도 설치할 수있는 ngx-bootstrap이라는 Bootstrap 용 Angular 래퍼 라이브러리가 있습니다.

npm install ngx-bootstrap --save

참고 NG2 – 부트 스트랩과 NGX-부트 스트랩은 같은 패키지입니다. ng2-bootstrap은 #itsJustAngular 이후에 ngx-bootstrap으로 이름이 변경되었습니다.

Angular CLI 프로젝트를 만들 때 Bootstrap과 ngx-bootstrap을 동시에 설치하려는 경우 :

npm install bootstrap ngx-bootstrap --save

4.1 : app.module.ts에 필수 부트 스트랩 모듈 추가

ngx-bootstrap을 살펴보고 app.module.ts에 필요한 모듈을 추가합니다. 예를 들어 Dropdown, Tooltip 및 Modal 구성 요소를 사용한다고 가정합니다.

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

ngx-bootstrap 모듈 공급자로 인해 각 모듈에 대해 .forRoot () 메서드를 호출하기 때문에 프로젝트의 모든 구성 요소와 모듈 (전역 범위)에서 기능을 사용할 수 있습니다.

또는 다른 모듈에서 ngx-bootstrap을 구성하려는 경우 (많은 bs 모듈을 가져와야하고 app.module을 복잡하게 만들고 싶지 않은 경우 구성 목적으로 만) 모듈을 만들 수 있습니다. app-bootstrap.module.ts, Bootstrap 모듈을 가져오고 (forRoot () 사용) 내보내기 섹션에서 선언합니다 (다른 모듈에서도 사용할 수있게 됨).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

마지막으로 app.module.ts에서 부트 스트랩 모듈을 가져 오는 것을 잊지 마십시오.

import {AppBootstrapModule} from ‘./app-bootstrap/app-bootstrap.module’;

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap은 Bootstrap 3 및 4에서 작동합니다. 또한 몇 가지 테스트를 수행했으며 대부분의 기능은 Bootstrap 2.x에서도 작동합니다 (예, 여전히 유지 관리 할 레거시 코드가 있습니다).

이것이 누군가를 돕기를 바랍니다!

---