BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как скрыть блок div средствами HTML, CSS, JS и Bootstrap

Как скрыть блок div средствами HTML, CSS, JS и Bootstrap

2016-09-19 / Вр:09:22 / просмотров: 22986

Как скрыть блок div средствами HTML, CSS, JS и Bootstrap

Сегодня я расскажу, как скрыть блок <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>

Результат будет вот таким:

Как скрыть блок <div> средствами HTML , CSS, JS и Bootstrap

Теперь скроем блок №1 – «Здравствуйте, это мой блок №1».

Как скрыть элемент блока на сайте – HTML5

HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является «hidden».
Атрибут «hidden» сделает блок <div>  невидимым. Для этого достаточно прописать в строке №6 к блоку <div> атрибут «hidden»:

<div hidden>Здравствуйте, это мой блок №1.</div>
это мой блок №2 - BlogGood.ru

Результат будет вот таким:

Как скрыть блок средствами HTML , CSS, JS и Bootstrap

Как видите, блок №1 спрятался и остался только блок №2, так как я не прописал к нему тег <div>   с атрибутом «hidden».

Как скрыть элемент блока на  сайте – CSS

В CSS есть несколько способов, чтобы скрыть элемент <div>   на сайте, например, используя «display».
Итак, создайте для блока <div> class, например, «blok1»:

<div class="blok1" >Здравствуйте, это мой блок №1.</div>
это мой блок №2 - BlogGood.ru

Теперь в CSS пропишите вот такой стиль:

.blok1 {display:none;}

Блок с классом «blok1» исчезнет:

Как скрыть блок средствами HTML , CSS, JS и Bootstrap

Можно скрыть блок, используя прозрачность «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

Вот и все. Надеюсь статья была вам очень полезная.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573