bootstrapとは？
html/css/JSのフレームワークのことです。
これを使うことで、ボタンやカードのデザインを埋め込むことができるので
コードを自分で１から書くより、簡単にデザインを作成できます。
（※デザインを少し変えたい、となった時はある程度知識が必要ですが
調べれば解決できるレベルです）
bootstrapの種類
今回はvue.jsを使用しているので、様々ある種類の中から
今回はbootstrap vueを使用していきます！
vue.jsでのインストール方法
ターミナル でvueのbootstrapをインストールします
npm install bootstrap-vueその後、vue.js（プロジェクト）のmain.jsに下記を記載し、
bootstrapの導入が完了です！
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)公式ドキュメントから使うcssを探す
↓ドキュメントのリンクになります！
今回はこのリンク先にある「v-model support」の一番上を作成してみます
Collapse | Components | BootstrapVue
Easily toggle content visibility on your pages. Includes support for making accordions.
bootstrap-vue.org
本当にドキュメントにあるコードをコピペするだけです！
componentsフォルダにtoggle.vueを作成！
<template>
<div>
<b-button
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
aria-controls="collapse-4"
@click="visible = !visible"
>
Toggle Collapse
</b-button>
<b-collapse id="collapse-4" v-model="visible" class="mt-2">
<b-card>I should start open!</b-card>
</b-collapse>
</div>
</template>
<script>
export default {
data() {
return {
visible: true
}
}
}
</script>メインページ（今回だとApp.vue）にコンポーネントを設置し
無事に反映されました！
class名をつけることでcssで微調整やレスポンシブデザインも可能です
（ここでは割愛します）
<template>
<div>
<toggle class="toggle"></toggle>
</div>
</template>
<script>
import toggle from './components/toggle.vue';
export default{
components:{
toggle
}
}
</script>最後に
今回は、vueでbootstrapを少し触ってみましたが
思ったより簡単に導入できました！
今後は、テンプレートからbootstrapを使ってみたりと
いろいろ試行錯誤してみようと思います。
最後まで読んでいただき、ありがとうございました！
↓よかったらいいねお願いします🥺
コメント