Vueバージョン確認
npm list vue
まずは上記コマンドでバージョンの確認
twinzlabo@0.1.0 /Users/twinzlabo
── vue@2.6.11
BootstrapVueの導入
BootstrapVueの導入がまだの方のために念のため導入方法書いときますね
とりあえずコピペして環境を整えてください
main.js
importBootstrapVuefrom'bootstrap-vue'import'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue)npm install vue bootstrap-vue bootstrap
以上でBootstrapVueの導入は完了です
BootstrapVueのダサいイメージをクールなデザインにカスタマイズ
すでに上の方で確認してもらったかと思いますが、
BootstrapVueの非常にダサいImageコンポーネントをスタイル修正を行うことでクールなデザインに編集していきましょう
デフォルトの上の画像をhoverしたら下の画像のように色がつくようにカスタマイズしていきます
この感じなかなかクールですよね
では早速コードをコピペしていきましょう
<template>
<div>
<b-img src="https://picsum.photos/300/150/?image=41" fluid alt="Fluid image"></b-img>
</div>
</template>
<style>
img {
margin-right: 10px;
margin-bottom: 30px;
display: inline-block;
width: 500px;
height: 400px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
transition: all 200ms ease-in;
filter: grayscale(1) opacity(.8);
}
img:hover {
filter: grayscale(0) opacity(1);
}
</style>
これだけです
いかがでしたでしょうか？ちゃんと同じようなデザインになりましたか？
今回も超簡単にカスタマイズできましたね
以上です
参考記事(より応用的な実装が希望の方)
【Vueデザイン/コピペだけ】白黒画像一覧でhoverすると色がつくCSSアニメーション実装を徹底解説
←トップ画像のような実装ができます
【Vue/BootstrapVueコピペのみ】Bootstarap導入からシンプルな画像一覧画面の実装方法までを徹底解説