Hero大块屏(Jumbotron)

轻巧，灵活的组件，可以有选择地扩展整个视口，以在您的站点上展示关键的营销信息。

您可以通过header和 lead属性设置标题和线索文本，如果需要HTML支持，则可以使用命名的插槽header和

开头和结尾标签之间的任何其他内容都将显示在超大屏幕的底部。

使用属性:

BootstrapVue

Bootstrap v4 Components for Vue.js 2

For more information visit website

<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>

使用插槽:

BootstrapVue

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Do Something Do Something Else

<div>
  <b-jumbotron>
    <template v-slot:header>BootstrapVue</template>

    <template v-slot: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元素，控制为header呈现哪个标记。默认为h1。属性header和slot header都将呈现在此标记中。如果同时指定了支柱和槽，则将显示槽。

通过将header-level属性设置为1到 4之间的值（1为最大值， 4为最小值）来控制头文本的总体大小。默认值为3。

引导文本

通过将lead-tag设置为所需的HTML元素，控制为lead文本呈现哪个标记。默认值为p。属性lead和slot lead都将在该标记内呈现。如果同时指定了支柱和槽，则将显示槽。

Fluid 宽度

要使<b-jumbotron>全宽且没有圆角，请设置fluid属性。内部内容将自动放入<b-container>（各个断点处的固定宽度）。要将其更改为fluid容器，请设置container-fluid属性。如果未设置fluid属性，则container-fluid属性无效。

组件标签

默认情况下，<b-jumbotron>会将其根元素呈现为div。通过将tag属性设置为所需的元素标签名称，将element标签更改为任何其他适当的元素。

变量

使用bg-variant属性（设置为info, danger, warning, light, dark等），使用border-variant属性控制border变体和使用text-variant属性控制文本的总体背景。这三个道具均默认为null，这将指示巨型机使用默认样式。

BootstrapVue

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

<div>
  <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
    <template v-slot:header>BootstrapVue</template>

    <template v-slot: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>

组件引用

`<b-jumbotron>`

功能部件

View source

<b-jumbotron> 属性
<b-jumbotron> Slots

属性

属性 (单击可升序排序)	类型	默认值	描述
`fluid`	Boolean	`false`	使jumbotron全宽，无圆角。设置后，内部内容将自动包装到“b-container”中（在各个断点处固定宽度）
`container-fluid`	Boolean or String	`false`	当属性'fluid'设置，这个属性将使内部容器包装也流体宽度。也可以设置为引导断点名称之一
`header`	String		要放在标题中的文本内容
`header-html` Use with caution	String		要放在标题中的HTML字符串内容。慎用
`header-tag`	String	`'h1'`	指定要呈现的HTML标记，而不是头的默认标记
`header-level`	Number or String	`'3'`	标题的比例因子。数值范围从1到5
`lead`	String		要放置在前导段落中的文本字符串
`lead-html` Use with caution	String		要放置在前导段落中的HTML字符串。慎用
`lead-tag`	String	`'p'`	指定要呈现的HTML标记，而不是前导段落的默认标记
`tag`	String	`'div'`	指定要呈现的HTML标记，而不是默认标记
`bg-variant`	String		将一个引导主题颜色变体应用于背景
`border-variant`	String		将一个引导主题颜色变体应用于边框
`text-variant`	String		将一个引导主题颜色变体应用于文本

警告: 当传递原始用户提供的值时，支持HTML字符串（*-html）的属性可能容易受到跨站点脚本（XSS）攻击。必须先正确清理用户输入！

Slots

Slot 名称	描述
`header`	自定义标题内容的槽。置于“标题标签”内
`lead`	用于自定义呈现主要文本内容。放置在“lead-tag”

导入单个组件

可以通过以下命名导出将各个组件导入到项目中：

组成部分	命名导出	导入路径
`<b-jumbotron>`	`BJumbotron`	`bootstrap-vue`

例子:

import { BJumbotron } from 'bootstrap-vue'
Vue.component('b-jumbotron', BJumbotron)

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

命名导出	导入路径
`JumbotronPlugin`	`bootstrap-vue`

例子:

import { JumbotronPlugin } from 'bootstrap-vue'
Vue.use(JumbotronPlugin)