Hr bootstrap: Шпаргалка по Bootstrap 4 - список классов Bootstrap

Содержание

Служебные классы · Bootstrap на русском

Bootstrap включает в себя десятки утилит—классы с одной-единственной целью. Они предназначены для уменьшения частоты высокой повторяемостью объявления в CSS пока позволяющ для быстрого и легкого развития.

Содержание

Расстояние

Назначьте margin или padding элемент или подмножество его сторон Сокращенное классов. Включает поддержку отдельных свойств, все свойства, и вертикальные и горизонтальные свойства. Все классы презентации глобальное значение по умолчанию 1rem.

Классы имеют имена в формате: {property}-{sides}-{size}

Где property одно из:

m — для классов, набор margin
p — для классов, набор padding

Где sides одно из:

t — для классов, набор margin-top или padding-top
b — для классов, набор margin-bottom или padding-bottom
l — для классов, набор margin-left или padding-left
r — для классов, набор margin-right или padding-right
x — для классов, которые выделяют оба *-left и *-right
y — для классов, которые выделяют оба *-top и *-bottom
a — для классов, комплект margin или padding на все 4 стороны элемента

Где size одно из:

0 — для классов, которые устраняют margin или padding значение 0
1 — (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x или $spacer-y
2 — (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x * 1.5 или $spacer-y * 1.5
3 — (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x * 3 или $spacer-y * 3

(Вы можете добавить больше размеров путем добавления записи в $spacers Sass переменное карте.)

Вот некоторые типичные примеры из этих классов:

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-1 {
  margin-left: $spacer-x !important;
}

.p-x-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
}

.p-a-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}

Горизонтальное центрирование

Кроме того, Bootstrap также включает в себя .m-x-auto класс для горизонтального центрирования фиксированной ширины содержимого блока с помощью установки горизонтальных отступов auto.

<div>
  Centered element
</div>

Выравнивание текста

Легко перестроить текст с компонентами с текстом, классы выравнивания.

Justified text.

No wrap text.

<p>Justified text.</p>
<p>No wrap text.</p>

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

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

<p>Left aligned text on all viewport sizes.</p>
<p>Center aligned text on all viewport sizes.</p>
<p>Right aligned text on all viewport sizes.</p>

<p>Left aligned text on viewports sized SM (small) or wider.</p>
<p>Left aligned text on viewports sized MD (medium) or wider.</p>
<p>Left aligned text on viewports sized LG (large) or wider.</p>
<p>Left aligned text on viewports sized XL (extra-large) or wider.</p>

Преобразования текста

Преобразовать текст в компонентах с текстом классы капитализации.

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>CapiTaliZed text.</p>

Обратите внимание, как text-capitalize меняет только первую букву каждого слова, оставляя в случае любого другого письма без изменений.

Жирный и курсивный текст

Быстро изменить жирность текста или наличие курсива.

Bold text.

Normal weight text.

Italic text.

<p>Bold text.</p>
<p>Normal weight text.</p>
<p>Italic text.</p>

Контекстная цветов и фонов

Передать смысл посредством цвета с горсткой утилита акцент классы. Они также могут быть применены к одной и потемнеет на наведение как наши стили ссылок по умолчанию.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>

Контекстной классы также хорошо работать на анкеры с наведение и фокусом состояния.

<a href="#">Muted link</a>
<a href="#">Primary link</a>
<a href="#">Success link</a>
<a href="#">Info link</a>
<a href="#">Warning link</a>
<a href="#">Danger link</a>

Похожие на контекстной цвет оправы, легко установить фоновый элемент для любого контекстуального класса. Якорь компонентов будет темным на наведении, как и текст классы.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum.

<div>Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div>Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div>Etiam porta sem malesuada magna mollis euismod.</div>
<div>Donec ullamcorper nulla non metus auctor fringilla.</div>
<div>Cras mattis consectetur purus sit amet fermentum.</div>

Общаясь со спецификой

Иногда контекстная классы не могут быть применены из-за специфики другой селектор. В некоторых случаях достаточно обойти это, чтобы обернуть содержимое элемента в <div> с классом.

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Ширина

Легко сделать элемент так велик, как его родитель с помощью .w-100 класс-утилиту, которая устанавливает width: 100%.

<img src="..." alt="Width = 100%">

CSS `display` (`block`, `inline`, `inline-block`)

Используйте .d-block, .d-inline или .d-inline-block, чтобы просто установить элемент display опция в block, inline, или inline-block (соответственно).

Чтобы сделать элемент display: none используйте наш aдаптивный коммунальные услуги вместо.

Inline

Block

inline-block

Boot that strap!

inline-block

Strap that boot!

<div>Inline</div>
<div>Inline</div>

<span>Block</span>

<div>
  <h4>inline-block</h4>
  Boot that strap!
</div>
<div>
  <h4>inline-block</h4>
  Strap that boot!
</div>

Иконка «закрыть»

Использование универсального закрыть иконка для удаления Контента, как модальные глаголы и оповещения. Будьте уверены, чтобы включать в себя текст для чтения с экрана, как мы сделали с aria-label.

<button type="button" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Адаптивное смещение

Эти классы поплавковый элемент влево или вправо, или отключить плавающий, в зависимости от текущего размера окна просмотра, используя CSS float собственность. !important включен, чтобы избежать проблем специфики. Они используют одинаковую ширину вьюпорта точки останова как блочная система.

Также доступны два одинаковых не-отзывчивых Sass миксина (pull-left и pull-right)

Float left on all viewport sizes

Float right on all viewport sizes

Don’t float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

<div>Float left on all viewport sizes</div><br>
<div>Float right on all viewport sizes</div><br>
<div>Don't float on all viewport sizes</div><br>

<div>Float left on viewports sized SM (small) or wider</div><br>
<div>Float left on viewports sized MD (medium) or wider</div><br>
<div>Float left on viewports sized LG (large) or wider</div><br>
<div>Float left on viewports sized XL (extra-large) or wider</div><br>

// Связанных просто не-aдаптивной примеси
.element {
  @include pull-left;
}
.another-element {
  @include pull-right;
}

Clearfix

Легко очистить float путем добавления .clearfix к родительскому элементу. Использует микро clearfix популяризируемый Николас Галлахер. Также может быть использован в качестве mixin.

<div>...</div>

//Сам mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Использования в качестве mixin
.element {
  @include clearfix;
}

Фиксированное позиционирование

На .pos-f-t класс может быть легко использованы для установки элементов в верхней части области просмотра и сделать их шире области просмотра. Убедитесь, что вы понимаете последствия фиксированной установки элементов в проекте. вот как класс определен:

.pos-f-t {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;
}

Невидимого содержимого

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

<div>...</div>

// Класс
.invisible {
  visibility: hidden;
}

// Использования в качестве mixin
.element {
  @include invisible;
}

Читатели экрана и клавиатуры

Скрыть элемент на всех устройствах кроме чтения с экрана с .sr-only. Комбинат .sr-only с .sr-only-focusable чтобы снова отобразить элемент, когда она находится в фокусе (например, клавиатура только для пользователей). Также может быть использован в качестве примеси.

<a href="#content">Skip to main content</a>

// Использования в качестве mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

Замена изображения

Использовать .text-hide класс или mixin чтобы помочь заменить текстовое содержимое элемента с фоновым изображением.

<h2>Custom heading</h2>

// Использования в качестве mixin
.heading {
  @include text-hide;
}

Адаптивная вставка

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

Правила применяются к <iframe>, <embed>, <video>, и <object> элементы; при необходимости использовать явную класс потомок .embed-responsive-item Если вы хотите, чтобы соответствовать стайлинг для других атрибутов.

Pro-Совет! Вы не должны включать frameborder="0" в <iframe>, как мы переопределить это для вас.

<div>
  <iframe src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Пропорции могут быть настроены с классами модификатор.

<!-- 21:9 Соотношение сторон -->
<div>
  <iframe src="..."></iframe>
</div>

<!-- 16:9 Соотношение сторон -->
<div>
  <iframe src="..."></iframe>
</div>

<!-- 4:3 Соотношение сторон -->
<div>
  <iframe src="..."></iframe>
</div>

<!-- 1:1 Соотношение сторон -->
<div>
  <iframe src="..."></iframe>
</div>

Уведомления. Компоненты · Bootstrap. Версия v4.0.0

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

Примеры

Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, .alert-success). Для строчного отклонения используйте плагин уведомлений jQuery.

