0songha0

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

부트스트랩이란?

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

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

부트스트랩 설치

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

부트스트랩 CSS import 시 기존 리셋 CSS를 덮어씌우는 문제가 발생할 수 있습니다.
특정 Vue 컴포넌트에서만 import 해도 전역 적용되므로 주의해야 합니다.

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

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를 변경할 수도 있습니다.
자세한 내용은 가이드 문서를 참고하는 것이 좋습니다.

텍스트 말줄임표 (ellipsis) 적용

// Block 요소
<div class="text-truncate">텍스트</div>

// Inline 요소
<span class="d-inline-block text-truncate" style="max-width: 150px;">

위와 같이, Block/Inline 요소 구분에 따라 속성을 다르게 적용해야 합니다.

말줄임표 CSS 예시

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

부트스트랩 그리드 반응형 적용

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <div class="p-3 border bg-light">내부 요소 1</div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <div class="p-3 border bg-light">내부 요소 2</div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <div class="p-3 border bg-light">내부 요소 3</div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <div class="p-3 border bg-light">내부 요소 4</div>
    </div>
  </div>
</div>

기본 모바일 크기에서는 한 줄에 1개, 작은 화면 (sm) 에서는 한 줄에 2개, 중간 화면 (md) 에서는 한 줄에 3개, 큰 화면 (lg) 이상에서는 한 줄에 4개씩 요소를 보여주는 그리드 반응형 예시입니다.

부트스트랩 그리드 브레이크포인트 참고

브레이크포인트 접두어 화면 크기 기준
Extra small 없음 <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra Extra large xxl ≥1400px

최신 글