Bootstrap5

Bootstrap는 인기있는 UI Framework입니다. Vue가 JavaScript의 쉽고 빠른 개발을 도와준다면 Bootstrap은 사전에 정의된 CSS를 사용하여 최소한의 노력으로 쉽게 예쁜 HTML Markup을 도와줍니다.

BootstrapVue는 Vue용 Bootstrap이라고 보시면 될 것 같습니다. Vue를 위한 사전에 정의된 다양한 커스텀컴포넌트를 제공합니다. 하지만 이번 시간에는 다음과 같은 이유로 BootstrapVue이 아닌 Bootstrap5를 사용하도록 하겠습니다.

• Vue3를 위한 BootstrapVue는 현재 알파 버전입니다.
• 이번 강좌는 Vue3 문법을 배우는데 목적이 있기 때문에 최소한의 UI만 활용하는 일반 Bootstrap이 더 괜찮을것 같습니다.

Boostrap5 설치

npm install bootstrap

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

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

~~import 'bootstrap/dist/js/bootstrap.js';~~ 
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

Layout

Bootstrap를 활용하여 Layout을 만들어 보도록 하겠습니다.

TheNav.vue

// src/components/TheNav.vue
<script setup></script>
<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

TheView.vue

// src/components/TheView.vue
<template>
  <main class="container py-4">Hello World!</main>
</template>

App.vue

// src/App.vue
<script setup>
import TheNav from './components/TheNav.vue';
import TheView from './components/TheView.vue';
</script>

<template>
  <TheNav></TheNav>

  <TheView></TheView>
</template>

Bootstrap Icons 설치

1. bootstrap-icons 모듈 설치

   npm i bootstrap-icons
   

2. main.js 에 bootstrap-icons.css 추가

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