Это основное уведомление — check it out!

Это дополнительное уведомление — check it out!

Это уведомление об успехе — check it out!

Это уведомление об опасности — check it out!

Это уведомление-предупреждение — check it out!

Это инфо-уведомление — check it out!

Это светлое уведомление — check it out!

Это темное уведомление — check it out!

<div role="alert">
  Это основное уведомление — check it out!
</div>
<div role="alert">
  Это дополнительное уведомление — check it out!
</div>
<div role="alert">
  Это уведомление об успехе — check it out!
</div>
<div role="alert">
  Это уведомление об опасности — check it out!
</div>
<div role="alert">
  Это уведомление-предупреждение — check it out!
</div>
<div role="alert">
  Это инфо-уведомление — check it out!
</div>
<div role="alert">
  Это инфо-уведомление — check it out!
</div>
<div role="alert">
  Это темное уведомление — check it out!
</div>

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Цвет ссылки

Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.

<div role="alert">
  Это основное уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это дополнительное уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это уведомление об успехе с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это уведомление об опасности с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это уведомление-предупреждение с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это инфо-уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это светлое уведомление с <a href="#">примером ссылки</a>.
</div>
<div role="alert">
  Это темное уведомление с <a href="#">примером ссылки</a>.
</div>

Дополнительное содержимое

