twitter-bootstrap bootstrap 적용 - angular-cli 프로젝트에 부트 스트랩을 추가하는 방법





13 Answers

핵심 단어> 글로벌 라이브러리 설치 ( https://github.com/angular/angular-cli 를 보면 답을 찾는 데 도움이됩니다.

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

먼저 npm에서 부트 스트랩을 설치하십시오.

npm install bootstrap@next

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

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

마지막으로 apps [0] .styles 배열에 부트 스트랩 CSS를 추가하십시오.

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

서브를 다시 실행하면 부트 스트랩 4가 앱에서 작동하고 있어야합니다.

이것은 최상의 해결책입니다. 그러나 서비스를 다시 시작하지 않으면 결코 작동하지 않습니다. 이 마지막 작업을 수행하는 것이 좋습니다.

앵귤러부트스트랩 ng-bootstrap ngx-bootstrap

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

부트 스트랩과 npm과의 의존성을 얻은 후, 우리의 첫 번째 접근법은 angular-cli-build.js 이들을 추가하는 것이 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을 사용합니까? 그러나 우리는 이러한 파일을 제공하여 사용 가능함을 보장합니다.

  • 우리의 ng build -prod 후에 의존성을 dist/vendor 복사 ng build -prod ? 그러나 그것은 앵글 클라이 (Angi-cli)가 빌드 부분을 '돌봐 줘서'제공해야하는 무언가처럼 보입니다.

  • src / system-config.ts에 jquery, bootstrap 및 tether를 추가하고 main.ts의 번들로 가져옵니다. 그러나 그것은 우리가 응용 프로그램의 코드에서 명시 적으로 사용하지 않을 것이라는 점을 고려할 때 잘못된 것처럼 보입니다 (예 : moment.js 또는 lodash와 같은 것)




처음에는 이러한 명령으로 테더, 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"
  ]



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

Bootstrap 포함

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

프로젝트 구성

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

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;

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




이것은 매우 혼란스러워졌고 여기에 대한 답변은 완전히 혼합되어 있습니다. 저는 공식 ui-team 과 함께 BS4 repo에 대해 제안 할 것입니다. (NG-Bootstrap을위한 많은 repos가 있습니다.

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 {
}

이것은 지금까지 가장 일관된 행동으로 보인다.




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

  1. npm install --save bootstrap

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

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

그 후에는 서비스를 다시 시작해야합니다.

즐겨







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

모두 완료되었습니다.




angular-cli 및 css를 사용할 경우의 작업 예제 :

1. 부트 스트랩 설치

npm은 부트 스트랩 테더 jquery - save를 설치합니다.

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



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

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

  1. src / styles.css 에서 부트 스트랩 스타일 가져 오기

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




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

    npm install bootstrap
    

2.Popper.js 설치

npm install --save popper.js

Angular 6 프로젝트 / Angular 5의 .angular-cli.json 프로젝트에서 3.Goto angular.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 i --save bootstrap@version 사용하여 부트 스트랩 설치 npm i --save bootstrap@version . 이제 nodemodules 폴더로 이동하고 bootstrap 폴더에서 'bootstrap.min.css.js'의 경로를 복사하고 전체 경로 (예 : nodemodules/bootstrap/css/bootstrap.min.css.js 붙여 넣으십시오 nodemodules/bootstrap/css/bootstrap.min.css.js )을 script 태그 파일 아래의 nodemodules/bootstrap/css/bootstrap.min.css.jsangular.json 하고 서버를 다시 실행하고 설치가 성공적인지 확인하십시오. 원하는 브라우저에서 프로그램을 실행하고 F12 키를 누르면 창이 열립니다 이제 요소 탭의 열린 헤드 태그로 이동하고 스타일 태그에 부트 스트랩이 표시되면 설치가 성공적으로 완료된 것입니다.




이 세 줄을 index.html의 Head 태그에 추가하면됩니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



Related