軽くbootstrapvueを使っているため、覚書として簡単なサンプルを残しておきます。公式サイトをみると大抵のことは丁寧に書いてくれています(英語)。
目次
- 1 b-containerの使い方
- 2 b-container fluidのpaddingが邪魔
- 3 width: calcの中央あわせ
- 4 b-colのpaddingが邪魔
- 5 b-rowとb-colのレイアウト崩れ
- 6 レイアウトの横並び
- 7 bootstrap-vueのグリットシステムをレスポンティブデザインに対応する
- 8 表示要素の横並びと中央あわせ
- 9 input要素の横並び
- 10 b-input-groupのレスポンシブ対応
- 11 フォームの横並び
- 12 テキストとセレクトボックスの高さを揃える
- 13 タブの実装
- 14 チェックボックスの判定
- 15 画像の横並び
- 16 アコーディオン
- 17 レスポンシブテーブル
- 18 プロフィール
- 19 bootstrap-vueの使い所はどこまで
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-colのpaddingが邪魔
b-colもデフォルトでpaddingが入っていますね。写真1枚のとき、タイトルと整列しなくて邪魔になることがあります。
<b-col cols="12" class="px-0"></b-col>
b-rowとb-colのレイアウト崩れ
bootstrapは合計12にしておけばレイアウトは崩れにくいのですが、なんかb-rowとb-colの間にdivを入れると、b-colが効いていないようですね。前後に入れましょう。
<b-row class="my-2 py-2">
<div>
<b-col cols="12">
</b-col>
</div>
</b-row>
レイアウトの横並び
<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-col cols="12" align-content="center"> </b-col>
ただ、これじゃうまくいかない場合があります。
中央合わせと横並びをあわせて行いたい場合は、親要素にflexが手っ取り早いです。
.wrap {
display: flex;
justify-content: center;
}
他にも子要素にdisplay: inline-block、親要素にtext-align:centerなんていう方法もありますが、詳細は割愛しますが、for文など入りコードが複雑になった場合、flexの方があっさりと解決できると思ったことがあります。
input要素の横並び
b-input-groupなら同列になることがわかりました。
結構、他でも使えるかも。
b-input-groupは基本input要素に使うもののようです。たとえばセレクトボックスの誕生日の入力とかチェックボックスの羅列です。
b-input-groupのレスポンシブ対応
公式にはresponsiveのことが書かれていませんでした。結局、一般的なCSSの対応をしました。
@media (max-width: 768px) {
.input-group {
display: block;
}
}
たとえば、横並びのチェックボックスが縦になります。
参考。
ただ、input-groupの場合、他に影響がでることが多いため実際は別クラスの対応が多いですね。
@media (max-width: 768px) {
.responsive-input-group {
display: block;
}
}
フォームの横並び
<b-form inline></b-form>
スマホでinlineが効かず困ったことがあります。768px必要だと。bootstrapの仕様ですが、bootstrapvueもおそらく一緒でしょう。これは使えません。。
Add .form-inline to your form (which doesn’t have to be a
テキストとセレクトボックスの高さを揃える
<b-col cols="3" style="display: flex; align-items: center;">
{{ animal.key }}
<b-col cols="9">
<b-form-select
v-model="model"
:options="options"
></b-form-select>
</b-col>
テキストが一行ならline-height: 2.2;もありです。
タブの実装
<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>
チェックボックスの判定
v-modelで簡単にできます。
<div v-for="task in tasks"> <b-form-checkbox v-model="task.checked"> </b-form-checkbox> </div>
firebaseからデータを取得し、checkedというプロパティがない場合も勝手に作ってくれます。
画像の横並び
アコーディオン
accordionはbootstrapの機能を使わせてもらいました。最小レベルのコードは以下のような感じ。
<b-button v-b-toggle.accordion-1 block>アコーディオン1</b-button> <b-collapse id="accordion-1" visible> 中身 </b-collapse>
accordionはトグルの一種でidでひっかけてボタンを押しているだけです。
blockはブロック要素にする。visibleはデフォルト時に開いた状態にします。
公式のリファレンスはこちら。
v-forでまわす場合は次のようになります。
<div v-for="(l, index) in list" :key="index">
<b-button v-b-toggle="'accordion-' + index" block>
{{ l.name }}
</b-button>
<b-collapse :id="'accordion-' + index">中身</b-collapse>
</div>
レスポンシブテーブル
スマホになると左右2列の縦並びになる方式を採用しました。htmlは簡単です。
<b-table stacked="md" striped hover :items="items"></b-table>
thead-class="bg-primary text-white"
htmlに上記のコードをつかえばヘッド部分に色をつけられますが、全体として思った通りにならずfieldsで色をつけています。
scriptはこうです。
export default {
data() {
return {
items: [
{ 項目: 'A', 名前: 'Aさん', 年齢: '29' },
{ 項目: 'B', 名前: 'Bくん', 年齢: '31' },
],
fields: [
{ key: '項目', class: 'bTableStyle' },
{ key: '名前', variant: 'danger' },
{ key: '年齢', thClass: 'bg-white text-dark' }
]
}
}
}
ただし、variantは列を塗れますが、任意の色がつけられません。thClassもあまり融通がききません。
左側と最初の一行目に色をつけたい場合、次のような感じがいいかもしれません。
{
key: '項目',
tdClass: 'bTableLeftCellStyle',
thStyle: 'background-color: #f2f2f2;'
},
{ key: '名前', thStyle: 'background-color: #f2f2f2;' },
{ key: '年齢', thStyle: 'background-color: #f2f2f2;' }
色を自分で選びたい場合は、thClassよりthStyleがよいですかね。ちなみに、tdStyleはないようです。classとtdClassはここでは効果がかわりません。
classはcssの適応が必要です。
::v-deep .table .bTableLeftCellStyle {
background-color: #323232;
}
CSSはtext-alignを左寄せと右寄せで配置したい場合、ちょっとややこしかったですけど、結論としてはこうです。
@media (max-width: 767.98px) {
::v-deep .table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before {
text-align: left;
}
::v-deep .table.b-table.b-table-stacked-md > tbody > tr > [data-label] > div {
text-align: right;
}
}
簡単に解説すると、左側はdata-labelでbeforeの要素を使っているため、beforeが最後につきます。
右側も下記のようなコードではうまくいきません。
.table.b-table.b-table-stacked-md > tbody > tr > td > div {
text-align: right;
}
.table > tbody > tr > td > div {
text-align: right;
}
どちらも::v-deepは必須です。::v-deepはscopedのままdeep selectors。スタイルをオーバライドできるようです。
ただ、stylelintのルールにひっかるため回避のコードが必要です。
module.exports = {
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
};
bootstrapってなんか回りくどいですね。。テーブルは楽になっているかわかりません。。
プロフィール
Avatarという機能があるんですね。いつか使ってみたいです。
bootstrap-vueの使い所はどこまで
bootstrapvueというか、元のbootstrapが中途半端な気がします。
とくに、デザインとして見た場合、たとえば、角丸30%が好きなのですが、できません。決まったフォーマットしか選べません。
またグラデーションもないっぽいです、結局、ボタンはcssで書いた方が早いですね。CSSで書けばあっさりとかけるのに、返って余計な時間を使ってしまいました。。
仮のレイアウトを作るのならいいかもしれませんが、デザインをしっかりとしたい人には中途半端かもしれません。bootstrapは使い所を絞ってグリットのレイアウト、チェックボックスやラジオボタンに使うぐらいですかね。何でもbootstrapでできると思わず、絞ってコンパクトに使うといい感じじゃないかもという気がします。
コメント