軽くbootstrapvueを使っているため、覚書として簡単なサンプルを残しておきます。公式サイトをみると大抵のことは丁寧に書いてくれています(英語)。
目次
b-containerの使い方
まず、コンテンツ部分はb-containerで囲みます。
<b-container fluid="sm"> 狭い </b-container> <b-container fluid="md"> やや狭い </b-container> <b-container fluid="lg"> やや広い </b-container> <b-container fluid="xl"> 広い </b-container>
b-containerはxlが好みです。
b-container fluidのpaddingが邪魔
b-containerは左右に15pxずつpaddingが入っています。たとえば、アイキャッチ画像のようなものを目一杯広げたいときに邪魔になることがあります。
width: calcの中央あわせ
通常はpaddingが入っていて問題ないため、no paddingするのではなく、画像を広げたい場所だけ次のコードで対応を行いました。右にはみでるため、marginで綺麗に中央にもってきました。
.photo-img {
margin: 0 -15px;
width: calc(100% + 30px);
}
レイアウトの横並び
<b-row class="my-2 py-2 line"> <b-col cols="2"> </b-col> <b-col cols="10"> </b-col> </b-row>
レイアウトは線を入れることが多いでしょう。
.line {
border-bottom: 1px solid #f2f2f2;
}
bootstrap-vueのグリットシステムをレスポンティブデザインに対応する
普通の書き方ではレスポンシブになりません。
<b-col cols="6"></b-col> <b-col cols="6"></b-col>
次の書き方をするとブラウザの幅を変えるとレスポンティブデザインになります。
<b-col md="10"></b-col> <b-col md="2"></b-col>
mdが好みですが、mdはsmなどに変えられますのでお好みでどうぞ。ただ、bootstrapのグリットシステムは合計12にします。
要素の横並び
b-input-groupなら同列になることがわかりました。
結構、他でも使えるかも。
フォームの横並び
スマホでinlineが効かず困ったことがあります。768px必要だと。bootstrapの仕様ですが、bootstrapvueもおそらく一緒でしょう。これは使えません。。
Add .form-inline to your form (which doesn’t have to be a
タブの実装
<template>
<div>
<b-container fluid="xl">
<b-card no-body>
<p>タブを選んでください。</p>
<b-tabs card>
<b-tab title="タブ1" active><p>タブ1</p></b-tab>
<b-tab title="タブ2"><p>タブ2</p></b-tab>
<b-tab title="タブ3"><p>タブ3</p></b-tab>
</b-tabs>
</b-card>
</b-container>
</div>
</template>
画像の横並び
プロフィール
Avatarという機能があるんですね。いつか使ってみたいです。
bootstrap-vueの使い所はどこまで
bootstrapvueというか、元のbootstrapが中途半端な気がします。
とくに、デザインとして見た場合、たとえば、角丸30%が好きなのですが、できません。決まったフォーマットしか選べません。
またグラデーションもないっぽいです、結局、ボタンはcssで書いた方が早いですね。CSSで書けばあっさりとかけるのに、返って余計な時間を使ってしまいました。。
仮のレイアウトを作るのならいいかもしれませんが、デザインをしっかりとしたい人には中途半端かもしれません。bootstrapは使い所を絞ってグリットのレイアウト、チェックボックスやラジオボタンに使うぐらいですかね。何でもbootstrapでできると思わず、絞ってコンパクトに使うといい感じじゃないかもという気がします。
コメント