StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
21.10.2016
10:43
6133
2
Отображение и скрытие элементов. Основы 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>
Попробуйте. Я думаю, вы частенько будете пользоваться этой фишкой.
Удачи, жду на следующих уроках.
Для шпаргалки можете сохранить вот эту картинку себе:
Изображение можно увеличить
Случайные записи:
- Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12
- Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9
- Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11
- Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
- Нам 2 годика! С Днем Рождения StepkinBlog.ru!!!
А как сделать, чтобы к примеру было видно на обычных и больших экранах, а на планшетах и мобилах скрывалось?
Ответить
15 ноября, 2016 at 20:33
Используйте класс "hidden-xs" и "hidden-sm"
Ответить