Bootstrap 4 hidden xs: File not found · Bootstrap v5.1 — Программирование на Python и Objective-C в Mac OS

Содержание

Bootstrap v4 ‘hidden-xs-up’ не работает

У меня есть следующий код в представлении:

<button type="button" tabindex="500" title="Abort ongoing upload">
    <i></i>  
    <span>Cancel</span>
</button>

Я использую Bootstrap v4, в документации которого упоминается, что ‘hidden-xs-up’ (который заменил прежний ‘hidden-xs’) скроет конкретный элемент от устройств, которые являются ‘xs’ & вверх. К сожалению, в моем случае этого не происходит, и кнопка появляется. На самом деле в классе есть и некоторые другие элементы, но они тоже появляются.

В окне отладчика Chrome нет стилей, связанных с классом. Почему это происходит и каково решение?

javascript

css

twitter-bootstrap

bootstrap-4

Поделиться

Источник

aceBox

19 сентября 2017 в 22:14

3 ответа

hidden-xs скрывает div при печати в Bootstrap
в проекте MVC мы используем bootstrap. Есть необходимость скрыть div для устройств xs и показать во время печати и рабочего стола. Код приведен ниже как: <div class=hidden-xs> —Content— </div> Но он скрывает div во время печати в окно.
Bootstrap hidden-md не работает
Я хочу, чтобы скрыть столбец, который col-md-0 на моем экране на размер МД. Но он показывает мой экран . Как я могу это скрыть? <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css> существует в моем теге <head> <div class=container-fluid…

В бета-версии Bootsrap 4 visible-** и hidden-** были заменены на d-none , d-block , d-inline , & d-flex . Обратитесь к этому для получения полного списка эквивалентов visible-** и hidden-** в бета-версии Bootstrap 4.

Поделиться

Sheedo

20 сентября 2017 в 01:48

Поддержка для него была прекращена в v4.0.0-бета:

См. https://github.com/twbs/bootstrap/pull/22113

Drops .hidden-*-up. Это то же самое, что и наш отзывчивый дисплей: нет утилиты. Вместо .hidden-xs-up или .hidden-md-up используйте .d-none и .d-md-none.

Поделиться

user125661

19 сентября 2017 в 22:46

На этой странице для версии 4

https://getbootstrap.com/docs/4.0/migration/#отзывчивые-утилиты

там написано:

Удалено из v4 alphas: .hidden-xs-up ….

Они также добавляют:

Вместо этого попробуйте переключить атрибут [hidden] или использовать встроенные стили, такие как
style=»display: none;» и.

Поделиться

Johannes

19 сентября 2017 в 23:17

Не работают классы hidden- и visible-* на Bootstrap 4, как исправить?*

Не работают классы hidden-* и visible-* на Bootstrap 4, как исправить? — Веб-студия POLSKOY

На сайте ведутся технические работы. Приносим изменения за временные неудобства. Планируемое время окончания работ 12:00, 10.02.2021

Главная / Блог / Не работают классы hidden-* и visible-* на Bootstrap 4, как исправить?

После обновления популярного фреймворка Bootstrap до 4-й версии некоторые владельцы сайтов столкнулись с тем, что классы отвечающие за отображение блоков на определенных размерах экранов перестали работать. Классы вида hidden-* и visible-* активно использовались в 3й версии Bootstrap для разработки в том числе и в нашей студии.

4-я версия Bootstrap Больше не поддерживает классы hidden-* и visible-*, но необходимый для их работы функционал остался. Если вы хотите скрыть элемент на определенном размере экрана вы должны использовать класс d-*

Чтобы было проще и нагляднее, ниже представлены старые классы и их аналоги в Bootstrap 4.

Класс в Bootstrap 3	Аналог в Bootstrap 4
hidden-xs-down	d-none d-sm-block
hidden-sm-down	d-none d-md-block
hidden-md-down	d-none d-lg-block
hidden-lg-down	d-none d-xl-block
hidden-xl-down	d-none (аналог hidden)
hidden-xs-up	d-none (аналог hidden)
hidden-sm-up	d-sm-none
hidden-md-up	d-md-none
hidden-lg-up	d-lg-none
hidden-xl-up	d-xl-none
hidden-xs (только)	d-none d-sm-block (аналог hidden-xs-down)
hidden-sm (только)	d-block d-sm-none d-md-block
hidden-md (только)	d-block d-md-none d-lg-block
hidden-lg (только)	d-block d-lg-none d-xl-block
hidden-xl (только)	d-block d-xl-none
visible-xs (только)	d-block d-sm-none
visible-sm (только)	d-none d-sm-block d-md-none
visible-md (только)	d-none d-md-block d-lg-none
visible-lg (только)	d-none d-lg-block d-xl-none
visible-xl (только)	d-none d-xl-block

POLSKOY

ИП Польской А.А.

ОГРНИП: 317774600606884

ИНН: 772093834194

Создание сайтов
Продвижение сайтов

Bootstrap 4: hidden, visible

Как известно в Bootstrap 4 удалили семейство классов hidden-* и visible-*. На смену пришли классы семейства Display. Под катом, памятка о соответствии старых hidden/visible классов новым.

Показать/скрыть от размера и ниже:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (нет в 3.x) = d-none (тоже самое, что hidden)

Показать/скрыть от размера и выше:

hidden-xs-up = d-none (тоже самое, что hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (нет в 3.x) = d-xl-none

Показать/скрыть:

hidden-xs = d-none d-sm-block (тоже самое, что hidden-xs-down)
hidden-sm = d-block d-sm-none d-md-block
hidden-md = d-block d-md-none d-lg-block
hidden-lg = d-block d-lg-none d-xl-block
hidden-xl (нет в 3.x) = d-block d-xl-none
visible-xs = d-block d-sm-none
visible-sm = d-none d-sm-block d-md-none
visible-md = d-none d-md-block d-lg-none
visible-lg = d-none d-lg-block d-xl-none
visible-xl (нет в 3.x) = d-none d-xl-block

Bootstrap 4, скрыть/отобразить элемент

Классы hidden-* и visible-* , которые использовались в Bootstrap 3, в Bootstrap 4 удалены. Для скрытия, или отображения элементов используются классы d- *.

hidden-xs-down = d-none d-sm-block

hidden-sm-down = d-none d-md-block

hidden-md-down = d-none d-lg-block

hidden-lg-down = d-none d-xl-block

hidden-xl-down = d-none (same as hidden)

hidden-xs-up = d-none (same as hidden)

hidden-sm-up = d-sm-none

hidden-md-up = d-md-none

hidden-lg-up = d-lg-none

hidden-xl-up = d-xl-none

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)

hidden-sm (only) = d-block d-sm-none d-md-block

hidden-md (only) = d-block d-md-none d-lg-block

hidden-lg (only) = d-block d-lg-none d-xl-block

hidden-xl (only) = d-block d-xl-none

visible-xs (only) = d-block d-sm-none

visible-sm (only) = d-none d-sm-block d-md-none

visible-md (only) = d-none d-md-block d-lg-none

visible-lg (only) = d-none d-lg-block d-xl-none

visible-xl (only) = d-none d-xl-block

Источник https://ru.stackoverflow.com/questions/710421/Не-работает-hidden-в-bootstrap-4

Bootstrap 4 — Управление отображением элементов

В этой статье познакомимся с классами фреймворка Bootstrap 4, которые предназначены для адаптивного управления CSS свойством display HTML элементов.

Display-классы Bootstrap

В Bootstrap 4 имеется категория классов, с помощью которых можно не только адаптивно скрывать элементы, но и управлять тем как они должны быть показаны на странице.

Список display-классов Bootstrap 4:

d-none

d-inline

d-inline-block

d-block

d-table

d-table-cell

d-flex

d-inline-flex

Первый класс (d-none) предназначен для скрытия элемента на странице. Осуществляет это он посредством установки HTML элементу CSS свойства display со значение none.

Остальные классы управляют тем, как элемент должен быть представлен на странице. Класс d-inline представляет элемент строчным (display: inline), d-block – блочным (display: block), d-inline-block — строчно-блочным (display: inline-block), d-table – таблицой (display: table), d-table-cell – ячейкой таблицы (display: table-cell), d-flex – блочным flex-контейнером (display: flex), d-inline-flex — строчным flex-контейнером (display: inline-flex).

Кроме этого фреймворк Bootstrap 4 позволяет управлять CSS свойством display HTML элементов адаптивно. Это означает, что HTML элемент при одной ширине viewport может отображаться одним образом, а при другой – по-другому.

