Angular 4 : 부트 스트랩을 포함하는 방법?

Angular 4 : 부트 스트랩을 포함하는 방법?

---

저는 백엔드 개발자이고 Angular4를 사용하고 있습니다. 그래서이 설치 튜토리얼을했습니다 : https://www.youtube.com/watch?v=cdlbFEsAGXo .

이 점을 감안할 때 "container-fluid"또는 "col-md-6"클래스 등을 사용할 수 있도록 어떻게 부트 스트랩을 앱에 추가 할 수 있습니까?

---

npm install --save bootstrap

그런 다음 angular-cli.json (프로젝트의 루트 폴더 내)에서 다음 styles과 같이 부트 스트랩 CSS 파일을 찾아 추가합니다.

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

UPDATE :
각 6 +에서이 angular-cli.json 변경되었습니다 에 angular.json.

---

비디오 시청 또는 단계 따르기

각도 2 / 각도 4 / 각도 5 / 각도 6에 부트 스트랩 4 설치

프로젝트에 부트 스트랩을 포함하는 세 가지 방법이 있습니다
1) index.html 파일에 CDN 링크 추가
2) npm을 사용하여 부트 스트랩 설치 및 angular.json에 경로 설정 권장
3) npm을 사용하여 부트 스트랩 설치 및 index.html 파일에 경로 설정

npm을 사용하여 부트 스트랩을 설치하는 두 가지 방법을 따르는 것이 좋습니다. 이는 프로젝트 디렉토리에 설치되고 쉽게 액세스 할 수 있기 때문입니다.

방법 1

각 프로젝트 index.html 파일에 Bootstrap, Jquery 및 popper.js CDN 경로 추가

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

방법 2

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

npm install bootstrap --save

Bootstrap 4를 설치 한 후 Jquery와 Popper.js라는 두 개의 추가 javascript 패키지가 필요합니다.이 두 패키지 부트 스트랩이없는 경우 Bootstrap 4는 Jquery 및 popper.js 패키지를 사용하므로 설치해야합니다.

2) JQUERY 설치

npm install jquery --save

3) Popper.js 설치

npm install popper.js --save

이제 부트 스트랩이 node_modules 폴더 내의 프로젝트 디렉토리에 설치됩니다.

열린 angular.json 이 파일이 각 디렉토리에 해당 파일을 열고 내부 부트 스트랩, JQuery와, 그리고 popper.js 파일의 경로를 추가하려면에서 사용할 수있는 스타일 [] 와 스크립트는 [] 경로는 예를 들어 아래를 참조

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

참고 : js 파일의 시퀀스를 변경하지 마십시오 .

방법 3

npm을 사용하여 부트 스트랩 설치 방법 3의 방법 2 를 따르십시오. angular.json 파일 대신 index.html 파일 내부에 경로를 설정했습니다.

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

이제 부트 스트랩이 잘 작동합니다.

---

각도로 부트 스트랩을 구성 / 통합 / 사용하려면 먼저 npm을 사용하여 부트 스트랩 패키지를 설치해야합니다.

패키지 설치

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

참고 : --save 명령은 package.json 파일 내의 각도 앱에 종속성을 저장합니다.

위 단계에서 패키지를 설치 했으므로 이제 아래 옵션 중 하나 또는 둘 다를 사용하여 이러한 스타일을로드해야한다고 Angular CLI에 알릴 수 있습니다.

옵션 1) src / styles.css 파일에 추가

아래와 같이 종속성을 추가 할 수 있습니다.

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

옵션 2) angular-cli.json 또는 angular.json에 추가

아래와 같이 angular 앱의 루트 폴더에있는 angular-cli.json 또는 angular.json 파일에 스타일 css 파일을 추가 할 수 있습니다.

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

---

Angular 4-Bootstrap / @ ng-bootstrap 설정

먼저 아래 명령을 사용하여 프로젝트에 부트 스트랩 을 설치 합니다.

npm install --save bootstrap

그런 다음이 줄 "../node_modules/bootstrap/dist/css/bootstrap.min.css"을 스타일의 angular-cli.json 파일 (루트 폴더)에 추가합니다.

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

