画像


画像




Bootstrapを利用するメモ。


Nuxt.js #003 – v2で環境構築」で環境構築する時に、Bootstrapを選択しておきます。




画像




pagesディレクトリに、今回は「bootstrap.vue」任意ファイルを追加

画像




bootstrap.vue


<template>

<b-container>

<b-jumbotron header="Bootstrap Vue" lead="Bootstrap 4 Components for Vue.js 2" >
<p>For more information visit website</p>
<b-btn variant="primary" href="#">More Info</b-btn>
</b-jumbotron>

<b-row class="text-center">
<b-col sm="12" md="4" >
<b-btn variant="primary" href="#">sample1</b-btn>
</b-col>
<b-col sm="6" md="4" >
<b-btn variant="success" href="#">sample2</b-btn>
</b-col>
<b-col sm="6" md="4" >
<b-btn variant="warning" href="#">sample3</b-btn>
</b-col>
</b-row>

</b-container>

</template>

<style>

</style>

<script>

</script>









Q&A