Angular의 부트스트랩

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

Angular의 부트스트랩

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

이 간단하고 쉬운 단계를 따르면 Angular 애플리케이션에서 Bootstrap을 사용할 수도 있습니다.

먼저 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';

이 단계를 따르면 모든 Angular 애플리케이션에 부트스트랩을 쉽게 설치할 수 있고 부트스트랩 클래스를 사용하여 반응형 및 모바일 친화적으로 만들 수 있습니다.