Джамботрон

Вы можете установить заголовок и текст лида через свойства header и lead или использовать именованные слоты header и lead, если вам нужна поддержка HTML.

Все остальное между открывающим и закрывающим тегами будет отображаться в нижней части jumbotron.

Использование со свойством:

<div>
  <b-jumbotron header="BootstrapVue" lead="Компоненты Bootstrap v4 для Vue.js 2">
    <p>Для получения дополнительной информации посетите веб-сайт</p>
    <b-button variant="primary" href="#">Больше информации</b-button>
  </b-jumbotron>
</div>

<!-- b-jumbotron.vue -->

Использование со слотами:

<div>
  <b-jumbotron>
    <template #header>BootstrapVue</template>

    <template #lead>
      Это простой герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации.
    </template>

    <hr class="my-4">

    <p>
      Он использует служебные классы для типографики и интервалов для размещения содержимого в более крупном контейнере.
    </p>

    <b-button variant="primary" href="#">Сделай что-нибудь</b-button>
    <b-button variant="success" href="#">Сделай что-нибудь еще</b-button>
  </b-jumbotron>
</div>

<!-- b-jumbotron-using-slots.vue -->

Параметры

Заголовок

Управляйте тем, какой тег будет отображаться для заголовка, установив header-tag для соответствующего элемента HTML. По умолчанию это h1. Внутри этого тега будут отображаться как свойство header, так и слот header. Если указаны и опора, и слот, слот будет показан.

Управляйте общим размером текста заголовка, задав для свойства header-level значение от 1 до 4, где 1 - самый большой, а 4 - самый маленький. Значение по умолчанию - 3.

Ведущий текст

Управляйте тем, какой тег будет отображаться для текста лида, установив в теге lead-tag нужный HTML-элемент. По умолчанию это p. Внутри этого тега будут отображаться как свойство lead, так и слот lead. Если указаны и опора, и слот, слот будет показан.

Текучая ширина

Чтобы сделать <b-jumbotron> на всю ширину и без закругленных углов, установите свойство fluid. Внутреннее содержимое будет автоматически помещено в <b-container> (фиксированной ширины в различных контрольных точках). Чтобы заменить его на fluid-контейнер, установите свойство container-fluid. Свойство container-fluid не действует, если свойство fluid не установлено.

Тег компоненты

По умолчанию, <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>
      Это простой герой, простой компонент в стиле jumbotron для привлечения дополнительного внимания к избранному контенту или информации.
    </template>

    <hr class="my-4">

    <p>
      Он использует служебные классы для типографики и интервалов для размещения содержимого в более крупном контейнере.
    </p>
  </b-jumbotron>
</div>

<!-- b-jumbotron-variants.vue -->