Элементы bootstrap: Компоненты · Bootstrap на русском

Leave a Comment / Разное / By /

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

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

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт

WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом . dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>

:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие элементы кнопок с разделенными зонами

По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса . dropdown-toggle-split

для правильного спейсинга вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    .
 
 
 ..
  </div>
</div>

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

 <!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс . dropright и выпадающий элемент будет «выпадать» вправо.

 
<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов

<button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper. js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>
<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="email@example. com">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

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

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса . show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    . ..
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название Тип По умолч. Описание
offset number | string | function 0 Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip boolean true Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary string | element ‘scrollParent’ Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод Описание
$().dropdown('toggle') Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown('update') Обновляет позицию «выпадения» элемента.
$().dropdown('dispose') Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие Описание
show.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.dropdown Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
hide.bs.dropdown Это событие наступает немедленно по вызову экземпляра метода hide.
hidden.bs.dropdown Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Компоненты Bootstrap

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы. Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/. Рассмотрим вкратце некоторые из них.

Навигационные панели

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице _Layout:


<div>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                @Html. ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div>
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:

Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top. Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации. По умолчанию используется класс navbar-nav, но мы можем использовать и другие возможности.

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html. ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:


<ul>
	...............................
</ul>
Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:


<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:


<ul>
    <li class ="active">@Html. ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:


<div role="group">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>
Кнопка с выпадающим списком

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:


<div>
    <button type="button" data-toggle="dropdown">
        Язык программирования <span></span>
    </button>
    <ul role="menu">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">VB. NET</a></li>
        <li></li>
        <li><a href="#">Java</a></li>
    </ul>
</div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать дополнительные классы меток, чтобы конкретизировать тип сообщения:


<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Похожую функциональность предлагает класс alert:


<div>Задача успешно завершена</div>
<div>Дополнительная информация</div>
<div>Внимание!</div>
<div>Опасно!</div>

Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты может легко адаптировать и приспособить под конкретные устройства.

НазадСодержаниеВперед

всплывающих окон · Bootstrap

Документация и примеры по добавлению всплывающих окон Bootstrap, таких как в iOS, к любому элементу на вашем сайте.

Обзор

Что нужно знать при использовании плагина popover:

  • Поповеры полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие окна работали!
  • Всплывающие окна требуют подключаемого модуля всплывающей подсказки в качестве зависимости.
  • Если вы создаете наш JavaScript из исходного кода, для этого требуется util.js .
  • Всплывающие окна являются дополнительными из соображений производительности, поэтому вы должны инициализировать их самостоятельно .
  • Нулевая длина title и content значения никогда не будут показывать всплывающее окно.
  • Укажите container: 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.).
  • Не работает всплывающее окно для скрытых элементов.
  • Всплывающие окна для элементов .disabled или disabled должны запускаться на элементе-оболочке.
  • При запуске от якорей, которые охватывают несколько строк, всплывающие окна будут центрированы между общей шириной якорей. Используйте пробел : nowrap; на , чтобы избежать такого поведения.
  • Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

Продолжайте читать, чтобы узнать, как работают всплывающие окна, на некоторых примерах.

Пример: включить всплывающие окна везде

Один из способов инициализировать все всплывающие окна на странице — выбрать их по атрибуту data-toggle :

 $(функция () {
  $('[data-toggle="popover"]'). popover()
})

Пример: использование контейнера

, опция

Если у вас есть стили для родительского элемента, которые мешают отображению всплывающих окон, вам нужно указать 9 настраиваемых стилей.0010 контейнер , чтобы HTML всплывающего окна отображался внутри этого элемента.

 $(функция () {
  $('.example-popover').popover({
    контейнер: 'тело'
  })
})

Пример

Четыре направления

Доступны четыре варианта: выравнивание по верхнему, правому, нижнему и левому краю.

Закрыть при следующем нажатии

Используйте триггер focus для закрытия всплывающих окон при следующем щелчке пользователя по элементу, отличному от переключаемого элемента.

Для закрытия при следующем нажатии требуется специальная разметка

Для правильного кроссбраузерного и кроссплатформенного поведения необходимо использовать тег , , а не тег

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

