Bootstrap is 何？
公式によると
Bootstrap
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
なツールキットです！
アプリのデザインって、全部を行おうとするとなかなかに大変ですよね。
デザインに時間を割けない時などに Bootstrap を利用すると、ボタン、アラート、モーダル、インプット要素．．．画面を構成するあらゆる要素を統一感のあるテーマで簡単に作成できるようになります！
それに、何よりオシャレですね！！
Bootstrap をインストール
まずはプロジェクトへ移動して。
> cd my-project
次のコマンドでインストールします。
- Yarn を使った場合
> yarn add bootstrap-vue
- npm を使った場合
> npm install bootstrap-vue
Vue.js で使うには？
main.js に次のようにコーディングします。
import Vue from 'vue'
import App from './App.vue'
/* ここから */
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
/* ここまで */
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
後はテンプレートに Bootstrap の専用タグを埋め込むだけで使用することができます。
確認しよう
About ページにボタンを表示してみましょう！
<template>
<div class="about">
<h1>This is an about page</h1>
<b-button
size="lg"
variant="outline-primary">
Bootstrap Button
</b-button>
</div>
</template>
アプリ起動して。
> yarn serve
http://localhost:8080/ にアクセスです！
いえい！
コンポーネントの種類や、使い方はこちらをご覧ください。
まとめ
インストールの際に、生の Bootstrap ではなくて、Vue.js 専用のものをインストールするのがポイントですね！
（私は間違えたぞ！）
プログラマーさんはデザインが苦手って言う人が多い気がします。
そういう方でもオシャレなアプリを作れる Bootstrap は素敵ツールですね！
インデックスページから来た人向け
オシャレなボタンが表示されると洗練された感じが出てきますよね～（いつも同じこと言ってる）
これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください！