Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Bootstrap 4 hidden xs: File not found · Bootstrap v5.1

Содержание

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…



2

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

Поделиться


Sheedo    

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



1

Поддержка для него была прекращена в 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



1

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

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

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

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

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

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

Поделиться


Johannes    

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


Похожие вопросы:

Отсутствуют visible-** и hidden-** в Bootstrap v4

В Bootstrap v3 я часто использую классы hidden-** в сочетании с clearfix для управления многоколоночными макетами при различной ширине экрана. Например, Я мог бы объединить несколько hidden-** в…

Bootstrap 3.0 hidden-xs не работает

У меня есть страница bootstrap 3.0, которая сейчас разделена на 9 коллов слева и 3 колла справа. Что я хочу, так это скрыть 3 правильных колла, когда размер экрана меньше 768. Это моя структура…

Bootstrap’. hidden-xs` не скрывает div

Я пытаюсь создать сайт, который будет скрывать расширенный раздел для пользователей на маленьком экране, используя Bootstrap .hidden-xs , чтобы проверить его, я использую мобильный эмулятор Chrome,…

hidden-xs скрывает div при печати в Bootstrap

в проекте MVC мы используем bootstrap. Есть необходимость скрыть div для устройств xs и показать во время печати и рабочего стола. Код приведен ниже как: <div class=hidden-xs> —Content—…

Bootstrap hidden-md не работает

Я хочу, чтобы скрыть столбец, который col-md-0 на моем экране на размер МД. Но он показывает мой экран . Как я могу это скрыть? <link rel=stylesheet…

bootstrap hidden-xs не работает

Я только что узнал о hidden-xs, hidden-sm и т. д., поэтому пробую его в первый раз.. Почему это не скрывает div обзора на любом размере экрана? <div class=row hidden-sm> <div…

Bootstrap 4 «hidden» класс не работает

Я использую Bootstrap v4 с его стандартными CSS и JS. Я пытаюсь применить классы hidden , hidden-XX-down и hidden-XX-up к различным дивам, кнопкам и т. д. Но это, кажется, ни на что не влияет. Все…

Bootstrap 4: hidden-md-up не работает

Я пытаюсь скрыть эти строки меню с помощью класса hidden-md-up, но это не работает. Я использую CDN, но я также пробовал файлы и проверил class…can кто-нибудь поможет? Вот что у меня есть <div…

bootstrap 4 отзывчивые утилиты visible / hidden xs sm lg не работают

Возникли проблемы с новыми адаптивными утилитами скрытых / видимых классов при переходе на Bootstrap 4 . Я знаю, что .hidden — классы были удалены из v3 и заменены на .hidden-*-up .hidden-*-down ….

Bootstrap 4 hidden-X-(down/up) класс не работает

Я использую Bootstrap v4.0 beta и проверил этот документ миграции https:/ / v4-alpha.getbootstrap.com / миграция / #отзывчивые утилиты но нет никакого способа заставить hidden-X-up или hidden-X-down…

Не работают классы 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

© 2006-2021

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

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

Похожие статьи

Автор: Виталий Орлов
| Рейтинг: 4/5 |
Теги: bootstrap , hidden , visible


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 (внешняя ссылка)

Дата изменения:

Об этом сайте

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

Около

Новости

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

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.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *