Новые фишки Bootstrap 4.2/4.3

Команда bootstrap’а не стоит на месте и радует нас новыми фишками. Обновление 4.2 и 4.3 принесли нам несколько приятных «фич». Сегодня я вам расскажу о самых полезных, на мой взгляд, из них.

Stretched-link

Не многие знают, что «запихивать» в строчные элементы блочные — зло и не все фрэймворки распознают это как «дерьмокод». Например, в react js если вы попытаетесь засунуть в ссылку какой-нибудь div, то вся ваша консоль будет пестрить краснотой. Кстати, именно такая особенность семантической разметки кода побудила меня в списке новостей делать только кликабельную кнопку.

Но что же делать, если нужно сделать кликабельной всю карточку?! Для этого команда bootstrap’а придумала класс .stretched-link

Его суть заключается в том, что если у родителя кнопки или ссылки есть какое-то позиционирование (например relative), то он (родитель) станет полностью кликабельным.

Пример

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

У этой «фичи» есть ограничения. Если у вашей кнопки или ссылки есть своё позиционирование, то эта «магия» перестаёт работать. Из-за этого я не смог это внедрить на своём сайте.

Text-break

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

Документация тут

Modal-dialog-scrollable

Появился класс для прокручивающихся модальных окон. Многие используют модальное окно для политики конфиденциальности. Ранее модальное окно с ней было огромным и приходилось от этого отказываться или писать свои стили. Теперь вы можете задать класс modal-dialog-scrollable для «тела» модального окна.

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

list-group-horizontal

Нам «подвезли» новое поведение горизонтальных списков. Теперь можно задавать поведение в зависимости от размера экрана, а также делать все элементы одной ширины. Вот так

Пример

<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item flex-fill">Cras justo odio</li>
  <li class="list-group-item flex-fill">Dapibus ac facilisis in</li>
  <li class="list-group-item flex-fill">Morbi leo risus</li>
</ul>

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

Добавлены спинеры

Теперь нам есть что показать во время загруки. Лично я раньше искал какую-нибудь гифку для отображения загрузки, теперь они есть bootstrap.

Вариант 1

Вариант 2

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

Подвезли «тосты»

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

В отличии от модальных окон они не перекрывают контент и их расположение можно контролировать.

<div id="xakpl_toast_article_exp" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
<script>
window.addEventListener('load', ()=>{
$('#xakpl_toast_article_exp').toast({autohide: false});
$('#xakpl_toast_article_exp').toast('show');
});
</script>

Нужно помнить, что они придуманы для push-уведомлений и если вы хотите, чтобы они отображались по умолчанию, нужно «потыкать» настройки. Список настроек тут.

Переключатели (switches )

Очень просто. Нам нужны были красивые переключатели для форм. Теперь они есть.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Tooltip с собственным html

Теперь в tooltip можно размещать собственный html.

<button id="xakpl_tooltip_exp" type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true">
  Tooltip with HTML
</button>
<script>
window.addEventListener('load', ()=>{
$('#xakpl_tooltip_exp').tooltip({trigger: "hover", html: true, title: "<h6>Привет</h6><p>Вот мой html</p>"})
});
</script>

P.S.

Вот такие полезные новинки в bootstrap 4.2 и 4.3. Конечно я сделал эту статью с опозданием, но как мне кажется в интернете сейчас нет качественных статей о том что нового в bootstrap 4.2 и 4.3. Как правило, всё сводиться к переводу блога разработчика. Однако это не означает, что блог не стоит читать. Некоторые вещи из него я умышленно упустил. Так что для более полной информации вы можете перейти на https://blog.getbootstrap.com/