Уведомления также могут содержать элементы HTML – заголовки, параграфы и т.п.

Отличная работа!

Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работает спейсинг в сообщениях уведомлений.

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

<div role="alert">
  <h5>Отличная работа!</h5>
  <p>Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работает спейсинг в сообщениях уведомлений.</p>
  <hr>
  <p>Когда необходимо, используйте марджины для создания необходимых отступов.</p>
</div>

Отмена («крестик»)

Использование JS-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.

Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.

Если вы загружаете JavaScript для уведомлений из файла, это потребует util.js. Он есть в компилированной версии.

Добавьте «крестик» отмены и класс .alert-dismissible, который создаст дополнительный паддинг справа от сообщения и спозиционирует кнопку класса .close.

В «крестике» отмены добавьте атрибут data-dismiss="alert", запускающий функциональность JS. Используйте элемент <button> для правильной работы на всех устройствах.

Для анимации уведомлений при их закрытии добавьте классы .fade и .show.

Вот демо:

Holy guacamole! You should check in on some of those fields below.

×

<div role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

«Поведение» JavaScript

Триггеры

Включите закрытие уведомления через JavaScript:

$(".alert").alert()

Или сделайте это с помощью атрибутов data на кнопке внутри уведомления, как показано ниже:

<button type="button" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Заметим, что закрытие уведомления удалит его из DOM-структуры документа.

Методы

Метод	Описание
`$().alert()`	Заставляет уведомление «слушать» события по клику на дочерние элементы с атрибутом `data-dismiss="alert"`. (Необязательно использовать здесь авто-инициализацию API)
`$().alert('close')`	Закрывает уведомление методом удаления его из DOM-структуры. Если в элемент добавлены классы `.fade` и `.show` – уведомление исчезнет до того, как удалено.
`$().alert('dispose')`	Уничтожает уведомление элемента.

