Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

21.10.2016


10:43


2539


2


Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Всем привет!
В сегодняшнем уроке я расскажу,  как отобразить нужные или скрыть ненужные элементы (блоки <div>, картинки, текст и т.д.) в зависимости от размера экрана или же от дисплея пользователя.
Я частенько пользуюсь скрытием блоков для мобильных устройств, так как не всегда они нужны для мобильных версий сайта.

В Bootstrap 3 есть специальные классы, с помощью которых можно скрыть или отобразить элемент.

Отображение элементов

Класс Описание
visible-xs Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы.
visible-sm Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы.
visible-md Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы.
visible-lg Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы.

Пример:

<p class="visible-xs ">
этот текст виден только на смартфонах.
</p>
<p class="visible-sm ">
этот текст виден только на планшетах.
</p>
<p class="visible-md ">
этот текст виден только на устройствах со средним размером экрана.
</p>
<p class="visible-lg">
этот текст виден только на устройствах с большим экраном.
</p>

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

Класс Описание
hidden-xs Скрыть эти элементы только для устройств, имеющих экран шириной менее 768px. На других устройствах эти элементы видимы.
hidden-sm Скрыть эти элементы только для устройств, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше 992px. На других устройствах эти элементы видимы.
hidden-md Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы видимы.
hidden-lg Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы видимы.

Пример:

<p class="hidden-xs ">
Этот текст будет виден только на смартфонах.
</p>
<p class="hidden-sm ">
Этот текст будет виден только на планшетах.
</p>
<p class="hidden-md ">
Этот текст будет виден только на устройствах со средним размером экрана.
</p>
<p class="hidden-lg">
Этот текст будет виден только на устройствах с большим экраном.
</p>

Скрытие и отображение элементов для печати

Класс

Описание

visible-print Позволяет скрыть отображение блочного элемента в браузере. При печати этот элемент будет виден.
hidden-print Скрыть элемент при печати страницы. При отображении в браузере этот элемент будет виден.

Пример:

<p class="visible-print">
Этот текст будет виден только для печати.
</p>
<p class="hidden-print">
Этот текст будет виден только в браузере, а для печати будет скрыт.
</p>

Попробуйте. Я думаю, вы частенько будете пользоваться этой фишкой.
Удачи, жду на следующих уроках.

Для шпаргалки можете сохранить вот эту картинку себе:

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Изображение можно увеличить

 



Случайные записи:

  1. Как прописать мета теги. Основы HTML для начинающих. Урок №21
  2. Подключение. Основы bootstrap 3 для начинающих. Урок №2
  3. Тег DOCTYPE в HTML
  4. Комментарии в php коде и как закомментировать код. Основы PHP с нуля. Урок №4
  5. Вкладки. Основы bootstrap 3 для начинающих. Урок №21

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

2 ответа(ов) на статью: “Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24”

  1. Михаил says:

    А как сделать, чтобы к примеру было видно на обычных и больших экранах, а на планшетах и мобилах скрывалось?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Используйте класс "hidden-xs" и "hidden-sm"

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245