когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Команда 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>
С .stretched-link
Some quick example text to build on the card title and make up the bulk of the card’s content.
У этой «фичи» есть ограничения. Если у вашей кнопки или ссылки есть своё позиционирование то эта «магия» перестаёт работать. Из-за этого я не смог это внедрить на своём сайте.
Text-break
Позволяет перенести слишком длинные строки. Теперь длинные строки не будут нарушать компоновку элементов.
Появился класс для прокручивающихся модальных окон. Многие используют модальное окно для политики конфиденциальности и ранее модальное окно с ней было огромным и приходилось от этого отказываться или писать свои стили. Теперь вы можете задать класс modal-dialog-scrollable для «тела» модального окна.
Нам «подвезли» новое поведение горизонтальных списков. Теперь можно задавать поведение в зависимости от размера экрана, а так же делать все элементы одной ширины. Вот так
Пример
<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
Loading…
Вариант 2
Loading…
Причём нам дали не только тёмный вариант, но и кучу цветных. Их вы можете найти в официальной документации по ссылке.
Подвезли «тосты»
Не понятно как это перевести на русский) Нам дали возможность получать создавать маленькие окошки с текстом и методы работы с ними.
В отличии от модальных окон они не перекрывают контент и их расположение можно контролировать.
Нужно помнить, что они придуманы для push-уведомлений и если вы хотите, чтобы они отображались по умолчанию нужно «потыкать» настройки. Список настроек тут.
Переключатели (switches )
Очень просто. Нам нужны были красивые переключатели для форм. Теперь они есть.
Вот такие полезные новинки в bootstrap 4.2 и 4.3. Конечно, я сделал эту статью с опозданием, но как мне кажется в интернете сейчас нет качественный статей о том что нового в bootstrap 4.2 и 4.3. Как правило всё сводиться к переводу блога разработчка. Однако, это не значит что блог не стоит читать. Некоторые вещи из него я умышленно упустил. Так, что для более полной информации вы можете перейти на https://blog.getbootstrap.com/
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.