Включить всплывающие окна через JavaScript:

 $('#example'). popover(options)

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, например data-animation="" .

Имя Тип По умолчанию Описание
анимация логическое значение правда Применить переход затухания CSS к всплывающему окну
контейнер строка | элемент | ложь ложь

Добавляет всплывающее окно к определенному элементу. Пример: контейнер : 'тело' . Этот параметр особенно удобен тем, что позволяет расположить всплывающее окно в потоке документа рядом с инициирующим элементом, что предотвратит перемещение всплывающего окна от инициирующего элемента во время изменения размера окна.

содержание строка | элемент | функция »

Значение содержимого по умолчанию, если атрибут data-content отсутствует.

Если задана функция, она будет вызываться со своей этой ссылкой , установленной на элемент, к которому прикреплено всплывающее окно.

задержка номер | объект 0

Задержка отображения и скрытия всплывающего окна (мс) — не относится к ручному типу триггера

Если указано число, применяется задержка как для скрытия, так и для отображения

Структура объекта: задержка: { "показать": 500, "скрыть": 100}

HTML логическое значение ложь Вставить HTML во всплывающее окно. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция ‘право’

Как расположить всплывающее окно — авто | топ | дно | слева | верно.
Если указано auto , всплывающее окно будет динамически переориентироваться.

Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающего окна в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст this установлен для экземпляра всплывающего окна.

селектор строка | ложь ложь Если предоставлен селектор, всплывающие объекты будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример.
шаблон строка '

'

Базовый HTML для использования при создании всплывающего окна.

Заголовок всплывающего окна будет вставлен в заголовок . popover-header .

Содержимое всплывающего окна будет внедрено в .popover-body .

.arrow станет стрелкой всплывающего окна.

Самый внешний элемент-оболочка должен иметь класс .popover .

наименование строка | элемент | функция »

Значение заголовка по умолчанию, если атрибут title отсутствует.

Если задана функция, она будет вызываться со своей этой ссылкой , установленной на элемент, к которому прикреплено всплывающее окно.

триггер строка ‘клик’ Как срабатывает всплывающее окно — нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. `manual` нельзя комбинировать ни с каким другим триггером.
смещение номер | строка 0 Смещение всплывающего окна относительно его цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив ‘флип’ Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Документы о поведении Popper.js
граница строка | элемент ‘родительский прокрутки’ Граница ограничения переполнения всплывающего окна. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и начать переход . Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения . Кроме того, вызов метода для переходного компонента будет игнорироваться .

Дополнительные сведения см. в нашей документации по JavaScript.

$(). Popover (опции)

Инициализирует всплывающие окна для коллекции элементов.

.popover('показать')

Показывает всплывающее окно элемента. Возвращает вызывающему объекту до фактического отображения всплывающего окна (т. е. до того, как произойдет событие visible.bs.popover ). Это считается «ручным» запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

 $('#element').popover('show')
.popover('hide')

Скрывает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно будет фактически скрыто (т. е. до того, как произойдет событие hidden.bs.popover ). Это считается «ручным» запуском всплывающего окна.

 $('#element').popover('скрыть')
.popover('переключить')

Переключает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно было действительно показано или скрыто (т. е. до того, как произойдет событие visible.bs.popover или hidden.bs.popover ). Это считается «ручным» запуском всплывающего окна.

 $('#element').popover('toggle')
.popover('dispose')

Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием selector option) не могут быть уничтожены по отдельности на дочерних триггерных элементах.

 $('#element').popover('dispose')
.popover('enable')

Позволяет отображать всплывающее окно элемента. Поповеры включены по умолчанию. 

 $('#element').popover('enable')
.popover('disable')

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

 $('#element').popover('disable')
.popover('toggleEnabled')

Переключает возможность отображения или скрытия всплывающего окна элемента.

 $('#element').popover('toggleEnabled')
.popover('обновление')

Обновляет позицию всплывающего окна элемента.

 $('#element').popover('update')

События