$(".alert").alert('close')

События

Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.

Событие	Описание
`close.bs.alert`	Это событие запускается немедленно при вызове экземпляра метода `close`.
`closed.bs.alert`	Это событие запускается, когда уведомление закрыто (событие будет ждать завершения «переходов» СSS).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Информеры. Компоненты · Bootstrap. Версия v4.0.0

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

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов (поповеров):

Таковой плагин использует для позиционирования 3-ю часть библиотеки Popper.js. Чтобы плагин работал, Вы должны подключать popper.min.js ПЕРЕД bootstrap.js, или использовать bootstrap.bundle.min.js / bootstrap.bundle.js – содержащие Popper.js!

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

Если вы подключаете ваш JavaScript в виде файла, вам потребуется util.js.

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

Для работы плагина значения title and content не должны быть нулевыми.

Задавайте container: 'body' для избегания проблем с отрисовкой в более сложных компонентах (таких как группы ввода, кнопок, т.д.)

Запуск поповеров на скрытых элементах не работает.

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

Когда поповеры запущены из ссылок, которые оборачивают множественные строки, всплывающие элементы будут центрироваться по общей ширине ссылок. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
Поповеры должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.

Ниже несколько примеров.

Пример: включайте поповеры везде

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

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

Когда у вас есть некие стили родительского элемента, которые взаимодействуют с поповером, вам потребуется создать обычный container — так, чтобы HTML ВЭ появлялся внутри того элемента.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Пример

Click to toggle popover

<button type="button" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

Четыре параметра выравнивания доступны: верх, право, низ, лево.

Popover on top

Popover on right

Popover on bottom

Popover on left

<button type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Отмена по клику

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

Для такого поведения нужна специальная разметка

Для правильного кросс-браузерного и кросс-платформенного поведения, описанного в «Отмене по клику» выше – надо использовать не тэг <button>, а <a>, также вы можете подключить атрибут tabindex.

<a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Отключение элементов

Неактивные элементы с атрибутом disabled не являются интерактивными, т.е. юзеры не могут кликать на них для вызова поповера (или всплывающей подсказки) и по наведению их стиль не изменится. Как один из «обходных способов» — можно запустить поповер из оборачивающего элемента <div> или <span> и «преодолеть» событие pointer-events дезактивированных элементов.

Для дезактивированных элементов-триггеров поповеров также можно задать data-trigger="hover", что заставит поповер визуально «откликаться» на наведение, т.к. юзеры могут и не захотеть кликнуть на дезактивированный элемент.

Disabled button

<span data-toggle="popover" data-content="Disabled popover">
  <button type="button" disabled>Disabled button</button>
</span>

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

Активируйте поповеры через JavaScript:

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

Параметры

Параметры можно передавать через атрибуты или JS. В случае атрибутов добавляйте нужное название к data-, как в data-animation="".

