マイグレーション

生の Bootstrap5 HTML

Bootstrap5を用いて記述されたHTMLはそのまま問題なく利用できます。

但しJavaScriptを用いるコンポーネントはそのままでは動作しません。

Element Content

vue

<template>
 <div class="text-center p-5 your-original-class">
  Element Content
 </div>
</template>

use-bootstrap HTML コンポーネント

use-bootstrap では HTML 要素に対応したHTMLコンポーネントが用意されています。

use-bootstrap の HTMLコンポーネントはデフォルトでBのプリフィクスが設定されています。

このドキュメントでは HTMLコンポーネントを利用する際にケバブケースで b- を要素名に指定しています。

class 属性は独自のスタイル指定のために専用の属性として利用できます。

HTML要素を use-bootstrap の HTMLコンポーネントに変更する例を下記に示します。

レンダリング結果は、bootstrap5 HTML と同一になります。

Element Content

vue

<template>
 <b-div
  text-alignment="center"
  padding="5"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

汎用 HTML コンポーネント

タグ名を自由に設定できる汎用のHTMLコンポーネントが2種類あります。

Content1 Content2 ^Content3

vue

<template>
 <b-block
  tag="article"
  margin="x-auto"
  padding="3"
  class="your-original-class"
 >
  <b-inline
   tag="samp"
   margin="x-auto"
   padding="3"
  >
   Content1
  </b-inline>
  Content2
  <b-inline
   tag="sup"
   margin="x-auto"
   padding="3"
  >
   Content3
  </b-inline>
 </b-block>
</template>

Directive

use-bootstrap の HTMLコンポーネントを利用する代わりに HTML要素とv-bootstrap ディレクティブを利用することもできます。

Element Content

vue

<template>
 <div
  v-bootstrap
  text-alignment="center"
  padding="5"
  class="your-original-class"
 >
  Element Content
 </div>
</template>

Bootstrap components

use-bootstrap では Bootstrap5 コンポーネントに対応したBootstrap コンポーネントが用意されています。

use-bootstrap の Bootstrapコンポーネントは、デフォルトではプリフィクス文字が空文字に設定されています。

このドキュメントでは、Bootstrapコンポーネントを利用する際に、キャメルケースで要素名に指定しています。

Bootstrapコンポーネントを利用する際に、初期化のためのJavaScriptは必要ありません。

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Multi property values

String values with spaces

プロパティに複数の値を指定する場合は、空白で区切ります。

Element Content

vue

<template>
 <b-div
  margin="x-auto xl-none"
  padding="3"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

Array values with v-bind

v-bind を利用して、配列を指定することもできます。

Element Content

vue

<template>
 <b-div
  :margin="['x-auto', 'x-l-none']"
  padding="3"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

Auto activate links

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/lang-en/components/dropdowns">
    lang-en
   </DropdownItem>
   <DropdownItem to="/lang-ja/components/dropdowns">
    lang-ja
   </DropdownItem>
   <DropdownItem to="/lang-en/getting-started/migration">
    lang-en migration
   </DropdownItem>
   <DropdownItem to="/lang-ja/getting-started/migration">
    lang-ja migration
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Component level theme

vue

<template>
 <Dropdown theme="light">
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>

 <Dropdown theme="dark">
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>