Тип события Описание
show.bs.popover Это событие возникает немедленно при вызове метода экземпляра show .
показано.bs.popover Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ожидать завершения переходов CSS).
скрыть.bs.popover Это событие запускается сразу после вызова метода экземпляра hide .
скрытый.bs.popover Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
вставленный.bs.popover Это событие запускается после события show.bs.popover , когда шаблон всплывающего окна был добавлен в DOM.
 $('#myPopover').on('hidden.bs.popover', функция () {
  // сделай что-нибудь…
})

Компоненты начальной загрузки

Разработчик Командная лицензия

Ежемесячно

24 доллара в месяц

до 5 человек

Самый популярный

Годовой

$99/год

до 5 человек

Срок службы

249 долларов США (оплачивается один раз)

до 5 человек

Выбранный план включает пожизненный годовой месячный доступ к редактору для Tailwind CSS, Bulma, Bootstrap и Material-UI.

Пожизненная лицензия лучше всего для тех, кто живет словами «Front-end for Life!»

Годовая подписка лучше всего подходит для тех, кто создает несколько проектов в год.

Ежемесячная подписка лучше всего подходит для тех, кто в настоящее время планирует только один проект.

Месячная подписка для команды Годовая подписка для команды Пожизненная командная лицензия

Создать учетную запись

Оплата картой

Оплата через PayPal™

Я согласен с условиями использования и политикой конфиденциальности.

Вы должны согласиться перед отправкой.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Элементы bootstrap: Компоненты · Bootstrap на русском

Leave a Comment / Разное / By /

Содержание

Свойство отображения · Bootstrap v5.1

Как это устроено

Измените значение свойства display property с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display. Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.

Таким образом, классы именуются в следующем формате:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg, xl и xxl.

Где значение — одно из:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg, xl и xxl.

Примеры

d-inline

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для более быстрой разработки, удобной для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов по устройствам. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элементы в зависимости от размера экрана.

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс .d-*-none с классом .d-*-*, например, .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экранаКласс
Скрыто на всех.d-none
Скрыто только на xs.d-none .d-sm-block
Скрыто только на sm.d-sm-none .d-md-block
Скрыто только на md.
d-md-none .d-lg-block
Скрыто только на lg.d-lg-none .d-xl-block
Скрыто только на xl.d-xl-none .d-xxl-block
Скрыто только на xxl.d-xxl-none
Видно на всех.d-block
Видно только на xs.d-block .d-sm-none
Видно только на sm.d-none .d-sm-block .d-md-none
Видно только на md.d-none .d-md-block .d-lg-none
Видно только на lg.d-none .d-lg-block .d-xl-none
Видно только на xl.d-none .d-xl-block .d-xxl-none
Видно только на xxl.d-none .d-xxl-block

скрыть на lg и более широких экранах

скрыть на экранах меньше lg

<div>скрыть на lg и более широких экранах</div>
<div>скрыть на экранах меньше lg</div>

Показать в печати

Измените значение display элементов при печати с помощью наших служебных классов отображения при печати. Включает поддержку тех же значений display, что и наши адаптивные утилиты .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

<div>Только экран (Скрывать только при печати)</div>
<div>Только печать (скрыть только на экране)</div>
<div>Скрыть до большого размера на экране, но всегда показывать на печати</div>

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities. scss. Узнайте, как использовать API утилит.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),

370+ Большой набор Bootstrap элементов на сайт

Здесь собраны все необходимые bootstrap элементы которые облегчат жизнь в разработке любому разработчику. Доступно для скачивания.

# Разработка 12 Сентября 2020Комментариев: 10

Здесь мы собрали большой набор готовых элементов для bootstrap 3 и bootstrap 4, включающий в себя более 370 готовых решений, которые подойдут каждому. Скачав и разместив код того или иного элемента на своём сайте, можно сэкономить реально кучу времени, не собирая ничего с нуля.

Обязательно добавляйте данную страницу в закладки, чтобы нужные элементы из bootstrap были всегда под рукой.

