Хаки и Скрипты Next Generation CMS

Спрятать блок на мобилках

irbees2008 irbees2008 Опубликовано - 27 - января Bootstrap 4
1564 - 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>

Можешь почитать и вот эту статейку "Хак- Для тех у кого тёмный фон."

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4572 дня
  • Новостей: 567
  • Комменты: 257
  • Зарегистрированно : 672
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.293сек
  • Потребление памяти: 5.165 Mb 
  •   Яндекс.Метрика