Джамботрон

Легкий и гибкий компонент, который при желании может расширять всю область просмотра для демонстрации ключевых маркетинговых сообщений на вашем сайте.

Вы можете установить заголовок и текст лида через свойства 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 -->

Справочник по компонентам

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
bg-variant
StringПрименяет один из вариантов цвета темы Bootstrap к фону
border-variant
StringПрименяет один из вариантов цвета темы Bootstrap к границе
container-fluid
Boolean или StringfalseКогда задано свойство 'fluid', это свойство сделает внутреннюю обертку контейнера плавной по ширине. Также может быть установлено одно из имен контрольных точек Bootstrap
fluid
BooleanfalseДелает jumbotron полной ширины и без закругленных углов. Когда установлено, внутреннее содержимое будет автоматически упаковано в 'b-container' (фиксированная ширина в различных контрольных точках)
header
StringТекстовый контент для размещения в `header`
header-html
Использовать с осторожностью
StringСодержимое строки HTML для размещения в `header`
header-level
Number или String3Коэффициент масштабирования заголовка. Значения варьируются от 1 до 5
header-tag
String'h1'Указывает тег HTML для отображения вместо тега по умолчанию для `header`
lead
StringТекстовая строка для размещения в первом абзаце
lead-html
Использовать с осторожностью
StringHTML-строка для размещения в первом абзаце
lead-tag
String'p'Укажите тег HTML для отображения вместо тега по умолчанию для ведущего абзаца
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
text-variant
StringПрименяет к тексту один из вариантов цвета темы Bootstrap

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование
Описание
default Контент для размещения в jumbotron
header Слот для настраиваемого содержимого заголовка. Размещается внутри 'header-tag'. Переопределяет свойство `header` и `header-html`
lead Для настраиваемого рендеринга содержимого текста лида. Размещается внутри 'lead-tag'. Переопределяет свойство `lead` и `lead-html`

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-jumbotron>BJumbotronbootstrap-vue

Пример:

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

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
JumbotronPluginbootstrap-vue

Пример:

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