Эта сборка bootstrap элементов включает следующий функционал

  • Виджеты bootstrap
  • Чарты, статистики, граффики bootstrap
  • Навигация bootstrap
  • Оформление для личного кабинета bootstrap
  • Готовые якоря bootstrap для landing page
  • Toggle меню bootstrap
  • Мобильное меню bootstrap
  • Оформление карточки товаров bootstrap
  • Фотогалерея bootstrap
  • Оформление статей для блога
  • bootstrap инфографика
  • Резюме на базе bootstrap
  • Форма логин-пароль для bootstrap
  • Форма регистрации на сайте bootstrap
  • Иконки bootstrap
  • Блок поделиться в соц сетях
  • Интересные анимации и различные переходы
  • Кнопка меню гамбургер, открывающая целый блок
  • Табы bootstrap
  • Галерея изображений с переворотом фото к описанию
  • Адаптивная bootstrap таблица
  • Карточка с ценами для сайта
  • Плавно всплывающие блоки с описанием
  • Статусы посещений и различной статистикой
  • Дизайн блоки чтобы сайт выглядел более современно
  • bootstrap календарь событий
  • bootstrap меню с бесконечным списком пунктов
  • Блок наша команда с анимациями и описаниями
  • Красивые адабптивные виджеты соцсетей bootstrap
  • Красиво оформленные текстовые блоки
  • Тени box-shadow bootstrap
  • Виджет погоды
  • Свадебные приглашения
  • Граффики для фондовых бирж
  • Списки множественного выбора bootstrap
  • Функция уведомлений на сайте
  • Текстовый редактор на bootstrap
  • bootstrap эмулятор смартфона
  • Оформление страницы с ценами сайта
  • Функциональная корзина, с возможностью редактирования количества товаров
  • Табы навигации bootstrap
  • Различные кнопки для сайта button
  • Загрузчик файлов на сервер bootstrap
  • Различные выпадающие меню dropdown-menu
  • Прогресс бар bootstrap
  • Виджет поста на сайт
  • Таймлайн для описания деятельности по месяцам/годам
  • Фильтр товаров на bootstrap
  • Кнопка отправить на печать bootstrap
  • Факты о нас в цифрах
  • Адаптивная таблица сравнения товаров
  • Формы обратной связи для сайта
  • Установка рейтинга для чего либо на bootstrap
  • Форма заполнения для кредитных карт
  • Планировщик задач на bootstrap
  • Оформление и дизайн купонов
  • Тема продажи приложений
  • Блок отзывов на сайте
  • Блок отзывов каруселью для сайта
  • Записи для оформления блога
  • Виджет музыкального плеера bootstrap
  • Галерея с возможностью открыть фото во весь экран
  • Красивое разделение блоков dividers

И это не весь список элементов которые присутствуют в данной сборке. Вы можете самостоятельно открать и опробывать каждый элемент

