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

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

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

Можешь почитать и вот эту статейку "Верстаем на Twitter Bootstrap"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйт cущecтвуeт: 4626 дней
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 618
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [23]
  • Гости: [23]
  • Сегодня нас посетили: [7] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke
  • SQL запросов: 37
  • Генерация страницы: 0.134сек
  • Потребление памяти: 2.934 Mb 
  •   Яндекс.Метрика