Nuxt.js #010 – Bootstrapを利用

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>

• 参考文献
  Nuxt.js
  bootstrap-vue