Angular 4: 부트스트랩을 어떻게 포함합니까?

programing

Angular 4: 부트스트랩을 어떻게 포함합니까?

stoneblock 2023. 5. 9. 22:01

Angular 4: 부트스트랩을 어떻게 포함합니까?

저는 백엔드 개발자이며 Angular4를 가지고 놀고 있습니다.그래서 저는 설치 튜토리얼인 https://www.youtube.com/watch?v=cdlbFEsAGXo 을 만들었습니다.

이것을 고려할 때, 어떻게 하면 "container-fluid" 또는 "col-md-6" 클래스를 사용할 수 있도록 앱에 부트스트랩을 추가할 수 있습니까?

npm install --save bootstrap

angular-cli루트 폴더 ) 내부에서 angular-cli.json(각형-cli.json)을 .styles과 같이 합니다.

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

각 6개 이상의angular-cli.json 로 변경되었습니다.angular.json.

비디오 보기 또는 단계를 따릅니다.

부트스트랩 4를 앵귤러 2 / 앵귤러 4 / 앵귤러 5 / 앵귤러 6에 설치합니다.

시키는 세 .
index.html에
npm을 사용하여 부트스트랩을 설치하고 angular.json 권장 경로 설정
을 사용하여 index.합니다.

프로젝트 디렉터리에 설치되어 있고 쉽게 액세스할 수 있기 때문에 npm을 사용하여 부트스트랩을 설치하는 두 가지 방법을 추천했습니다.

1 법방 1▁1

및 index. 파일에합니다.html 파일, Jquery CDN 경로는 popper.js CDN 경로입니다.

css 파일.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
js 파일.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "
Jquery.js
https://code.jquery.com/.2.1.slim.min.jshttps ://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs..com/ajax/libs/popper.js/1.12.9/umd/popper.min.jshttps ://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

2법2방2▁2

npm을 사용하여 설치

npm install bootstrap --save

부트스트랩 4 설치 후, 부트스트랩 4가 Jquery와 popper.js 패키지를 사용하고 있기 때문에 이 두 패키지가 없는 Jquery와 Popper.js라는 두 개의 자바스크립트 패키지가 더 필요합니다.

JQUERY 설치

npm install jquery --save

Popper.js 설치

npm install popper.js --save

이제 부트스트랩이 node_modules 폴더 내의 Project Directory에 설치됩니다.

이 파일에서 openangular.js를 사용할 수 있습니다. 각 디렉터리에서 해당 파일을 열고 styles[] 및 scripts[] 경로 내에 bootstrap, 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법3방3▁3

방법 3의 방법 2에 따라 npm을 사용하여 부트스트랩을 설치합니다. 우리는 angular.json 파일 대신 index.html 파일 내부의 경로만 설정합니다.

부트스트랩.디버깅

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

부트스트랩.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 명령을 사용하면 패키지 내부의 각 앱에 종속성이 저장됩니다.json 파일.

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

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

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

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

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

아래와 같이 각 앱의 루트 폴더에 있는 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';

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

@types 시스템을 다루는 Angular4에서는 다음과 같은 일을 해야 합니다.

도,

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와 bootstrap 둘 다 사용하기 시작합니다.

아래의 자세한 단계 및 작업 예는 https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ 을 참조하십시오.

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

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

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

부트스트랩 3의 경우:

npm install bootstrap --save

부트스트랩 4(현재 베타 버전)의 경우:

npm install bootstrap@next --save

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

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

CSS 1을(를) 가져오는 중입니다.NPM에서 설치된 부트스트랩에서 CSS를 가져오는 두 가지 옵션이 있습니다.

strong text1: .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';

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

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

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

또는 src/style.dll

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

4: ngx-bootstrap이 있는 부트스트랩 JavaScript 구성 요소(옵션 1) Bootstrap JavaScript 구성 요소(JQuery가 필요함)를 사용할 필요가 없는 경우 이 설정이 필요한 전부입니다.하지만 modals, accordion, datepicker, tooltips 또는 기타 구성요소를 사용해야 한다면 jQuery를 설치하지 않고 어떻게 이러한 구성요소를 사용할 수 있습니까?

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

npm install ngx-bootstrap --save

Noteng2-bootstrap과 ngx-bootstrap은 동일한 패키지입니다.ng2-bootstrap은 #itJustAngular의 이름을 따서 tongx-bootstrap으로 이름이 바뀌었습니다.

Angular CLI 프로젝트를 생성할 때 부트스트랩과 ngx-bootstrap을 동시에 설치하려는 경우:

npm install bootstrap ngx-bootstrap --save

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

ngx-bootstrap을 통해 app.module.ts에 필요한 모듈을 추가합니다.예를 들어 드롭다운, 도구 설명 및 모달 구성 요소를 사용한다고 가정합니다.

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 모듈을 생성할 수 있습니다.부트스트랩 모듈을 가져오고(루트()에 사용) 내보내기 섹션에서도 선언합니다(다른 모듈에서도 사용 가능).

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로 가져오는 것을 잊지 마십시오.

