각도는 bootstrap4를 어떻게 통합합니까? 방법 소개

이 글에서는 Bootstrap4를 각도에 통합하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "angularjs video tutorial", "bootstrap tutorial"

angular 통합 bootstrap4

1 터미널을 열고 명령을 입력하여 새로운 Angle 앱을 생성하세요

ng new app

2. bootstrap 통합

ngx-bootstrap 및 Bootstrap 설치ngx-bootstrap 和 Bootstrap

在新建的项目中打开终端，运行如下命令

npm install ngx-bootstrap bootstrap --save

3、使用bootstrap样式

配置项目：必须将项目其配置为包括Bootstrap CSS，才能使用bootstrap的样式。

在angular.json中增加bootstrap的样式：从项目的根目录打开文件angular.json，找到Style配置项，指定bootstrap.min.css的路径。完成后，它应如下所示：

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

注意：对angular.json进行更改时，您将需要重新启动ng服务以获取配置更改。

4、在app.module.ts中引入要使用的ngx-bootstrap module

打开src/app/app.module.ts 并添加想要使用的组件module，例如BsDropdownModule.forRoot()

새 프로젝트에서 터미널을 열고 다음 명령을 실행하세요

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
...

@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ...
})

3. 부트스트랩 스타일 사용

: 부트스트랩 스타일을 사용하려면 부트스트랩 CSS를 포함하도록 프로젝트를 구성해야 합니다.

angular.json에 부트스트랩 스타일 추가: 프로젝트의 루트 디렉터리에서angular.json 파일을 열고 스타일 구성 항목을 찾은 다음 bootstrap.min.css의 경로를 지정합니다. 완료되면 다음과 같이 표시됩니다. 🎜rrreee🎜 참고:angular.json을 변경할 때 구성 변경 사항을 적용하려면 ng 서비스를 다시 시작해야 합니다. 🎜🎜4. app.module.ts에서 사용하려는 ngx-bootstrap 모듈을 소개하세요🎜🎜 src/app/app.module.ts를 열고 ngx를 추가하세요. - BsDropdownModule.forRoot()와 같은 구성 요소 모듈을 사용하려는 부트스트랩 모듈입니다. 🎜rrreee🎜특별히 사용할 부트스트랩 구성 요소는 https://valor-software.com/ngx-bootstrap/#/documentation을 클릭하여 확인하세요. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 각도는 bootstrap4를 어떻게 통합합니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!