Angular에 부트스트랩 설치

Angular에서 Bootstrap을 설치하고 사용하는 방법을 소개합니다.

Angular에 부트스트랩 설치

Bootstrap은 모바일 친화적인 반응형 웹사이트를 빠르게 디자인하는 데 사용되는 CSS 프레임워크입니다. 널리 사용되는 가장 대중적인 프레임워크입니다.

이 간단하고 쉬운 단계에 따라 Angular 애플리케이션에 Bootstrap을 설치할 수도 있습니다. 새 Angular 응용 프로그램을 만들기 위해 터미널에서 아래 명령을 수행합니다.

# Terminal
ng new my-app
cd my-app

위의 명령은 새 Angular 프로젝트를 만들고 my-app 프로젝트 디렉토리로 이동합니다.

이제 Angular 프로젝트에 Bootstrap을 설치해야 하고, 그러기 위해서는 터미널로 이동하여 다음 명령을 실행해야 합니다.

# cli
npm install bootstrap --save

이 명령은 Angular 프로젝트에 Bootstrap을 설치합니다. 그러나 프로젝트에서 SASS를 사용하는 경우 대신 bootstrap-sass를 설치하십시오.

# cli
npm install bootstrap-sass --save

Bootstrap을 설치하면 노드 모듈에 저장되며 이제 다음 가져오기 명령을 사용하여 Bootstrap을 사용하려는 모든 곳에서 Bootstrap CSS를 가져오기만 하면 됩니다.

# angular
@import '~bootstrap/dist/css/bootstrap.css';

또는 SASS를 사용하는 경우.

# angular
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

다음의 간단한 단계에 따라 Bootstrap 클래스를 사용하여 Angular 애플리케이션에 Bootstrap을 쉽게 설치할 수 있으며 반응형 및 모바일 친화적으로 만들 수 있습니다.