Widgets
Mini Blocks
Chart Block
Chart Block
Navigation
Status UI
Resume
Team Block
Mini Site
Mini Chart
Mini Chart
Menu
Image Block
Mini Resume
Login/Reg Form
Icon Block
User Block
Slide Status
Mini Navigation
Nav Tabs
Chart Block
Flip Image
Pricing table
Report Block
Mini Navigation
Chart UI
Text Block
Status UI
Mini Blocks
Menu
Widget
Text Block
Status
Icon Block
Icon Block
Status Table
Menu
Menu
Team Block
Pricing Table
Pricing Table
Image Block
Social Media
Form
Ecommerce Item
Social Media
Icon Block
Text Block
Wedding
Status Block
Nav Tabs
Menu
Select UI
Notification
Select UI
Editor
Mobile UI
Pricing Table
Icon Block
Ecommerce Cart
Icon Block
Nav Tabs
Chart
Sliding Status
Button
File UI
Menu
Chart
Chart
Dropdown
Changelog
Social Media
Number Block
Icon Block
Status UI
Company Details
Widget
Login
Icon Block
Team Block
Facts in Number
Chart Block
Nav Tabs
Status Table
Post Its
File UI
Pricing Table
Notebook UI
Menu
Social Media
Wedding Theme
Progress Block
Resume
Post Widget
Image Block
Events
Button
Twitter Widget
Chart
Chart Block
Settings Widget
User Theme
Menu
Mini Theme
User Block
Icon Block
Widget
Icon Block
Menu
Colorful Menu
Chart Block
Timeline
Social Sharing
Icon Block
Info Block
Sliding Status
Text Block
Sliding Menu
Team Block
Report Block
Team Block
Menu Block
Team Block
Team Block
Team Block
Team Block
Pricing Table
Progress Block
Forms UI
Filter UI
Timeline
Letterhead
Invoice
Status UI
Mini Resume
Image Block
Image Block
Image Block
Image Block
Icon Block
Icon Block
Icon Block
Icon Block
Facts in Numbers
Image Block
Food Menu
Coming Soon
Team
Team Block
Item Comparison
Ecom Item UI
Real Estate List
Counter UI
Counter UI
Masonry Grid
Icon Block
Text Block
To Do List
Items Editor
Mini Chart
Counter
Contact
Pricing Table
Icon Block
Weather Block
Login/Reg Form
Menu
Team Block
Social Media
Icon Block
Image Block
Pricing Table
Timeline
Icon Block
Resume
Text Effect
Text Block
Pricing Table
Mini Chart
Image UI
Icon Block
Carousel
Image Block
Social Media
Pricing Table
Team Block
Report Block
Mini Resume
Map Block
Weather Block
Image Block
To Do List
Sliding Report
Air Ticket
Login & Registration
Contact Block
Report Block
Accordion UI
Mini Chart
Chart Block
Schedule UI
Credit Card UI
Mini Dashboard
Team Block
Growth Chart
Counter Block
Status Chart Block
Pricing Table
Image Icon Block
On Off Switch
Menu UI
Status UI
Progress Status
Our Process
App Site Landing Page
File List UI
Text Block
Navigation
Text Block
Icon Block
Resume
Progress Report
Coupon UI
Chart Block
Image Block
App Theme
Pricing Table
Report UI
Social Media
Icon Block
Pricing Table
Progress UI
Testimonials
Testimonials
Pricing Table
Nav Tabs
Icon Block
Button
Mini Timeline
Blog UI
Text Block
Report Block
Icon Block
Nav Tabs
Mini Chart
Weather UI
Report Block
Chart Block
Flip Content
Chart UI
V Card
Bio Data
Quote Block
Icon Carousel
Testimonials
Twitter Block
Icon Block
Chart Block
Contacts List
Info Block
Chat Block
Chart Block
Social Media
Social Media
Quick Links
Quick Links
Music Player
Icon Block
Report Block
Social Media
Chart Block
Call UI
Navigation
Menu Block
Map block
Icon Block Nav
Image Carousel
Chart Block
Blog Nav Tab
Select Table
Chart Block
Image Gallery
Social Feed
Social Feed
Slide Content
Image Block
Timeline
Login   Register
Social Media
Music Player
Report
Select UI
Icon Block
Navigation
Team UI
Resume Mini
Text Block
Resume Block
Navigation
Navigation
Team Block
404
Box Shadow
Shadow Block
Dropcap
Coming Soon
Dividers
Login
Timeline
Report Block
Report Block
Menu
Text Block
Number Block
Team Block
Image Block
Login & Register

Скачать

Вот собственно и все! будем надеяться что данный набор элементов и графики сильно поможет вам в быстрой разработке ваших сайтов на bootstrap


Bootstrap Бутстрап 4 Form Inputs

❮ Назад Дальше ❯

Поддерживаемые элементы управления формы

Bootstrap поддерживает следующие элементы управления формы:

  • input
  • textarea
  • checkbox
  • radio
  • select

Загрузочный вход

Bootstrap поддерживает все типы входных данных HTML5: текст, пароль, DateTime, DateTime-Local, дату, месяц, время, неделю, номер, адрес электронной почты, URL, поиск, тел и цвет.

Примечание: Входы не будут полностью стилизованы, если их тип не объявлен должным образом!

Name:

Password:

В следующем примере содержится два входных элемента; один из type="text" и один из type="password". Как мы уже упоминали в главе формы, мы используем .form-control класс для стиля входов с полной шириной и надлежащего заполнения, и т.д.:

Пример

<div>
  <label for=»usr»>Name:</label>
  <input type=»text»>
</div>
<div>
  <label for=»pwd»>Password:</label>
  <input type=»password»>
</div>

Загрузочное текстовое