Синтаксис display-класса Bootstrap 4:


d{-breakpoint}-?

В данном классе нужно вместо:

breakpoint указать название контрольной точки (sm, md, lg, xl), начиная с которой будет применяться указанное CSS свойство display к HTML элементу (без обозначения — начиная с самых крохотных устройств).

? задать одно из значений: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Список всех display-классов Bootstrap 4:

d-none

d-inline

d-inline-block

d-block

d-table

d-table-cell

d-flex

d-inline-flex

d-sm-none

d-sm-inline

d-sm-inline-block

d-sm-block

d-sm-table

d-sm-table-cell

d-sm-flex

d-sm-inline-flex

d-md-none

d-md-inline

d-md-inline-block

d-md-block

d-md-table

d-md-table-cell

d-md-flex

d-md-inline-flex

d-lg-none

d-lg-inline

d-lg-inline-block

d-lg-block

d-lg-table

d-lg-table-cell

d-lg-flex

d-lg-inline-flex

d-xl-none

d-xl-inline

d-xl-inline-block

d-xl-block

d-xl-table

d-xl-table-cell

d-xl-flex

d-xl-inline-flex

Примеры работы с display-классами

1. Создадим адаптивную разметку, состоящую из 3 секций (L, M и R). Секция L должна отображаться только на контрольной точке xl, а на остальных – скрыта.

Bootstrap 4 — Пример адаптивной разметки блока


<div>
    <div>
        <div>L</div>
        <div>M</div>
        <div>R</div>        
    </div>
</div>

2. Например, скроем некоторый HTML элемент на xs (крохотных устройствах), md и lg. На остальных контрольных точках (sm и xl) данный элемент будем отображать как блочный (display: block).


<div>
    ...
</div>

3. Например, рассмотрим, как можно осуществить скрытия элемента только на устройствах md.


<div>
    ...
</div>

Классы, управляющие видимостью элементов при печати

Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно управлять видимостью элементов при печати.

Первые три класса из этого набора (d-print-block, d-print-inline, d-print-inline-block) предназначены для скрытия элемента в браузере и отображения его только при печати (как block, inline, inline-block).

Четвёртый класс d-print-none выполняет обратное действие, он оставляет элемент видимым в браузере и скрывает его при печати.

Класс	в браузере	при печати
d-print-block	скрыт	виден (как display: block)
d-print-inline	скрыт	виден (как display: inline)
d-print-inline-block	скрыт	виден (как display: inline-block)
d-print-none	виден	скрыт

Пример, в котором показано как можно с помощью вышепиведённых классов управлять видимостью элементов при печати:


<!-- элемент виден в браузере, но будет скрыт при печати -->
<nav>...</nav>

<!-- элемент будет отображаться при печати как блочный (в браузере данный элемент скрыт) -->
<div>...</div>

<!-- элемент будет отображаться при печати как строчный (в браузере данный элемент скрыт) -->
<div>...</div>

<!-- элемент будет отображаться при печати как строчно-блочный (в браузере данный элемент скрыт) -->
<div>...</div>

css — Bootstrap 4: скрытые видимые столбцы?

Добавляем этот ответ, потому что комментарии в принятом ответе становятся слишком длинными и неполными. Как уже объяснялось, классы hidden- * больше не существуют в бета-версии Bootstrap 4.

«Что такое hidden-sm-DOWN?»

Он больше не существует в бета-версии, но в предыдущих версиях он означал «скрытый на малом и внизу». Значит, скрыто на xs и sm , но в остальном видно.

Если вы хотите скрыть элемент на определенных уровнях (точках останова) в Bootstrap 4, используйте классы отображения d- * соответственно. Помните, что xs — это точка останова по умолчанию (всегда подразумеваемая), если она не отменена более крупной точкой останова . Поскольку подразумевается xs , вы больше не используете инфикс -xs- . Например, это не d-xs-none , это просто d-none .

