• 233
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет, вот нашел нужную мне фишку,поскольку на некоторых проектах используется Bootstrap 3, вот и пришлось публиковать в Bootstrap 4. И там мне понадобилось спрятать блоки на мобилках. Это значит надо спрятать блоки div на маленьких экранах ,с расширение ниже <768px . Мне подадобилось спрятать не нужные блоки в сайтбаре , поскольку они мешали нормальной загрузке основного контента.

В Bootstrap 2 использовались классы .hidden-phone, .hidden-tablet и т.д. Как вы поняли они устарели, и в Bootstrap 3 не работают.
Так вот в Bootstrap 3 используют вот эти классы

1.Мобильные устройства (<768px) — .visible-xs, .hidden-xs
2.Планшеты (768px — 992px) — .visible-sm, .hidden-sm
3.Десктопы (992px — 1200px) — .visible-md, .hidden-md
4.Большие экраны (>1200px) — .visible-lg, .hidden-lg

Ну и пример

Код:
<div class='hidden-xs hidden-sm'>
<div class='bаg-image>...</div>
</div>

Можешь почитать и вот эту статейку "Динамическое меню с скольжением цвета"

mistakes

Это тоже интересно

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

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element