Comment:

В следующем примере содержится текстовое произносится:

Пример

<div>
  <label for=»comment»>Comment:</label>
  <textarea rows=»5″></textarea>
</div>

Флажки Bootstrap

Option 1

Option 2

Option 3

Флажки используются, если требуется, чтобы пользователь мог выбрать любое количество параметров из списка предустановленных параметров.

В следующем примере содержатся три флажка. Последний параметр отключен:

Пример

<div>
  <label>
    <input type=»checkbox» value=»»>Option 1
  </label>
</div>
<div>
  <label class=»form-check-label»>
    <input type=»checkbox» class=»form-check-input» value=»»>Option 2
  </label>
</div>
<div>
  <label>
    <input type=»checkbox» value=»» disabled>Option 3
  </label>
</div>

Пример объяснено

Используйте элемент-оболочку, class="form-check" чтобы обеспечить правильные поля для меток и флажков.

Добавьте .form-check-label класс к элементам меток, а также .form-check-input к правильному стилю флажков внутри .form-check контейнера.

Встроенные флажки

Используйте .form-check-inline класс, если вы хотите, чтобы флажки отображались в одной строке:

Option 1

Option 2

Option 3

Пример

<div>
  <label>
    <input type=»checkbox» value=»»>Option 1
  </label>
</div>
<div>
  <label class=»form-check-label»>
    <input type=»checkbox» class=»form-check-input» value=»»>Option 2
  </label>
</div>
<div>
  <label>
    <input type=»checkbox» value=»» disabled>Option 3
  </label>
</div>

Загрузочные переключатели

Option 1

Option 2

Option 3

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

Следующий пример содержит три переключателя. Последний параметр отключен:

Пример

<div>
  <label>
    <input type=»radio» name=»optradio»>Option 1
  </label>
</div>
<div>
  <label class=»form-check-label»>
    <input type=»radio» class=»form-check-input» name=»optradio»>Option 2
  </label>
</div>
<div>
  <label>
    <input type=»radio» name=»optradio» disabled>Option 3
  </label>
</div>

Как и в случае с флажками, используйте .form-check-inline класс, если вы хотите, чтобы переключатели отображались на одной строке:

Option 1

Option 2

Option 3

Пример

<div>
  <label>

    <input type=»radio» name=»optradio»>Option 1
  </label>
</div>
<div>
  <label class=»form-check-label»>
    <input type=»radio» class=»form-check-input» name=»optradio»>Option 2
  </label>
</div>
<div>
  <label>
    <input type=»radio» name=»optradio» disabled>Option 3
  </label>
</div>

Список выбора Bootstrap

Select list (select one): 1234
Multiple select list (hold ctrl or shift (or drag with the mouse) to select more than one): 12345

Списки выбора используются, если требуется разрешить пользователю выбирать из нескольких параметров.

В следующем примере содержится раскрывающийся список (выберите список):

Пример

<div>
  <label for=»sel1″>Select list:</label>
  <select>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Размер элемента управления формы

Изменение размера элемента управления Form с помощью .form-control-sm или .form-control-lg:

Пример

<input type=»text»>
<input type=»text»>
<input type=»text»>

Элемент управления формы с обычным текстом

Используйте, .form-control-plaintext Если вы хотите, чтобы стиль поле ввода как обычный текст:

Пример

<input type=»text»>

Файл управления формой и диапазон

Добавьте .form-control-range класс или в input type"range" . form-control-file input type"file" стиль элемента управления диапазона или поля файла с полной шириной:

Пример

<input type=»range»>
<input type=»file» class=»form-control-file border»>

❮ Назад Дальше ❯

Свойство отображения · Bootstrap v5.0

Как это работает

Измените значение свойства display с помощью наших служебных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для отображения . Классы можно комбинировать для получения различных эффектов по вашему желанию.

Notation

Классы утилит отображения, которые применяются ко всем точкам останова, от xs до xxl , не содержат аббревиатур точки останова. Это потому, что эти классы применяются с мин-ширина: 0; и выше, и поэтому не связаны медиа-запросом. Однако остальные точки останова содержат аббревиатуру точки останова.

