巨幅标题
一个轻量级、灵活的组件，可以选择扩展整个视口，在您的网站上展示关键的营销信息。
您可以通过 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。prop header 和 slot header 都将在此标签内呈现。如果同时指定了 prop 和 slot，则将显示 slot。
通过将 header-level prop 设置为介于 1 和 4 之间的值来控制标题文本的整体大小，其中 1 为最大，4 为最小。默认值为 3。
引导文本
通过将 lead-tag 设置为所需的 HTML 元素，来控制为引导文本呈现哪个标签。默认值为 p。prop lead 和 slot lead 都将在此标签内呈现。如果同时指定了 prop 和 slot，则将显示 slot。
流体宽度
要使 <b-jumbotron> 全宽且没有圆角，请设置 fluid prop。内部内容将自动放入 <b-container>（在各个断点处固定宽度）。要将其更改为流体容器，请设置 container-fluid prop。如果未设置 fluid prop，则 container-fluid prop 无效
组件标签
默认情况下，<b-jumbotron> 会将其根元素渲染为 div。通过将 tag 属性设置为所需的元素标签名称，可以将元素标签更改为任何其他适当元素。
变体
使用 bg-variant 属性（设置为 info、danger、warning、light、dark 等）控制整体背景变体，使用 border-variant 属性控制边框变体，使用 text-variant 属性控制文本变体。所有三个属性的默认值为 null，这将指示 jumbotron 使用默认样式。
<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>