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

Давайте еще раз взглянем на нашу работу, которую мы делали ранее (демо). Если смотреть в большом разрешении, то все отлично, но вот есть смотреть в очень маленьком разрешении (менее 768px), то наша картинка с животным смещается на второй ряд.

Но давайте подумаем, а зачем нам эта картинка вообще? При большом разрешении она выполняла декоративную роль и вполне гармонично смотрелась в правом углу, но вот во второй строке она совсем не уместна и Bootstrap нам поможет ее визуально скрыть (по факту она будет в коде, будет отдаваться поисковикам, будет кушать трафик пользователей).

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

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

<div class="col-lg-6 col-sm-7">
    <img src="img/animals.jpg" alt="" class="hidden-xs">
</div>

Мы добавили к нашей картинке класс hidden-xs, который, если взглянуть на таблицу выше, скрывает элемент при очень маленькой сетке, а во всех остальных случаях не скрывает. Так мы можем скрывать все неугодные глазу элементы.

Смотрим результат или качаем урок.

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

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

Scroll Up
Adblock detector