生の Bootstrap5 HTML
Bootstrap5を用いて記述されたHTMLは そのまま問題なく利用できます。
但しJavaScriptを用いるコンポーネントは そのままでは動作しません。
Element Content
vue
<template>
<div class="text-center p-5 your-original-class">
Element Content
</div>
</template>
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種類あります。
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
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
Bootstrap5コンポーネントに対応したBootstrap コンポーネントが用意されています。
use-bootstrap の Bootstrapコンポーネントは、プリフィクス文字が空文字とBに設定されています。
このドキュメントでは、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>
Bプリフィクスとパスカルケースを利用した例です。
vue
<template>
<BDropdown>
<BDropdownToggle color="secondary">
Dropdown button
</BDropdownToggle>
<BDropdownMenu>
<BDropdownItem to="/">
Action
</BDropdownItem>
<BDropdownItem>Another action</BDropdownItem>
<BDropdownItem>Something else here</BDropdownItem>
</BDropdownMenu>
</BDropdown>
</template>
bプリフィクスとケバブケールを利用した例です。
vue
<template>
<b-dropdown>
<b-dropdown-toggle color="secondary">
Dropdown button
</b-dropdown-toggle>
<b-dropdown-menu>
<b-dropdown-item to="/">
Action
</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here</b-dropdown-item>
</b-dropdown-menu>
</b-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>