Скрытие и показ элементов в Bootstrap 4

Появление новой версии Bootstrap 4 повлекло за собой ряд изменений. Изменений было сделано довольно много. В связи с этим, тем кто активно использует bootstrap для разработки, требуется переосмыслить концепцию Bootstrap 4 по-новому. В соотношении с 3-й версии Bootstrap изменений было довольно много. Одним из таких изменений стало наименование CSS-классов, используемых для показа / скрытия элементов. Именно об этих классах мы поговорим в данном посту.

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

Как мы знаем в Bootstrap 3 для быстрой разработки и адаптации элементов под мобильные устройства одним из часто используемых классов был .hidden-*. Данный класс использовался для скрытия элементов, при определённых размерах экрана устройства. В Bootstrap 4 данные классы были удалены, и в качестве альтернативы им пришли .d-*-none и .d-*-block. Стоит отметить что класс visible-* так же был удалён начиная с beta-версии Bootstrap 4. Таким образом, с помощью новых классов достигнуть подобного эффекта можно с помощью комбинации классов .d-none .d-*-block.

Пример скрытия / показа элементов на Bootstrap 4

Ниже приведен небольшой код разметки с использованием актуальных классов. В примере старый класс class=»hidden-xs» заменен на class=»d-none d-sm-block». Кроме того, использоваться может и комбинация таких классов .d-none .d-sm-inline-block.

<div class="col d-none d-sm-block">
	…
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

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

Вот ещё пример, с комбинацией нескольких классов:

<div class="d-none d-sm-block"> hidden-xs           
	<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
		<div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
			<div class="d-none d-xl-block"> visible-xl </div>
		</div>
	</div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
	<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
		<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
			<div class="d-sm-none"> visible-xs </div>
		</div>
	</div>
</div>

Из всего выше описанного можно заметить, что эффект скрытия и показа элементов достигается не сложнее предыдущей версии Bootstrap. Вопрос в том насколько быстро можно привыкнуть к новым наименованиям. Если смотреть на ситуацию в целом, то есть существенные минусы. А именно миграция верстки с Bootstrap 3 версии на Bootstrap 4. Изменения коснулись в самом деле многих классов, и об этом обо всём вы так же можете узнать в официальной документации.