hidden-xs-down = d-none d-sm-block
скрытый sm-вниз = d-none d-md-block
скрытый-md-down = d-none d-lg-block
скрытый lg-вниз = d-none d-xl-block
hidden-xl-down = d-none (то же, что hidden )
hidden-xs-up = d-none (то же, что hidden )
скрытый sm-up = d-sm-none
скрытый-md-up = d-md-none
скрытый lg-up = d-lg-none
скрытый-xl-up = d-xl-none
hidden-xs (только) = d-none d-sm-block (аналогично hidden-xs-down )
hidden-sm (только) = d-block d-sm-none d-md-block
hidden-md (только) = d-block d-md-none d-lg-block
hidden-lg (только) = d-block d-lg-none d-xl-block
hidden-xl (только) = d-block d-xl-none
visible-xs (только) = d-block d-sm-none
visible-sm (только) = d-none d-sm-block d-md-none
visible-md (только) = d-none d-md-block d-lg-none
visible-lg (только) = d-none d-lg-block d-xl-none
visible-xl (только) = d-none d-xl-block

Демонстрация всех скрытых / видимых классов в Bootstrap 4 beta

Также обратите внимание, что d - * - block можно заменить на d - * - inline , d - * - flex и т. Д.. в зависимости от типа отображения элемента. Подробнее о классах отображения в бета-версии

См. Также:
Класс Bootstrap 4 hidden-X- (вниз / вверх) не работает
Отсутствует видимый — ** и скрытый — ** в Bootstrap v4

Отсутствует видимое — и скрытое — в Bootstrap v4 · GitHub

Отсутствует видимое — ** и скрыто — ** в Bootstrap v4 · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Отсутствует видимый — ** и скрытый — ** в Bootstrap v4

	// Восстанавливаем «скрытые» служебные классы Bootstrap 4 alpha.
	@each $ bp в ключах карты ($ grid-breakpoints) {
	.hidden — # {$ bp} -up {
	@include media-breakpoint-up ($ bp) {
	дисплей: нет! Важно;
	}
	}
	.скрыто — # {$ bp} -down {
	@include media-breakpoint-down ($ bp) {
	дисплей: нет! Важно;
	}
	}
	.hidden — # {$ bp} -only {
	@include media-breakpoint-only ($ bp) {
	дисплей: нет! Важно;
	}
	}
	}

Классы hidden- * и visible- * больше не существуют в Bootstrap 4 Beta.Если вы хотите скрыть элемент на определенных уровнях
или точки останова в Bootstrap 4, используйте классы отображения d- * соответственно. Помните, что xs — это точка останова по умолчанию (подразумеваемая),
если не переопределено большей точкой останова.

Старый класс	Новый класс
`скрытый-xs-down`	`d-none d-sm-блок`
`скрытые узлы`	`d-none d-md-block`
`скрытый-md-down`	`d-none d-lg-блок`
`скрытый LG-вниз`	`d-none d-xl-блок`
`скрытый-XL-вниз`	`d-none` (то же, что `скрыто` )
`скрытый-xs-up`	`d-none` (то же, что `скрыто` )
`скрытый sm-up`	`d-sm-нет`
`скрытый-md-up`	`d-md-none`
`скрытый lg-up`	`d-lg-none`
`скрытый xl-up`	`d-xl-none`
`hidden-xs` (только)	`d-none d-sm-block` (то же, что и `hidden-xs-down` )
`hidden-sm` (только)	`d-блок d-sm-none d-md-block`
`hidden-md` (только)	`d-блок d-md-none d-lg-block`
`hidden-lg` (только)	`d-блок d-lg-none d-xl-block`
`hidden-xl` (только)	`d-блок d-xl-none`
`visible-xs` (только)	`d-блок d-sm-none`
`visible-sm` (только)	`d-none d-sm-block d-md-none`
`visible-md` (только)	`d-none d-md-block d-lg-none`
`visible-lg` (только)	`d-none d-lg-block d-xl-none`
`visible-xl` (только)	`d-none d-xl-блок`

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

Bootstrap 4 Скрыть элемент в зависимости от размера экрана

Вам необходимо использовать свойство отображения, в основном d - * - none (скрыть) и d - * - block или d - * - inline-block (показать).

Если вы хотите, чтобы элемент был скрыт на размере см и ниже, но был виден на md , lg и xl , используйте d-none d-md-block .

xs (<576 пикселей)	см (≥576 пикселей)	мкр (≥768 пикселей)	пикселей (≥992 пикселей)	xl (≥1200 пикселей)
`d-none d-sm-block`	скрыть	показать	показать	показать	показать
`d-none d-md-block`	скрыть	скрыть	показать	показать	показать
`d-none d-lg-блок`	скрыть	скрыть	скрыть	показать	показать
`d-none d-xl-block`	скрыть	скрыть	скрыть	скрыть	показать
`d-блок d-xl-none`	показать	показать	показать	показать	скрыть
`d-блок d-lg-none`	показать	показать	показать	скрыть	скрыть
`d-блок d-md-none`	показать	показать	скрыть	скрыть	скрыть
`d-блок d-sm-none`	показать	скрыть	скрыть	скрыть	скрыть

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

Если вы хотите отображать на sm только , но скрывать на других размерах, используйте d-none d-sm-block d-md-none .

xs (<576 пикселей)	см (≥576 пикселей)	мкр (≥768 пикселей)	пикселей (≥992 пикселей)	xl (≥1200 пикселей)
`d-блок d-sm-нет`	показать	скрыть	скрыть	скрыть	скрыть
`d-none d-sm-block d-md-none`	скрыть	показать	скрыть	скрыть	скрыть
`d-none d-md-block d-lg-none`	скрыть	скрыть	показать	скрыть	скрыть
`d-none d-lg-block d-xl-none`	скрыть	скрыть	скрыть	показать	скрыть
`d-none d-xl-block`	скрыть	скрыть	скрыть	скрыть	показать

Скрыть только при определенном размере окна просмотра

Если вы хотите скрыть на sm только , но отображать на других размерах, используйте d-block d-sm-none d-md-block .

xs (<576 пикселей)	см (≥576 пикселей)	мкр (≥768 пикселей)	пикселей (≥992 пикселей)	xl (≥1200 пикселей)
`d-none d-sm-block`	скрыть	показать	показать	показать	показать
`d-блок d-sm-none d-md-block`	показать	скрыть	показать	показать	показать
`d-блок d-md-none d-lg-block`	показать	показать	скрыть	показать	показать
`d-блок d-lg-none d-xl-block`	показать	показать	показать	скрыть	показать
`d-блок d-xl-none`	показать	показать	показать	показать	скрыть

❤️ Эта статья полезна?

Купите мне кофе☕ или поддержите мою работу, чтобы это место 🖖 оставалось без рекламы.
Если вы не можете, отправьте 💖 на @d_luaz или помогите поделиться этой статьей.

Bootstrap 4 顯示 / 隱藏 HTML

Bootstrap 千呼萬喚來到了 v4 beta.的時候發現一個問題，前幾的都有的 видимое 和 скрытое 類別好像變得不容易用了…

Bootstrap 3 的時候，有 Responsive Utilities 讓我們控制響應式顯示，參考表來。

很方便對吧！

Bootstrap 4-alpha 的時候，改成 Display Property 來做控制，而 Bootstrap 4 Beta 依照這樣的方式繼續走下去。

做也不會說不好，保留了去使用，只是對我 CSS 手來說有一點不直覺，所以整理的表格，方便我使用。

Дисплей 通用類別

Дисплей 類別，可用於切換元件的顯示與否，並且可以包含響應式設定的變化如下：

Класс CSS	說明
нет	不顯示也不佔空間
d-рядный	行內並排容器，大小以內容物判定
d-рядный блок	行內塊狀容器，大小以內容物判定，可設定寬高、上下外等屬性
d-блок	塊狀容器，大小以空間判定，可設定寬高、上下外距等屬性
d-стол	表格容器
d-таблица-ячейка	表格元素容器
d-flex	塊級伸縮容器
d-inline-flex	行內級伸縮容器

響應式的類型做變化

Display 類別，再搭配響應式的設定，就可以做出響應式顯示 / HTML 的功能。

BS 3	BS 4	備註
скрытый xs-вниз	d-none d-sm-блок
скрытый-sm-вниз	d-none d-md-block
скрытый-md-вниз	d-none d-lg-блок
скрытый LG-вниз	d-none d-xl-block
скрытый-XL-вниз	нет	(то же, что и скрытый)
скрытый-xs-up	нет	(то же, что и скрытый)
скрытый-sm-up	d-sm-none
скрытый-md-up	d-md-none
скрытый LG-вверх	d-lg-none
скрытый xl-up	d-xl-none
скрытый xs	d-none d-sm-блок	(только)
скрытый sm	d-блок d-sm-none d-md-block	(только)
скрытый мкр	d-блок d-md-none d-lg-block	(только)
скрытый LG	d-блок d-lg-none d-xl-block	(только)
скрытый XL	d-блок d-xl-none	(только)
visible-xs	d-блок d-sm-none	(только)
видимый-см	d-none d-sm-block d-md-none	(только)
видимый-MD	d-none d-md-block d-lg-none	(только)
видимый-LG	d-none d-lg-block d-xl-none	(только)
видимый-XL	d-none d-xl-block	(только)

整理完後，仿造原本的表格樣式做一個對照表。

參考資料：

Невидимое и видимое содержимое — Руководство по дизайну — Руководство по стилю

Невидимый и видимый контент —

Руководство по дизайну —

Гид по стилю —

Набор инструментов Web Experience (WET)

Выбор языка

Французский
Английский (текущий)

Поиск и меню

Вы здесь:

В незавершенном производстве

Работа над этой страницей продолжается.

Пожалуйста, сообщите о проблеме или отправьте запрос на перенос, если информация или кодировка отсутствует, неверна или не синхронизирована с основным репозиторием (wet-boew / wet-boew).

Назначение

Используйте, чтобы показать или скрыть контент — все зависит от того, что вам нужно сделать. Существуют стили, относящиеся к вспомогательным технологиям (помощь пользователям программ чтения с экрана), адаптивному дизайну (просмотр от маленьких до больших устройств), общему использованию (использование переключаемых вкладок) и печати (печать только необходимой информации).

Конструкция и маркировка

Основное использование

Адаптивное отображение и скрытие

Используйте для дополнения представления контента на каждом устройстве. Для более быстрой разработки, удобной для мобильных устройств, используйте эти служебные классы, чтобы отображать и скрывать контент по устройствам с помощью медиа-запросов. Также существуют служебные классы для переключения содержимого при печати.

Попробуйте использовать их на ограниченной основе и избегайте создания совершенно разных версий одного и того же сайта.

Ограничения

Адаптивные утилиты в настоящее время доступны только для переключения блоков и таблиц.Их использование со встроенными элементами и элементами таблицы в настоящее время не поддерживается.

Доступные классы

Используйте один или комбинацию доступных классов CSS для переключения содержимого между точками останова области просмотра (область отображения экрана) (точка, которую пользователь должен прокрутить).

Отображение и скрытие содержимого в разных окнах просмотра с помощью стилей CSS
	Очень маленькие устройства Телефоны (<768 пикселей)	Маленькие устройства Планшеты (≥768 пикселей)	Средние устройства Настольные компьютеры (≥992px)	Большие устройства Настольные компьютеры (≥1200 пикселей)
`.visible-xs`	видимый	Скрытый	Скрытый	Скрытый
`.visible-sm`	Скрытый	видимый	Скрытый	Скрытый
`.visible-md`	Скрытый	Скрытый	видимый	Скрытый
`.видимый-LG`	Скрытый	Скрытый	Скрытый	видимый
`.hidden-xs`	Скрытый	видимый	видимый	видимый
`.hidden-sm`	видимый	Скрытый	видимый	видимый
`.скрытый-мкр`	видимый	видимый	Скрытый	видимый
`.hidden-LG`	видимый	видимый	видимый	Скрытый

Внешний вид

Измените размер браузера или загрузите его на разных устройствах, чтобы протестировать отзывчивые служебные классы.

Виден на …

Зеленые галочки и текст «Visible on» указывают на то, что элемент виден в текущем окне просмотра.

Очень маленький
hidden-xs ✔ Виден на x-small
visible-xs

Small
hidden-sm ✔ Видимый на маленьком
visible-sm

Средний
hidden-md ✔ Видимый на среднем
visible-md

Large
hidden-lg ✔ Видно на большом
visible-lg

Очень маленький и маленький
hidden-xs hidden-sm ✔ Виден на x-small и small
visible-xs visible-sm

Средний и большой
hidden-md hidden-lg ✔ Видимый на среднем и большом
visible-md visible-lg

Очень маленький и средний
hidden-xs hidden-md ✔ Виден на x-small и medium
visible-xs visible-md

Маленький и большой
hidden-sm hidden-lg ✔ Видимый на маленьком и большом
visible-sm visible-lg

Очень маленький и большой
hidden-xs hidden-lg ✔ Видно на x-small и large
visible-xs visible-lg

Малый и средний
hidden-sm hidden-md ✔ Видимый на малом и среднем
visible-sm visible-md

Внешний вид

Скрыто на …

Зеленые галочки и текст «Скрыт» указывают на то, что элемент скрыт в текущем окне просмотра.

Очень маленький
hidden-xs ✔ Скрытый на x-small
visible-xs

Small
hidden-sm ✔ Скрытый на small
visible-sm

Средний
hidden-md ✔ Скрытый на среднем
visible-md

Большой
hidden-lg ✔ Скрытый на большом
visible-lg

Очень маленький и маленький
hidden-xs hidden-sm ✔ Скрытый на x-small и small
visible-xs visible-sm

Средний и большой
hidden-md hidden-lg ✔ Скрытый на среднем и большом
visible-md visible-lg

Очень маленький и средний
hidden-xs hidden-md ✔ Скрытый на x-small и medium
visible-xs visible-md

Маленькие и большие
hidden-sm hidden-lg ✔ Скрытые на малых и больших
visible-sm visible-lg

Очень маленький и большой
hidden-xs hidden-lg ✔ Скрытый на x-small и large
visible-xs visible-lg

Малый и средний
hidden-sm hidden-md ✔ Скрытый на малом и среднем
visible-sm visible-md

Программа чтения с экрана невидимое содержимое

Используется для вырезания содержимого в квадрат размером в один пиксель.Это создает ссылки, которые являются описательными (и совместимыми), но не загромождают страницу визуально. Этот метод обычно используется для нацеливания на пользователей вспомогательных технологий. Например, пользователи программ чтения с экрана слышат информацию, но визуальный пользователь ее не слышит и не видит. Атрибут CSS display: none; не дает такого же эффекта, поскольку программы чтения с экрана полностью игнорируют его.

Правильное использование

Точки соответствия:

Используйте .wb-inv , чтобы скрыть контент от визуальных пользователей и создать описательные ссылки для пользователей вспомогательных технологий
Убедитесь, что невидимый текст краткий, информативный и уникальный

Неправильное использование

Точка (и) соответствия:

Не используйте этот компонент таким образом, который противоречит предыдущим пунктам соответствия

Код

   1   : страница 1 результатов поиска

Общее показать и скрыть

Используйте для принудительного отображения или скрытия элемента с использованием .показать или . скрытые классы . Эти классы используют ! Important .

Используйте .invisible для переключения только видимости элемента; дисплей не изменяется, и элемент по-прежнему влияет на поток документа.

Правильное использование

Точки соответствия:

Используйте с настраиваемым JavaScript для изменения видимости содержимого на странице. Эти два класса доступны для сценариев решений

Неправильное использование

Точка (и) соответствия:

Не используйте этот компонент таким образом, который противоречит предыдущим пунктам соответствия

Код

   class = "show" >... 
 class = "hidden" > ...

  // Классы
  .show  {
  отображение: блок! важно;
}
  .hidden  {
  дисплей: нет! важно;
  видимость: скрыто! важно;
}
  .invisible  {
  видимость: скрыта;
}

Распечатать показать и скрыть

Используйте эти классы для переключения содержимого на печать.

Правильное использование

Точки соответствия:

Используйте классы .visible-print или .hidden-print для включения или исключения содержимого при печати страницы пользователем
Предотвращение печати ненужного содержимого, например меню и декоративной графики

Неправильное использование

Точка (и) соответствия:

Не используйте этот компонент таким образом, который противоречит предыдущим пунктам соответствия

Показать и скрыть содержимое для печати с помощью стилей CSS
Класс	Браузер	Печать
`.видимая печать`	Скрытый	видимый
`. Скрытая печать`	видимый	Скрытый

Часть кода и документации для этой страницы взята из Bootstrap (внешняя ссылка)

Дата изменения:: 2019-04-11

Об этом сайте

Свяжитесь с нами

Около

Новости

Оставайтесь на связи

css — Bootstrap 4: скрытые видимые столбцы?

知道为什么以下内容不起作用 -xs 隐藏在 xs View 中。我觉得这 Bootstrap v4 中引入的更改有关，但是知道与在 CSS 中相比中如何仍然可以实现一点？我正在使用默认的 bootstrap.css 文件。

  
    
    
    Какой-то текст здесь.

此的是因为的答案中的注释过长且不完整。如前所述， Bootstrap 4 Beta 中不再存在 hidden- * 类。

«hidden-sm-DOWN 到底是什么？»

不再存在于 beta.要在 Bootstrap 4 中的特定层 (断点) 上隐藏元素，请相应地使用 d- * 显示类。记住 xs 默认的 (总是隐含的) 断点，除非被更大的断点覆盖。由于隐含了 xs ，因此您不再使用 -xs- 前缀。例如，它不是 d-xs-none ，而只是 d-none 。

https: // www.codeply.com/go/bRlHp8MxtJ

hidden-xs-down = d-none d-sm-block

hidden-sm-down = d-none d-md-block

hidden-md-down = d-none d-lg-block

hidden-lg-down = d-none d-xl-block

hidden-xl-down = d -нет (与 скрыто 相同)

hidden-xs-up = d-none (与 скрыто 相同)

hidden-sm-up = d-sm-none

hidden-md-up = d-md-none

hidden-lg-up = d-lg-none

hidden-xl-up = d-xl-none

hidden-xs (仅) = d-none d-sm-block (与 hidden-xs-down 相同)

hidden-sm (仅) = d-block d-sm -нет d-md-block

900 35 hidden-md (仅) = d-block d-md-none d-lg-block

hidden-lg (仅) = d-block d-lg-none d-xl-block

hidden-xl (仅) = d-block d-xl-none

visible-xs (仅) = d-block d-sm-none

visible-sm (仅) = d-none d-sm-block d-md-none

visible-md (仅) = d-none d-md-block d-lg-none

visible- lg (仅) = d-none d-lg-block d-xl-none

visible-xl (仅) = d-none d-xl-block

Демонстрация всего скрытого / видимого классы в Bootstrap 4 beta

注意，取决于元素的显示类型，可以用 d - * - block ， d - * - inline 等替换 d - * - flex 。 отображать классы в бета-версии.更多信息

另请参阅:
Bootstrap 4 hidden-X- (down / up) класс не работает
Отсутствует видимый — ** и скрытый — ** в Bootstrap v4

Как использовать bootstrap4 отображать и скрывать элементы

Чтобы быстрее разрабатывать мобильные устройства, используйте класс отображения ответа, чтобы нажать на устройство, чтобы отобразить и скрыть элемент.Избегайте создания совершенно разных версий одного и того же сайта, но скройте элементы для каждого размера экрана. Чтобы скрыть элементы, просто используйте

.d-нет

класс или один

.d- {sm, md, lg, xl} -нет

Класс выполняет любые изменения экрана ответа. Чтобы отобразить элемент только в пространстве заданного размера экрана, вы можете поместить один

.d — * — нет

Класс с одним

.d — * — *

Класс совмещен, например,

.d-нет.d-md-block .d-xl-none

За исключением элементов, средние и большие устройства, которые скрывают все размеры экрана.

Показать / скрыть для точки останова и вниз:

hidden-xs-down (hidden-xs) = d-none d-sm-blockhidden-sm-down (hidden-sm hidden-xs) = d-none d-md-blockhidden-md-down (скрытый-md скрытый -sm hidden-xs) = d-none d-lg-blockhidden-lg-down = d-none d-xl-blockhidden-xl-down (n / a 3.x) = d-none (то же, что и скрытый) Показать / скрыть для точки останова и выше:

hidden-xs-up = d-none (то же, что и hidden) hidden-sm-up = d-sm-nonehidden-md-up = d-md-nonehidden-lg-up = d-lg-nonehidden-xl-up (нет данных 3.x) = d-xl-none Показать / скрыть только для одной точки останова:

Hidden-XS (ТОЛЬКО) = D-NONE D-SM-Block (То же, что Hidden-Xs-Down) Hidden-SM (ТОЛЬКО) = D-Block D-SM-NONE D-MD-blockHidden-MD (ТОЛЬКО) = D-блок D-MD-NONE D-LG-blockHidden-LG (ТОЛЬКО) = D-блок D-LG-NONE D-XL-blockHidden-XL (N / A 3.x) = D-Block D-XL — Nonevisible-XS (ONLY) = D-блок D-SM-NONEVISIBLE-SM (ONLY) = D-NONE D-SM-block D-MD-NONEVISIBLE-MD (ONLY) = D-NONE D-MD-Block D — LG-NONEVISIBLE-LG (ТОЛЬКО) = D-NONE D-LG-block D-XL-NONEVISIBLE-XL (N / A 3.