위의 종속성을 설치 한 후 다음을 통해 ng-bootstrap 을 설치하십시오 .

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

일단 설치되면 메인 모듈을 가져와야합니다.

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

그런 다음 모든 부트 스트랩 위젯 (예 : 캐 러셀, 모달, 팝 오버, 툴팁, 탭 등)과 몇 가지 추가 기능 (날짜 선택기, 등급 지정, 시간 선택기, 자동 검색)을 사용할 수 있습니다.

---

에서 Angular4 당신이 처리로 @types의 시스템, 당신은 일을 다음을 수행해야

하다,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

유형 배열을 찾고 jquery 및 부트 스트랩 항목을 추가 합니다.

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

헤드 섹션에 다음 항목을 추가하십시오.

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

그리고 jquery 와 부트 스트랩을 모두 사용하십시오.

---

이 링크 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap을 참조하십시오 .

angular-cli를 사용하여 angular 4에 최신 부트 스트랩을 포함하는 방법에 대한 단계별 지침을 제공합니다.

---

이 질문이 점점 더 많은 답변을 얻음에 따라 저에게 도움이 된 것을 표시하겠습니다.

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

---

Sass / Scss를 사용하는 경우 다음을 따르십시오.

npm 설치

npm install bootstrap --save

importsass / scss 파일 에 문을 추가 하십시오.

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

---

아래의 세부 단계 및 작업 예제를 보려면 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에서도 작동합니다 (예, 여전히 유지 관리 할 레거시 코드가 있습니다).

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

---

Angular 7.0.0에서 테스트 됨

1 단계-필요한 종속성 설치

npm 설치 부트 스트랩 (특정 버전을 원하면 버전 번호를 지정하십시오.)

npm install popper.js (특정 버전을 원할 경우 버전 번호를 지정하십시오.)

npm 설치 jquery

내가 시도한 버전 :

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

2 단계 : angular.json에서 아래 순서대로 라이브러리를 지정합니다. 최신 angular에서 구성 파일 이름은 angular-cli.json이 아닌 angular.json입니다.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

---

대한 부트 스트랩 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

그런 다음이 작업이 완료되면 다음을 실행하십시오.

npm install

지금. .angular-cli.json 파일을 열고 부트 스트랩, jquery 및 테더를 가져옵니다.

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

그리고 지금. 갈 준비가되었습니다.

---

프로젝트에서 다음 명령을 실행합니다. 즉 npm install bootstrap@4.0.0-alpha.5 --save

위의 종속성을 설치 한 후 부트 스트랩 모듈을 설치하는 다음 npm 명령을 실행합니다. npm install --save @ ng-bootstrap / ng-bootstrap

Check this out for the reference - https://github.com/ng-bootstrap/ng-bootstrap

Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports

In your stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

---

Step 1 : npm install bootstrap --save

Step : 2 : Paste below code in angular.json node_modules/bootstrap/dist/css/bootstrap.min.css

Step 3 : ng serve

---

As i can see you already got lots of answer but you can try this method to .

Its best practice not to use jquery in angular, I prefer https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md method to install bootstrap without using bootstrap js component which depends on jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Keep your code jquery free in angular

---

add into angular-cli.json

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

It will be work, i checked it.

---

If you want to use bootstrap online and your application has access to the internet you can add

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Into you'r main style.css file. and its the simplest way.

Reference : angular.io

Note. This solution loads bootstrap from unpkg website and it need to have internet access.

---

Angular 6 CLI, just do:

ng add @ng-bootstrap/schematics 

---

To install the latest use $ npm i --save bootstrap@next

---

first install bootstrap in your project using npm npm i bootstrap after that open ur style.css file in your project and add this line

@import "~bootstrap/dist/css/bootstrap.css";

and that's it bootstrap added in your project

---

|*| Installing Bootstrap 4 for Angular 2, 4, 5, 6 + :

|+> Install Bootstrap with npm

npm install bootstrap --save

npm install popper.js --save

---

|+> Add styles and scripts to angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

---

you work with cdn for bootstrap and jquery or install bootstarp directly in app with:

npm install ngx-bootstrap --save

also use https://ng-bootstrap.github.io/#/home, but this is not approperiate

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

참고URL : https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap