itsource

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

mycopycode 2023. 5. 7. 11:25

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

angular-cli 1.0.0-beta.5(노드 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>

은 이은잘작니다습했동것▁with▁fine▁worked와 잘 어울렸습니다.ng serve하지만 우리가 빌드를 만들자마자-prod 이 속합표시니다고다라졌사이성▁flag▁all다.dist/vendor(으악!)

angular-cli로 생성된 프로젝트에서 이러한 시나리오(즉, 부트스트랩 스크립트 로드)를 어떻게 처리해야 합니까?

우리는 다음과 같은 생각을 했지만, 어느 쪽으로 가야 할지 잘 모르겠습니다.

CDN을 사용하시겠습니까? 하지만 우리는 이 파일들이 사용 가능하도록 보장하기 위해 이 파일들을 제공하고 싶습니다.
을 종성사에 복사dist/vendor우리들의 우리뒤 에.ng build -prod하지만 그것은 빌드 파트를 '관리'하기 때문에 앵귤러-cli가 제공해야 하는 것처럼 보입니다.
jquery에서 및 추가, 파일 :src/system-config.ts.main.ts그러나 우리가 애플리케이션 코드에서 명시적으로 사용하지 않을 것이라는 점을 고려하면 잘못된 것 같습니다(예: moment.js 또는 lodash와 달리).

중요 업데이트: ng2-bootstrap이 ngx-bootstrap으로 대체되었습니다.

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

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

먼저 터미널에서 다음 명령을 사용하여 Angular-cli 버전을 확인합니다.

ng -v

Angular-cli 버전이 1.0.0-beta.11-webpack보다 크면 다음 단계를 수행해야 합니다.

ngx-bootstrap 및 부트스트랩 설치:

npm install ngx-bootstrap bootstrap --save

이 라인은 현재 부트스트랩 3을 설치하지만 향후 부트스트랩 4를 설치할 수 있습니다.ngx-bootstrap은 두 버전을 모두 지원합니다.

src/app/app.module.ts를 열고 다음을 추가합니다.

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

angular-cli.json(angular6 이상의 파일 이름이 angular.json으로 변경된 경우)을 열고 새 항목을 에 삽입합니다.styles매개 변수:
```
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
```
src/app/app.component.html을 열고 다음을 추가합니다.
```
<alert type="success">hello</alert>
```

1.0.0-1987.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 에서 > 글로벌 라이브러리 설치 키워드를 찾아보면 답을 찾을 수 있습니다.

해당 문서에 따라 다음 단계를 수행하여 부트스트랩 라이브러리를 추가할 수 있습니다.

먼저 npm에서 부트스트랩을 설치합니다.

npm install bootstrap

그런 다음 angular.json 파일의 apps[0] 스크립트에 필요한 스크립트 파일을 추가합니다.

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

위의 단계는 드롭다운 메뉴 표시와 같은 특정 기능이 작동하는 데 중요합니다.

마지막으로 부트스트랩 CSS 파일을 apps[0].styles 배열의 angular.json 파일에 추가합니다.

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

서버를 실행 중인 경우 서버를 다시 시작합니다. 그렇지 않으면 변경 내용이 표시되지 않습니다.이제 부트스트랩 4+가 앱에서 작동해야 합니다.

대체 솔루션:Angular에 부트스트랩을 추가하는 또 다른 해결책은 Angular로 구동되는 부트스트랩 구성 요소를 제공하는 ngx-bootstrap 프로젝트를 사용하는 것입니다.Angular 또는 ngx-bootstrap 프로젝트의 자체 설명서와 함께 ngx-boostrap 사용에 대한 자세한 내용은 이 답변을 참조하십시오.

다음을 수행합니다.

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";

스크립트의 경우 다음과 같이 angular-cli.json 파일에 파일을 추가해야 합니다(Angular 버전 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"
  ]

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

부트스트랩 포함

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

CSS 사용

시작하기

새 프로젝트를 만들고 프로젝트로 이동

ng new my-app
cd my-app

부트스트랩 설치 중

새 프로젝트가 생성되고 준비되면 다음에는 프로젝트에 부트스트랩을 종속성으로 설치해야 합니다. --save패키지에 종속성이 저장됩니다.제이손

# 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응용 프로그램을 개발 모드로 실행합니다.에서 응용 인 "Application"으로 합니다.localhost:4200부트스트랩 스타일 버튼이 나타나는지 확인합니다.

SAS 사용

시작하기

새 프로젝트를 만들고 프로젝트로 이동

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.scsssrc/.

사중인경우를 .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응용 프로그램을 개발 모드로 실행합니다.에서 응용 인 "Application"으로 합니다.localhost:4200부트스트랩 스타일 버튼이 나타나는지 확인합니다.하려면 open open을 선택합니다._variables.scss다음을 추가합니다.

$brand-primary: red;

브라우저를 돌려 변경된 글꼴 색을 확인합니다.

v1.0.0-베타 업데이트.26

부트스트랩을 가져오는 새로운 방법은 문서에서 확인할 수 있습니다.

그래도 작동하지 않으면 ng server 명령을 사용하여 다시 시작합니다.

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

동일한 원리인 다른 모듈에서 가져오기.

부트스트랩 설치
```
npm install bootstrap@next
```

.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"
],

마지막으로 코드 style.scss에 bootstrap.css를 추가합니다.
```
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
```
로컬 서버 다시 시작

Angular 5에서 부트스트랩 4를 위한 단계

Angular 5 프로젝트 생성

ng new Angular 부트스트랩시험
프로젝트 디렉터리로 이동

cd Angular 부트스트랩시험
부트스트랩 다운로드

npm 부트스트랩 설치
프로젝트에 부트스트랩 추가

4.1 open .vmx-cli.json

4.2 json에서 "스타일" 섹션 찾기

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

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

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

부트스트랩 테스트

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

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

단추 스타일은 여기서 참조할 수 있습니다(https://getbootstrap.com/docs/4.0/components/buttons/ ).

파일 저장
프로젝트를 실행합니다.

ng serve --open

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

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

간단한 2단계

부트스트랩 설치(최신 버전 설치 중)

npm install bootstrap@next

프로젝트로 가져와서 style.scss에서 아래 줄을 추가합니다.

@import '~bootstrap';

가져오기 순서가 중요할 수 있습니다. 부트스트랩을 사용하는 다른 라이브러리가 있는 경우 이 가져오기 문을 맨 위에 유지하십시오.

끝.:)

참고: 아래는 내 버전입니다.

각도 : 9

노드: v10.16.0

npm : 6.9.1

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

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.sys.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.dll을 열고 다음을 추가하여 모든 작업을 테스트합니다.

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

이 명령 실행

npm install bootstrap@3

당신의 Angular.json

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

이것이 너무 혼란스러워졌고 여기서 답이 완전히 섞였기 때문에 BS4 repo를 위한 공식 ui-팀과 함께 가는 것을 제안할 것입니다(네, NG-Bootstrap을 위한 많은 레포가 있습니다).

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

lib에서 인용:

이 라이브러리는 ui-bootstrap 팀에 의해 처음부터 구축되고 있습니다.우리는 TypeScript를 사용하고 있으며 Bootstrap 4 CSS 프레임워크를 목표로 하고 있습니다.

부트스트랩 4와 마찬가지로 이 라이브러리는 진행 중인 작업입니다.구현 중인 모든 사항을 보려면 문제 목록을 확인하십시오.거기서 자유롭게 댓글 달아주세요.

이를 위해 무엇이 있는지 복사하여 붙여넣기만 하면 됩니다.

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

설치가 완료되면 기본 모듈을 가져와야 합니다.

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

남은 부분은 애플리케이션 모듈에 가져온 모듈을 나열하는 것뿐입니다.정확한 방법은 루트(최상위 레벨) 모듈에 대해 약간 다를 수 있습니다(루트()의 경우 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 {
}

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

다음 단계를 수행합니다.

npm install --save bootstrap
.angular-cli.json에서 스타일 섹션에 다음을 추가합니다.

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

그런 다음 ng 서버를 다시 시작해야 합니다.

즐거운 시간 되세요.

npm을 사용하여 부트스트랩 설치
```
npm install bootstrap
```

2. Popper.js를 설치합니다.

npm install --save popper.js

3.Angular 6 project의 Angular.json /.angular-cli.json을 Angular 5의 .angular-cli.json으로 이동하고 나열된 항목을 추가합니다.

 "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 --save bootstrap

그러면 우리는 Bootstrap Sass를 우리의 애플리케이션으로 가져와야 합니다.styles.scss에서 다음 행을 추가합니다.

@import "../node_modules/bootstrap/scss/bootstrap.scss";

자세한 내용은...

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

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 버전은 부트스트랩의 마크업과 CSS를 기반으로 한 대부분의 네이티브 Angular 디렉티브를 지원합니다.

은 이작에필유종같다다습니음과입니다.bootstrapjquery 및 popper.js 종속성을 사용할 필요가 없습니다.

.ng -bootstrap에 대한 JavaScript 입니다.그래서 당신은 그것을 포함할 필요가 없습니다.bootstrap.min.js.vmx-cli.json의 스크립트 섹션에 있습니다.

부트스트랩을 Angular-cli 최신 버전의 생성된 프로젝트와 통합할 때는 다음 단계를 수행합니다.

포함bootstrap.min.css에서 .vmdk-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 구성 요소를 사용할 준비가 되었습니다.

부트스트랩, popper.js 설치

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

src/styles.css에서 부트스트랩의 스타일을 가져옵니다.

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

새로운 버전의 Angular-CLI에서는 많은 솔루션이 더 이상 작동하지 않습니다.

app.component.html의 맨 위에 다음 링크 태그를 추가하고 맨 아래에 스크립트 태그를 추가할 수 있습니다.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

그러나 ngx-bootstrap을 사용하려면 프로젝트 디렉토리에서 다음 명령을 실행합니다.

ng add ngx-bootstrap

app.component.html의 내용으로 다음을 사용하여 테스트합니다.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

부트스트랩 4.5용, 각도 10

npm install bootstrap --save

부트스트랩 가져오기 문을 사용하여 styles.scss를 이렇게 업데이트합니다.

 $theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);