Название	Тип	По умолчанию	Описание
animation	boolean	true	Применяет CSS переход «угасание» к поповеру.
container	string \| element \| false	false	Добавляет поповер к элементу. Пример: `container: 'body'`. Этот параметр в частности позволяет позиционировать поповер в «потоке документа» рядом с элементом-триггером – что предотвратит «уплывание» поповера при изменении размера экрана.
content	string \| element \| function	»	Дефолтное значение содержимого, если атрибут `data-content` не существует. Если функция задана, этот параметр будет вызван к элементу, к которому прикреклен поповер, ее экземпляром `this`.
delay	number \| object	0	Откладывает показ и скрытие поповера (милисекунды) – не применяется к типу «триггер вручную». Если число задано, отсрочка применяется и к показу, и к скрытию. Структура объекта такова: `delay: { "show": 500, "hide": 100 }`.
html	boolean	false	Вводит HTML-код в поповер. Если «false», для вставки контента в DOM будет использован `текстовый` метод jQuery. Используйте, если вы беспокоитесь насчет XSS-атак.
placement	string \| function	‘right’	Позволяет позиционировать поповер – авто \| верх \| низ \| лево \| право. Когда `auto` — динамически переориентирует поповер. Когда функция используется для определения расположения, она вызывается «узлом» поповера в DOM, который выступает как первый аргумент, и запускающий элемент «узла» DOM – как второй. Контекст `this` задается экземпляру поповера.
selector	string \| false	false	Если селектор задан, объекты поповера будут «делегированы» определенным «целям». На практике это используется для активации возможности добавления поповеров в динамическое содержимое HTML. Смотри сюда и сюда.
template	string	`'<div role="tooltip"><div></div><h4></h4><div></div></div>'`	Обычный HTML для использования при создании поповера. `title` поповера будет введен в класс `.popover-header`. `content` поповера будет введен в класс `.popover-body`. `.arrow` станет «стрелочкой» поповера. Элемент, куда обернуты все остальные – должен иметь класс `.popover`.
title	string \| element \| function	»	Дефолтное название, если `title` не задан. Если функция задана, этот параметр будет вызван к элементу, к которому прикреклен поповер, ее экземпляром `this`.
trigger	string	‘click’	Задает то, как поповер вызывается — клик \| hover \| focus \| вручную. Вы можете передать множественные триггеры: разделите их пробелом. «Вручную» (manual) нельзя сочетать с прочими.
offset	number \| string	0	Отступ поповера относитеьлно его «цели». Для информации идите обратитесь к документам по отступам в Popper.js.
fallbackPlacement	string \| array	‘flip’	Позволяет задать, на какой позиции Popper встанет при откате. Для информации — сюда.
boundary	string \| element	‘scrollParent’	Ограничивает отображение границ поповера, если он целиком не помещается и выходит за область заданных размеров. Принимает значения `'viewport'`, `'window'`, `'scrollParent'`, или отсылку к элементу HTML (через JavaScript). Для информации – документы по предотвращению Оверфлоу.

Атрибуты для индивидуальных поповеров

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

Методы

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

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

Смотрите документацию JavaScript для информации.

`$().popover(options)`

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

`.popover('show')`

Выявляет поповер элемента. Возвращается к функции-вызову до того, как поповер показан (т.е. до того, как произойдет событие shown.bs.popover). Расценивается как «ручной» запуск поповера. Поповеры, чьи название и содержимое есть значения нулевой длины – никогда не отображаются.

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

`.popover('hide')`

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

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

`.popover('toggle')`

Изменяет состояние поповера. Возвращается к функции-вызову до того, как модальный элемент скрыт. (т.е. до того, как произойдут события shown.bs.popover или hidden.bs.popover). Расценивается как «ручной» запуск поповера.

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

`.popover('dispose')`

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

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

`.popover('enable')`

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

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

`.popover('disable')`

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

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

`.popover('toggleEnabled')`

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

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

`.popover('update')`

Обновляет позицию поповера элемента.

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

События

Тип события	Описание
show.bs.popover	Это событие наступает немедленно, когда вызван экземпляр метода `show`.
shown.bs.popover	Это событие наступает, когда поповер только что сделан видимым юзеру (будет ждать завершения переходов CSS).
hide.bs.popover	Это событие наступает немедленно, когда только что вызван экземпляр метода `hide`.
hidden.bs.popover	Это событие наступает, когда поповер только что перестал быть скрытым от юзера (будет ждать завершения переходов CSS).
inserted.bs.popover	Это событие наступает после события `show.bs.popover`, когда шаблон поповера только что добавлен в DOM.

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Группа ввода. Компоненты · Bootstrap. Версия v4.0.0

Легко расширяйте элементы управления формой, добавляя текст, кнопки или группы кнопок по обе стороны от текстовых входов.

Базовые примеры

