0songha0

Bootstrap 개념 / Vue 프로젝트에서 Bootstrap 설치 및 사용 방법

부트스트랩이란?

사전에 정의된 CSS 등을 사용하여 예쁜 HTML을 만들 수 있는 UI 프레임워크입니다.
반응형 웹 페이지 제작을 쉽게 도와줘서 한 페이지에서 PC 및 모바일 서비스가 가능합니다.

Vue 프레임워크 사용 시
Vue에 특화된 BootstrapVue 또는 Vuetify 라이브러리도 활용 가능합니다.

Bootstrap 설치 방법

CDN 방식

<!-- Bootstrap CSS -->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
  integrity="sha384-..." 
  crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-..." 
  crossorigin="anonymous">
</script>

bootstrap 설치 없이, HTML header에 삽입하면 바로 사용 가능한 방법입니다.

정적 리소스 방식

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script src="/js/bootstrap.bundle.min.js"></script>

정적 리소스 폴더에 Bootstrap 파일을 넣고 HTML header에 경로 지정해서 사용하는 방식입니다.

정적 리소스 폴더 경로
src/main/resources/static

Vue 프로젝트에 Bootstrap 설치

npm install bootstrap

Vue 프로젝트 경로에서 npm 명령어로 bootstrap 모듈을 설치합니다.
아래와 같이 main.js에 import 시 모든 페이지에서 사용할 수 있습니다.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.js';

부트스트랩 아이콘 라이브러리만 설치하는 경우

npm install bootstrap-icons

Vue 프로젝트 경로에서 npm 명령어로 bootstrap 아이콘 모듈만 설치합니다.
아래와 같이 Javascript 코드에 import 해서 사용할 수 있습니다.

import 'bootstrap-icons/font/bootstrap-icons.css';

// 부트스트랩 아이콘 HTML 예시
<i class="bi bi-alarm"></i>

https://icons.getbootstrap.kr
위 링크에서 원하는 아이콘 HTML 코드를 복사해 사용할 수 있습니다.

Bootstrap 사용법

Bootstrap Docs

https://getbootstrap.com/docs/5.3/getting-started/introduction/
위 Bootstrap 공식 문서 좌측에서 원하는 UI 요소를 선택하고, HTML 코드를 복사할 수 있습니다.
HTML 코드 우측 상단 번개 아이콘을 누르면 실제 모습 및 동작을 미리 볼 수 있습니다.

미리보기 화면 가로 사이즈를 조정하면 반응형으로 UI 요소가 달라지기도 합니다.

각 요소의 클래스명을 약간씩 수정해서 CSS를 변경할 수도 있습니다.
자세한 내용은 가이드 문서를 참고하는 것이 좋습니다.

최신 글