CSSフレームワークを入れよう!

投稿日:2020年10月5日

更新日:2020年10月5日

BootstrapVueを入れました

まず、/pages/以下のファイルにスタイルが直接記載されていたので、全て削除しました。
レイアウトが崩れるけど気にしない~

いろんなCSSフレームワークがプラグインで提供されていました。
公式documentUse CSS in Gridsome

「Bootstrap」は...plugin comingとなっていたので、同じじゃないの?と思いつつ「BootstrapVue」を入れました。
これが後でアレ?ってなるんですが…

公式によると「BootstrapVue」っていうのをコマンドから入れるっぽい。
公式document通りに進めます。
currentディレクトリgridsome-site-starterに移動して。

npm i vue bootstrap-vue bootstrap

これでインストールはOKで。
BootstrapVueプラグインをmain.jsファイルに登録します。
私のmain.jsはこんな感じになりました。

import DefaultLayout from '~/layouts/Default.vue'
//bootstrap
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
  //bootstrap
  Vue.use(BootstrapVue)
}

BootstrapVueはいつものBootstrapとチョイ違った…

早速、ヘッダーナビゲーションを変更しようとお馴染みの公式documentNavbarを参考に入れるも動かず。。。

見かけは変更されるのですが、スマホ時のクローズした後などボタンを押してもシーン…開かん!!!

はい、コッチNavbarでした。
コッチが正式なdocumentでしたBootstrapVue

どうやら「BootstrapVue」はVue用に特化されているので、いつものブートストラップのドキュメント通りに入れても微動だにせず。。。特にJSまわりかな

classを当てることはできました!なのでスタイルの調整などはいつものBootstrapのdocumentも見ていました。

私のgridsome-site-starter\src\layouts\Default.vue はこうなりました。

<header class="mb-5">
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="/">{{ $static.metadata.siteName }}</b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text><g-link class="nav-link" to="/about/">このサイトについて</g-link></b-nav-text>
        <b-nav-text><g-link class="nav-link" to="/step/">このサイトができるまでの道のり</g-link></b-nav-text>
        <b-nav-text><g-link class="nav-link" to="/blog/">Blog</g-link></b-nav-text>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</header>

ただ、b-nav-textとかb-navbar-brandとか、ちょっとタグの意味が不明なんだよねw。
これはあとで調べる必要がありますね

目次ページに戻る