ジャンボトロン
サイトの主要なマーケティングメッセージを目立たせるために、オプションでビューポート全体に拡張できる、軽量で柔軟なコンポーネントです。
header プロパティと lead プロパティを使用して、見出しとリードテキストを設定できます。または、HTML サポートが必要な場合は、名前付きスロット header と lead を使用できます。
開始タグと終了タグの間にあるその他のものは、ジャンボトロンの下部にレンダリングされます。
プロパティを使った使用方法
<div>
<b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
<p>For more information visit website</p>
<b-button variant="primary" href="#">More Info</b-button>
</b-jumbotron>
</div>
スロットを使った使用方法
<div>
<b-jumbotron>
<template #header>BootstrapVue</template>
<template #lead>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content out within the larger
container.
</p>
<b-button variant="primary" href="#">Do Something</b-button>
<b-button variant="success" href="#">Do Something Else</b-button>
</b-jumbotron>
</div>
オプション
header-tag を適切な HTML 要素に設定することにより、ヘッダーにレンダリングされるタグを制御します。デフォルトは h1 です。プロパティ header とスロット header の両方がこのタグ内にレンダリングされます。プロパティとスロットの両方が指定されている場合、スロットが表示されます。
header-level プロパティを 1 から 4 までの値に設定することにより、ヘッダーテキストの全体的なサイズを制御します。 1 が最大で、4 が最小です。デフォルト値は 3 です。
リードテキスト
lead-tag を目的の HTML 要素に設定することにより、リードテキストにレンダリングされるタグを制御します。デフォルトは p です。プロパティ lead とスロット lead の両方がこのタグ内にレンダリングされます。プロパティとスロットの両方が指定されている場合、スロットが表示されます。
流動幅
<b-jumbotron> を全幅にし、角を丸めないようにするには、fluid プロパティを設定します。内部コンテンツは自動的に <b-container>（さまざまなブレークポイントで幅が固定）に配置されます。これを流動コンテナーに変更するには、container-fluid プロパティを設定します。fluid プロパティが設定されていない場合、container-fluid プロパティは無効です。
コンポーネントタグ
デフォルトでは、<b-jumbotron> はルート要素を div としてレンダリングします。tag プロパティを目的の要素タグ名に設定することにより、要素タグを他の適切な要素に変更します。
バリアント
bg-variant プロパティ（info、danger、warning、light、dark などに設定）を使用して、全体の背景バリアントを制御します。border-variant プロパティを使用して境界線のバリアントを、text-variant プロパティを使用してテキストのバリアントを制御します。3 つのプロパティはすべてデフォルトで null に設定されており、ジャンボトロンにデフォルトのスタイルを使用するように指示します。
<div>
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
<template #header>BootstrapVue</template>
<template #lead>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content out within the larger
container.
</p>
</b-jumbotron>
</div>