マイグレーション
Bootstrap5 コードを use-bootstrap に移行します。
生の Bootstrap5 HTML
Bootstrap5を用いて記述されたHTMLは そのまま問題なく利用できます。
但しJavaScriptを用いるコンポーネントは そのままでは動作しません。
use-bootstrap HTML コンポーネント
use-bootstrap では HTML 要素に対応したHTMLコンポーネントが用意されています。
use-bootstrap の HTMLコンポーネントは デフォルトでBのプリフィクスが設定されています。
このドキュメントでは HTMLコンポーネントを利用する際に ケバブケースで b- を要素名に指定しています。
class 属性は 独自のスタイル指定のために 専用の属性として利用できます。
HTML要素を use-bootstrap の HTMLコンポーネントに変更する例を下記に示します。
レンダリング結果は、bootstrap5 HTML と同一になります。
汎用 HTML コンポーネント
タグ名を自由に設定できる汎用のHTMLコンポーネントが2種類あります。
Directive
use-bootstrap の HTMLコンポーネントを利用する代わりに HTML要素とv-bootstrap ディレクティブを利用することもできます。
Bootstrap components
use-bootstrap では Bootstrap5 コンポーネントに対応したBootstrap コンポーネントが用意されています。
use-bootstrap の Bootstrapコンポーネントは、デフォルトでは プリフィクス文字が空文字に設定されています。
このドキュメントでは、Bootstrapコンポーネントを利用する際に、キャメルケースで要素名に指定しています。
Bootstrapコンポーネントを利用する際に、初期化のためのJavaScriptは必要ありません。
Multi property values
String values with spaces
プロパティに複数の値を指定する場合は、空白で区切ります。
Array values with v-bind
v-bind を利用して、配列を指定することもできます。