【使い方】nuxtでbootstrapvueカスタマイズ/グリットレイアウト

おすすめのオンラインプログラミング学習

軽く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>
  • Small (sm) 576px
  • Medium (md) 768px
  • Large (lg) 992px
  • Extra large (xl) 1200px

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>
  • my-2 marginのy軸(上下)の略
  • py-2 paddingのy軸(上下)の略
  • px-2 paddingのx軸(左右)の略
  • サイズは0、1(0.25rem)、2(0.5rem)、3(1rem)、4(1.5rem)、5(3rem)、auto
  • bootstrap4でpxからremに変わったようです。remはレスポンシブデザインで便利です。

レイアウトは線を入れることが多いでしょう。

.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>
  • Extra small (xs) <576px
  • Small (sm) ≥576px
  • Medium (md) ≥768px
  • Large (lg) ≥992px
  • Extra large (xl) ≥1200px

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なら同列になることがわかりました。

Display two fields side by side in a Bootstrap Form
I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash. I want this all o...

結構、他でも使えるかも。

Input group
Input group(インプットグループ)では,テキスト入力, カスタム選択, カスタムファイル入力の両側にテキスト, ボタン, またはボタングループを追加して, フォームコントロールを拡張可能です。

b-input-groupは基本input要素に使うもののようです。たとえばセレクトボックスの誕生日の入力とかチェックボックスの羅列です。

b-input-groupのレスポンシブ対応

公式にはresponsiveのことが書かれていませんでした。結局、一般的なCSSの対応をしました。

@media (max-width: 768px) {
  .input-group {
    display: block;
  }
}

たとえば、横並びのチェックボックスが縦になります。

参考。

how to make input-group responsive (search and dropdown)
I have the following fiddle, it works fine for desktops. However I want to make it responsive, such that on mobile devices the main category and second category...

ただ、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

) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

CSS · Bootstrap
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

テキストとセレクトボックスの高さを揃える

<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;もありです。

タブの実装

Tabs | Components | BootstrapVue
Create a widget of tabbable panes of local content. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of...
<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というプロパティがない場合も勝手に作ってくれます。

画像の横並び

Image | Components | BootstrapVue
Create responsive images, optionally adding lightweight styles to them — all via props. Support for rounded images, thumbnail styling, alignment, and even the a...

アコーディオン

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はデフォルト時に開いた状態にします。

公式のリファレンスはこちら。

Collapse | Components | BootstrapVue
Easily toggle content visibility on your pages. Includes support for making accordions.

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という機能があるんですね。いつか使ってみたいです。

Avatar | Components | BootstrapVue
Avatars are typically used to display a user profile as a picture, an icon, or short text.

bootstrap-vueの使い所はどこまで

bootstrapvueというか、元のbootstrapが中途半端な気がします。

とくに、デザインとして見た場合、たとえば、角丸30%が好きなのですが、できません。決まったフォーマットしか選べません。

またグラデーションもないっぽいです、結局、ボタンはcssで書いた方が早いですね。CSSで書けばあっさりとかけるのに、返って余計な時間を使ってしまいました。。

仮のレイアウトを作るのならいいかもしれませんが、デザインをしっかりとしたい人には中途半端かもしれません。bootstrapは使い所を絞ってグリットのレイアウト、チェックボックスやラジオボタンに使うぐらいですかね。何でもbootstrapでできると思わず、絞ってコンパクトに使うといい感じじゃないかもという気がします。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました