Сегодня я расскажу, как скрыть блок <div> средствами HTML , CSS, JS и Bootstrap. Посчитал я, что, возможно, эта статья будет вам очень полезная по причине того, что вы не один раз будете сталкиваться с вопросом, как скрыть блок на сайте.
На практике меня этот способ очень спасал, когда нужно было убрать какие-то элементы с сайта, которые не я делал. Да, можно поискать, в каких файлах этот блок есть и удалить вручную, но не всегда это эффективно, так как можно поломать весь php-цикл. Так вот, сегодня покажу как легко и быстро скрывать такие блоки.
Вот такой будет у нас стандартный код на HTML:
<html> <head> <title> скрыть блок <div> средствами HTML , CSS, JS и Bootstrap на BlogGood.ru</title> </head> <body> <div>Здравствуйте, это мой блок №1.</div> это мой блок №2 - BlogGood.ru </body> </html>
Результат будет вот таким:
Теперь скроем блок №1 – «Здравствуйте, это мой блок №1».
Как скрыть элемент блока на сайте – HTML5
HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является «hidden».
Атрибут «hidden» сделает блок <div> невидимым. Для этого достаточно прописать в строке №6 к блоку <div> атрибут «hidden»:
<div hidden>Здравствуйте, это мой блок №1.</div> это мой блок №2 - BlogGood.ru
Результат будет вот таким:
Как видите, блок №1 спрятался и остался только блок №2, так как я не прописал к нему тег <div> с атрибутом «hidden».
Как скрыть элемент блока на сайте – CSS
В CSS есть несколько способов, чтобы скрыть элемент <div> на сайте, например, используя «display».
Итак, создайте для блока <div> class, например, «blok1»:
<div class="blok1" >Здравствуйте, это мой блок №1.</div> это мой блок №2 - BlogGood.ru
Теперь в CSS пропишите вот такой стиль:
.blok1 {display:none;}
Блок с классом «blok1» исчезнет:
Можно скрыть блок, используя прозрачность «opacity»:
.blok1 {opacity: 0;}
Можно скрыть блок, используя «visibility» со значением «hidden»:
.blok1 {visibility: hidden;}
Как скрыть элемент блока на сайте – JavaScript
Вы наверное такого нигде не видели, может этого никто и не использует, но этот способ работает и очень таки не плохо. Вставить код JavaScript нужно в самом низу веб страницы, то есть после </html>:
<script>
document.getElementsByClassName('blok1')[0].innerHTML = "";
</script>
blok1 – это класс <div>
Можно и вот таким способом:
<script>
document.getElementsByClassName('blok1')[0].style.display = "none"
</script>
Если прописать <div> не «class», а «id»:
<div id="idblok1">Здравствуйте, это мой блок №1.</div> это мой блок №2 - BlogGood.ru
Тогда код будет вот таким:
<script>
document.getElementById('idblok1').innerHTML = "";
</script>
idblok1 - «ID» блока <div>:
Можно и вот таким способом:
<script>
document.getElementById('idblok1').style.display = "none"
</script>
Как скрыть элемент блока на сайте для мелких экранов – BootStrap3
Если вам нужно спрятать большую картинку или блок <div> на маленьких устройствах (расширение экрана ниже <768px), то в BootStrap есть уже готовые стили:
Мобильные устройства (<768px) — .visible-xs, .hidden-xs
Планшеты (768px — 992px) — .visible-sm, .hidden-sm
Десктопы (992px — 1200px) — .visible-md, .hidden-md
Большие экраны (>1200px) — .visible-lg, .hidden-lg
Например, скроем блок для маленьких устройств:
<div class="hidden-xs hidden-sm"> Здравствуйте, это мой блок №1. </div> это мой блок №2 - BlogGood.ru
Вот и все. Надеюсь статья была вам очень полезная.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как вытащить любое значение с атрибута – JS
Сайт пока не может обработать этот запрос HTTP ERROR 500
Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Как получить значение ID при клике по слову?Похожие статьи
Как сделать бесконечное вращение картинки на CSS3
Обзор популярных локальных серверов для сайта
Эффект падающего снега
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222518 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187688 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Один ответ на комментарий - Как скрыть блок div средствами HTML, CSS, JS и Bootstrap
Добавить комментарий
Метки: Bootstrap, css, html, javascript, Вебмастеру
Хорошие примеры. Спасибо