@import "~bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

부트스트랩 가져오기는 변수를 덮어쓴 후에 수행해야 합니다.[이 예는 또한 자신만의 테마 색상을 넣을 수 있는 방법을 보여줍니다.]

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

서행실npm install ng2-bootstrap bootstrap --save
/경가에서 다음을 합니다.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 bootstrap@next

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

프로젝트 내에서 다음 명령 실행

npm install --save @bootsrap@4

그리고 만약 당신이 이와 같은 확인을 받는다면.

+ bootstrap@4.1.3
updated 1 package in 8.245s

이는 부스트랩 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그러면 당신은 부스트랩을 사용하는 것이 좋습니다.

1단계:
npm install bootstrap@latest --save-dev하면 최신 은 버전 번호인 하여 할 수 .

styles styles.css 파일을 합니다.@import "~bootstrap/dist/css/bootstrap.css"

부트스트랩과 Jquery를 모두 추가하는 경우

npm install bootstrap@3 jquery --save

이 명령을 실행한 후 node_dll 폴더를 확인하십시오. 그러면 부트스트랩과 jquery가 추가된 것을 확인할 수 있습니다.

각도 및 부트스트랩으로 시작한 지 얼마 되지 않은 경우 간단한 답변은 1단계입니다.부트스트랩의 노드 패키지를 개발 종속성으로 추가

npm install --save bootstrap

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

"styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
스타일, 그리드 등에 부트스트랩을 사용할 준비가 되었습니다.

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

제가 발견한 가장 좋은 점은 타사 모듈에 의존하지 않고 부트스트랩을 사용하여 지시한다는 것입니다. " 을명업기만하면언제부지있수다업습니그할드이레을랩트령트스든데하트"만 업데이트하면 언제든지 업그레이드할 수 .npm install --save bootstrap@4.4

2020년 8월 업데이트: Angular 10

"Angular ≥ 9 CLI 프로젝트가 있다면 우리의 스키마를 사용하여 ng-bootstrap 라이브러리를 추가하기만 하면 됩니다."프로젝트 폴더 내에서 다음 명령을 실행하기만 하면 됩니다.모든 구성이 자동으로 추가됩니다.

ng add @ng-bootstrap/ng-bootstrap

ng s

샘플 스니펫:

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

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

먼저 부트스트랩 설치

npm i bootstrap

angular.json 스타일로 가져오기

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

angular-cli이제 필요한 모든 것을 찾을 수 있는 전용 Wiki 페이지가 있습니다.TLDR, 설치bootstrap경유로npm를 당신의 "에 추가하세요..angular-cli.json

언급URL : https://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project

'itsource' 카테고리의 다른 글

.gitignore의 댓글? (0)	2023.05.07
두 개체를 비교하여 차이점을 찾습니다. (0)	2023.05.07
푸시되지 않은 깃 커밋 제거 (0)	2023.05.07
mongoose의 많은 부분을 업데이트합니다. (0)	2023.05.07
라이브러리 추가/J이클립스 안드로이드 프로젝트의 AR (0)	2023.05.07

현재글Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

JavaScript, vuejs2, spring-boot, vuex, oracle, Reactjs, MongoDB, angularJs, Python, PowerShell, MySQL, mariadb, php, bash, json, C, java, sql-server, Wordpress, git,

Today :
Yesterday :

mycopycode

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

부트스트랩 포함

CSS 사용

시작하기

부트스트랩 설치 중

프로젝트 구성

테스트 프로젝트

SAS 사용

시작하기

부트스트랩 설치 중

프로젝트 구성

테스트 프로젝트

'itsource' 카테고리의 다른 글

'itsource'의 다른글

티스토리툴바

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

Angular-cli 프로젝트에 부트스트랩을 추가하는 방법

부트스트랩 포함

CSS 사용

시작하기

부트스트랩 설치 중

프로젝트 구성

테스트 프로젝트

SAS 사용

시작하기

부트스트랩 설치 중

프로젝트 구성

테스트 프로젝트

'itsource' 카테고리의 다른 글

'itsource'의 다른글

관련글

티스토리툴바