'/app-bootstrap/app-bootstrap.module'에서 {AppBootstrapModule}을(를) 가져옵니다.

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

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

이것이 누군가에게 도움이 되기를 바랍니다!

Sass/Scss를 사용하는 경우 다음을 수행합니다.

Donpm 설치

npm install bootstrap --save

가추를 합니다.import파일에 문, "/scss 파일",

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

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.json not angular-cli.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-알파.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"
  ]

그리고 이제.갈 준비가 됐어요.

제가 볼 수 있듯이, 당신은 이미 많은 답변을 얻었지만, 당신은 이 방법을 시도해 볼 수 있습니다.

각도에서 jquery를 사용하지 않는 것이 가장 좋은 방법입니다. 저는 jquery에 의존하는 bootstrap js 구성 요소를 사용하지 않고 부트스트랩을 설치하는 https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md 방법을 선호합니다.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

각진 상태에서 코드 jquery를 자유롭게 유지합니다.

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

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

참조를 위해 이것을 확인하십시오 - https://github.com/ng-bootstrap/ng-bootstrap

'@ng-bootstrap/ng-bootstrap'에서 다음 가져오기를 app.module 가져오기 {NgbModule}에 추가하고 가져오기에 NgbModule을 추가합니다.

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

1단계: npm 부트스트랩 설치 --저장

단계: 2: 아래 코드를 angular.json node_modules/bootstrap/dist/css/bootstrap.min.css에 붙여넣습니다.

3단계: ng 서브

부트스트랩 현재 버전 4를 각도에 추가하는 중:

1/ 먼저 다음을 설치해야 합니다.

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

2/ 그런 다음 angular.json의 스크립트에 필요한 스크립트 파일을 추가합니다.

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

3/마지막으로 angular.json의 스타일 배열에 부트스트랩 CSS를 추가합니다.

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

이 링크를 확인합니다.

angular-cli.json에 추가

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

일이 될 거예요, 확인했습니다.

온라인에서 부트스트랩을 사용하고 프로그램이 인터넷에 액세스할 수 있는 경우 추가할 수 있습니다.

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

main style.css 파일로 들어가십시오. 가장 간단한 방법입니다.

참조: 각도.이오

참고. 이 솔루션은 unkg 웹 사이트에서 부트스트랩을 로드하며 인터넷에 액세스할 수 있어야 합니다.

Angular 6 CLI, 다음을 수행합니다.

ng @ng-bootstrap/schematics 추가

최신 버전을 설치하려면 $npm i --save bootstrap@next를 사용합니다.

먼저 npm을 사용하여 프로젝트에 부트스트랩을 설치합니다.npm i bootstrap그런 다음 프로젝트에서 ur style.dll 파일을 열고 이 줄을 추가합니다.

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

그리고 그것이 당신의 프로젝트에 추가된 부트스트랩입니다.

Angular 2, 4, 5, 6용 부트스트랩 4 설치 +:

|+> npm으로 부트스트랩 설치

npm install bootstrap --save

npm install popper.js --save

|+> 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"
    ]
    ...
}]

Angular 6+에 있는 경우 다음 코드 행을 Angular.json에 추가합니다.

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

다음을 사용하여 부트스트랩 및 jquery용 cdn으로 작업하거나 앱에 직접 bootstarp를 설치합니다.

npm install ngx-bootstrap --save

또한 https://ng-bootstrap.github.io/ #/home을 사용하지만 이것은 적절하지 않습니다.

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

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

'programing' 카테고리의 다른 글

모듈을 찾을 수 없음: 오류:에서 'fs'을(를) 확인할 수 없습니다. (0)	2023.05.09
C# 8은 를 지원합니까?NET Framework? (0)	2023.05.09
iPhone UI 텍스트 필드 - 자리 표시자 텍스트 색상 변경 (0)	2023.05.09
다른 분기에서 Git에 분기 작성 (0)	2023.05.09
VB에서 16진수 상수를 선언합니다.그물 (0)	2023.05.09

현재글Angular 4: 부트스트랩을 어떻게 포함합니까?

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

sql-server, reactjs, Git, Excel, jQuery, angularJS, mysql, Swift, wordpress, Ajax, Android, Oracle, C, MariaDB, MongoDB, Spring-boot, python, angular, asp.net, json,

Today :
Yesterday :

일	월	화	수	목	금	토
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

stoneblock

Angular 4: 부트스트랩을 어떻게 포함합니까?

Angular 4: 부트스트랩을 어떻게 포함합니까?

패키지 설치

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

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

Angular 4 - Bootstrap / @ng-bootstrap 설정

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

Angular 4: 부트스트랩을 어떻게 포함합니까?

Angular 4: 부트스트랩을 어떻게 포함합니까?

패키지 설치

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

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

Angular 4 - Bootstrap / @ng-bootstrap 설정

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바