Разместите одно «дополнение» или кнопку слева или справа от формы ввода. Вы можете также разместить их с обеих сторон. Мы не поддерживаем создание множественных органов контроля форм в одной группе форм ввода, а элементы <label> должны быть вне этой группы.

<div>
  <div>
    <span>@</span>
  </div>
  <input type="text" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Имя получателя" aria-label="Имя получателя" aria-describedby="basic-addon2">
  <div>
    <span>@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div>
  <div>
    <span>https://example.com/users/</span>
  </div>
  <input type="text" aria-describedby="basic-addon3">
</div>

<div>
  <div>
    <span>$</span>
  </div>
  <input type="text" aria-label="Amount (to the nearest dollar)">
  <div>
    <span>.00</span>
  </div>
</div>

<div>
  <div>
    <span>With textarea</span>
  </div>
  <textarea aria-label="With textarea"></textarea>
</div>

Размеры

Добавьте в саму группу .input-group классы относительных размеров форм и содержимое группы будет автоматически изменять размер – т.е. не будет необходимости повторять классы размера органов контроля формы в каждом элементе.

<div>
  <div>
    <span>Small</span>
  </div>
  <input type="text" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div>
  <div>
    <span>Default</span>
  </div>
  <input type="text" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div>
  <div>
    <span>Large</span>
  </div>
  <input type="text" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

«Дополнения» чекбоксов и «радио»

Разместите какой-либо чекбокс или «радио» внутри дополнения группы ввода вместо текста.

<div>
  <div>
    <div>
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" aria-label="Text input with checkbox">
</div>

<div>
  <div>
    <div>
    <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" aria-label="Text input with radio button">
</div>

Множественный ввод

Хотя несколько <input> поддерживаются визуально, стили проверки доступны только для групп ввода с одним <input>.

<div>
  <div>
    <span>Имя и фамилия</span>
  </div>
  <input type="text">
  <input type="text">
</div>

Множественные «дополнения»

Поддерживаются множественные «дополнения», которые можно миксовать с версиями ввода в виде чекбоксов и «радио».

<div>
  <div>
    <span>$</span>
    <span>0.00</span>
  </div>
  <input type="text" aria-label="Amount (to the nearest dollar)">
</div>

<div>
  <input type="text" aria-label="Amount (to the nearest dollar)">
  <div>
    <span>$</span>
    <span>0.00</span>
  </div>
</div>

Кнопки

<div>
  <div>
    <button type="button">Кнопка</button>
  </div>
  <input type="text" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Имя получателя" aria-label="Имя получателя" aria-describedby="basic-addon2">
  <div>
    <button type="button">Кнопка</button>
  </div>
</div>

<div>
  <div>
    <button type="button">Кнопка</button>
    <button type="button">Кнопка</button>
  </div>
  <input type="text" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>

<div>
  <input type="text" placeholder="Имя получателя" aria-label="Имя получателя" aria-describedby="basic-addon2">
  <div>
    <button type="button">Кнопка</button>
    <button type="button">Кнопка</button>
  </div>
</div>

Кнопки с выпадающими элементами

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div role="separator"></div>
      <a href="#">Separated link</a>
    </div>
  </div>
  <input type="text" aria-label="Text input with dropdown button">
</div>

<div>
  <input type="text" aria-label="Text input with dropdown button">
  <div>
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div>
      <a href="#">Action</a>
      <a href="#">Another action</a>
      <a href="#">Something else here</a>
      <div role="separator"></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

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

<div>
  <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 role="separator"></div>
      <a href="#">Separated link</a>
    </div>
  </div>
  <input type="text" aria-label="Text input with segmented dropdown button">
</div>

<div>
  <input type="text" aria-label="Text input with segmented dropdown 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 role="separator"></div>
      <a href="#">Separated link</a>
    </div>
  </div>
</div>

Пользовательские формы

Группы ввода включают поддержку пользовательских выборок и пользовательских загрузок файлов. Стандартные версии браузера для них не поддерживаются.

Пользовательский выбор

