BootstrapVue 사용법

안녕하세요. 씨앤텍 시스템즈 입니다.

 

 

이번 글은 BootstrapVue 사용법에 대해서 정리해 보았습니다.

 

BootstrapVue는 Bootstrap을 Vue.js에서 사용할 수 있도록 만든 패키지입니다.

 

---

공식문서에서 BootstrapVue를 사용하기 위해서는 아래와 같은 환경이 필요하다고 합니다.

 

1. Vue.js가 필요합니다.

2. 부트스트랩이 필요합니다.

3. PortalVue는 Toasts를 사용하기 위해 필요합니다.

4. jQuery는 필요하지 않습니다.

 

---

Vue.js에서 BootstrapVue를 사용하기 위해서는 패키지를 설치해야합니다.

생성한 프로젝트의 경로에서 아래의 코드를 통해 Vue.js, BootstrapVue, Bootstrap v4의 최신버전을 설치합니다.

# npm에서 설치
npm install vue bootstrap-vue bootstrap

# yarn에서 설치
yarn add vue bootstrap-vue bootstrap

main.js에 BootstrapVue를 등록합니다.

# main.js
import Vue from 'vue'
import BootstartpVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

Bootstrap과 BootstrapVue의 css를 추가합니다.

# main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

이 작업들을 통해 BootstrapVue를 사용할 수 있습니다.

 

---

BootstrapVue의 공식문서(https://bootstrap-vue.netlify.com/)를 참고해서 작성하였습니다.

공식문서에서는 예제와 함께 코드를 제공하고 있으니 참고하시면 될 것 같습니다.

 

먼저, BootstrapVue의 수많은 태그들 가운데 Card태그를 사용해보도록하겠습니다.

 

프로젝트를 처음 생성하면 생기는 HelloWorld.vue에 추가를 하겠습니다.

<template>
<div class="index page">
  <div class="position main">
    BootstrapVue의 Card태그를 사용해보겠습니다
    </br>
    </br>
    <b-card 
    overlay 
    img-src='https://cdn.pixabay.com/photo/2015/05/06/16/31/andromeda-galaxy-755442_960_720.jpg' 
    img-alt="씨앤텍시스템즈"  
    class="card">

      <b-card-title>씨앤텍시스템즈</b-card-title>
      <b-card-text>안녕하세요 씨앤텍시스템즈입니다.</b-card-text>
      </br>
      <b-card-text>
        BootstrapVue Card 태그의 Overlay 속성입니다.
      </b-card-text>

    </b-card>
  </div>
</div>
</template>

태그들 가운데 "b-"로 시작하는 태그들이 BootstrapVue에서 제공하는 태그입니다.

.page {
  height: 100vh;
  font-weight: bold;
}

.position {
  position: relative;
  top: 10%;
}

.main {
  text-align: center;
  font-size: 2em;
}

.card {
  width: 50%;
  text-align: left;
  margin: 0 auto;
  color: #ffffff;
}

style까지 적용하면 아래와 같은 화면이 나오게 됩니다.

<b-card>에서 이미지와 함께 넣는 속성은 overlay 외에도 img-top, img-bottom, img-left, img-right가 있습니다.

물론 이미지를 넣지 않아도 사용 가능합니다.

---

다음으로는 Navbar태그를 사용해보겠습니다.

위의 화면처럼 navbar를 띄우기 위해 <b-navbar>를 추가합니다.

<b-navbar type="dark" variant="dark" class="nav">
    <b-navbar-nav>
      <b-nav-item href="#" >Home</b-nav-item>
    </b-navbar-nav>

    <b-navbar-nav class="ml-auto">
      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>
      <b-nav-item-dropdown text="Lang" left>
        <b-dropdown-item href="#">한국어</b-dropdown-item>
        <b-dropdown-item href="#">English</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="User" left>
        <b-dropdown-item href="#">Account</b-dropdown-item>
        <b-dropdown-item href="#">Settings</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>

<b-navbar>의 type은 navbar의 글씨 색, variant는 navbar의 배경 색을 나타냅니다.

type이 dark일 때

type이 light일 때

Bootstrap에서 지원하는 색상

이 태그도 Bootstrap을 기반으로 만들어졌기 때문에 <b-navbar-nav>의 class="ml-auto"와 같은 Bootstrap의 클래스들을 사용할 수 있습니다.

 

<b-nav-item-dropdown>의 left는 드롭다운 메뉴가 왼쪽에 표시될 것인지, 오른쪽에 표시될 것인 지를 나타냅니다.

<b-nav-item-dropdown right>일 때

<b-nav-item-dropdown left>일 때

이렇게 간단하게 코드 몇 줄 만으로 Navbar를 표현할 수 있습니다.

 

---

BootstrapVue에는 Card 태그 외에도 DropDown, Form, Link 등등 많은 태그들이 있고, 기본적인 틀을 제공하고 있어 UI를 디자인할 때 조금 더 편하게 할 수 있습니다.

 

---

지금까지 BootstrapVue를 사용하는 방법에 대해 알아보았습니다.

감사합니다.