Таким образом, классы именуются в следующем формате:

  • .d-{значение} для xs
  • .d-{точка останова}-{значение} для sm , md , lg , xl и xxl .

Где значение является одним из:

  • нет
  • встроенный
  • рядный блок
  • блок
  • сетка
  • стол
  • таблица-ячейка
  • таблица-строка
  • гибкий
  • встроенный гибкий

Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше . Например, .d-lg-none устанавливает display: none; на экранах lg , xl и xxl .

Примеры

d-inline

d-inline

 
d-inline


d-inline

d-блок d-блок

 d-блок
d-block

Скрытие элементов

Чтобы ускорить разработку для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов на устройствах. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скрывайте элементы в зависимости от размера экрана.

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого адаптивного варианта экрана.

Чтобы показать элемент только на заданном интервале размеров экрана, вы можете объединить один класс .d-*-none с классом .d-*-* , например, .d-none .d-md -block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экрана Класс
Скрыто на всех .d-нет
Скрыто только на xs .d-нет .d-sm-блок
Скрыт только на sm .d-sm-none .d-md-block
Скрыто только на мд .d-md-none .d-lg-блок
Скрыто только на lg .d-lg-нет .d-xl-блок
Скрыто только на xl .d-xl-нет .d-xxl-блок
Скрыт только на xxl .d-xxl-нет
Видно на всех .d-блок
Видно только на xs .d-блок .d-sm-нет
Видно только на см . d-none .d-sm-block .d-md-none
Видно только на md .d-none .d-md-block .d-lg-none
Видно только на LG .d-none .d-lg-block .d-xl-none
Отображается только на xl .d-none .d-xl-block .d-xxl-none
Видно только на xxl .d-нет .d-xxl-блок

скрыть на lg и более широких экранах

скрыть на экранах меньше lg

 
скрыть на lg и более широких экранах


hide on screens less than lg

Display in print

Измените значение display элементов при печати с помощью наших служебных классов print display. Включает поддержку тех же отображаемых значений , что и наши адаптивные утилиты .d-* .

  • .d-print-нет
  • . d-print-inline
  • .d-print-inline-block
  • .d-принт-блок
  • .d-print-grid
  • .d-стол для печати
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрыть только при печати)

Только печать (Скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать при печати

 
Только экран (Скрыть только при печати)


Только печать (скрывать только на экране)


Скрыть до большого размера на экране, но всегда показывать при печати

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

 "дисплей": (
      отвечает: правда,
      печать: правда,
      свойство: дисплей,
      класс: д,
      значения: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),

Карусель · Bootstrap

Компонент слайд-шоу для циклического просмотра элементов — изображений или слайдов текста — как карусель.

Как это работает

Карусель — это слайд-шоу для циклического просмотра контента, созданного с помощью 3D-преобразований CSS и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущих/следующих элементов управления и индикаторов.

В браузерах, поддерживающих Page Visibility API, карусель будет избегать скольжения, когда веб-страница не видна пользователю (например, когда вкладка браузера неактивна, окно браузера свернуто и т. д.).

Имейте в виду, что вложенные карусели не поддерживаются, а карусели, как правило, не соответствуют стандартам специальных возможностей.

Наконец, если вы собираете наш JavaScript из исходного кода, для этого требуется util.js .

Пример

Карусели автоматически не нормализуют размеры слайдов. Таким образом, вам может потребоваться использовать дополнительные утилиты или пользовательские стили для соответствующего размера содержимого. Хотя карусели поддерживают элементы управления и индикаторы «предыдущий/следующий», они явно не требуются. Добавляйте и настраивайте по своему усмотрению.

Обязательно установите уникальный идентификатор .carousel для дополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице.

Только слайды

Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .img-fluid на карусельных изображениях, чтобы предотвратить выравнивание изображений браузера по умолчанию.

 

  <дел>
    <дел>
       .." alt="Первый слайд">
    

    <дел>
      Второй слайд
<дел> Третий слайд

С элементами управления

Добавление в предыдущий и следующий элементы управления:

Предыдущий Следующий

 

  <дел>
    <дел>
      Первый слайд
    

    <дел>
      Второй слайд