Options

Choose…OneTwoThree

Options

Кнопка

Choose…OneTwoThree

Кнопка

<div>
  <div>
    <label for="inputGroupSelect01">Options</label>
  </div>
  <select>
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div>
  <select>
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div>
    <label for="inputGroupSelect02">Options</label>
  </div>
</div>

<div>
  <div>
    <button type="button">Кнопка</button>
  </div>
  <select>
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div>
  <select>
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div>
    <button type="button">Кнопка</button>
  </div>
</div>

Пользовательская загрузка файла

<div>
  <div>
    <span>Upload</span>
  </div>
  <div>
    <input type="file">
    <label for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div>
  <div>
    <input type="file">
    <label for="inputGroupFile02">Choose file</label>
  </div>
  <div>
    <span>Upload</span>
  </div>
</div>

<div>
  <div>
    <button type="button">Кнопка</button>
  </div>
  <div>
    <input type="file">
    <label for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div>
  <div>
    <input type="file">
    <label for="inputGroupFile04">Choose file</label>
  </div>
  <div>
    <button type="button">Кнопка</button>
  </div>
</div>

Доступность

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

Точный метод (будет ли это скрытие элементов <label> классом .sr-only, или использование атрибутов aria-label и aria-labelledby, может быть в сочетании с aria-describedby) и то, какая дополнительная информация должна быть «доведена» до вспомогательных технологий – будет зависеть от точного типа виджета, который вы внедряете. Примеры в этой секции построены на нескольких специфических для каждого случая подходах.

Bootstrap Typography — примеры, руководство и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

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

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро /
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── Enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Разделы Bootstrap Intros — примеры, руководство и расширенное использование

Компиляция и настройка

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро /
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── Enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Hr bootstrap: Шпаргалка по Bootstrap 4 — список классов Bootstrap

Служебные классы · Bootstrap на русском

Содержание

Расстояние

Горизонтальное центрирование

Выравнивание текста

Преобразования текста

Жирный и курсивный текст

Контекстная цветов и фонов

Общаясь со спецификой

Передать смысл для ассистивных технологий

Ширина

CSS display (block, inline, inline-block)

inline-block

inline-block

Иконка «закрыть»

Адаптивное смещение

Clearfix

Фиксированное позиционирование

Невидимого содержимого

Читатели экрана и клавиатуры

Замена изображения

Адаптивная вставка

Уведомления. Компоненты · Bootstrap. Версия v4.0.0

Примеры

Использование вспомогательных технологий

Цвет ссылки

Дополнительное содержимое

Отличная работа!

Отмена («крестик»)

«Поведение» JavaScript

Триггеры

Методы

События

Информеры. Компоненты · Bootstrap. Версия v4.0.0

Обзор

Пример: включайте поповеры везде

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

Пример

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

Отмена по клику

Для такого поведения нужна специальная разметка

Отключение элементов

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

Параметры

Атрибуты для индивидуальных поповеров

Методы

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

$().popover(options)

.popover('show')

.popover('hide')

.popover('toggle')

.popover('dispose')

.popover('enable')

.popover('disable')

.popover('toggleEnabled')

.popover('update')

События

Группа ввода. Компоненты · Bootstrap. Версия v4.0.0

Базовые примеры

Размеры

«Дополнения» чекбоксов и «радио»

Множественный ввод

Множественные «дополнения»

Кнопки

Кнопки с выпадающими элементами

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

Пользовательские формы

Пользовательский выбор

Пользовательская загрузка файла

Доступность

Bootstrap Typography — примеры, руководство и расширенное использование

Компиляция и настройка

Разделы Bootstrap Intros — примеры, руководство и расширенное использование

Компиляция и настройка

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

CSS `display` (`block`, `inline`, `inline-block`)

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

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('dispose')`

`.popover('enable')`

`.popover('disable')`

`.popover('toggleEnabled')`

`.popover('update')`