マイグレーション

Bootstrap5 コードを use-bootstrap に移行します。

項目

生の Bootstrap5 HTML

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

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

Element Content
vue

use-bootstrap HTML コンポーネント

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

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

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

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

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

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

Element Content
vue

汎用 HTML コンポーネント

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

Content1 Content2 Content3
vue

Directive

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

Element Content
vue

Bootstrap components

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

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

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

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

Multi property values

String values with spaces

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

Element Content
vue

Array values with v-bind

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

Element Content
vue

Auto activate links

Component level theme

項目