【使い方】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-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-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(インプットグループ)では,テキスト入力, カスタム選択, カスタムファイル入力の両側にテキスト, ボタン, またはボタングループを追加して, フォームコントロールを拡張可能です。

フォームの横並び

スマホで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.

タブの実装

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>

画像の横並び

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...

プロフィール

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をコピーしました