Bootstrap visible xs: Display property · Bootstrap

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

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

Show/hide for breakpoint and up:

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

Show/hide only for a single breakpoint:

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

Адаптивные утилиты · Bootstrap на русском

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

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

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

• .hidden-*-up классы скрыть элемент, когда область просмотра на данном останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и сверхбольших экранах.
• .hidden-*-down классы скрыть элемент, когда область просмотра на данном останова или меньше. Например, .hidden-md-down скрывает элемент на очень малых, малых и средних видовых экранов.
• Нет явного “видимый”/”Показать” aдаптивный служебные классы; сделать элемент видимым, просто не скрывая его при этом размер точки останова.
• Можно комбинировать один .hidden-*-up класс с .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших экранах. Через несколько .hidden-*-up классы или нескольких .hidden-*-down занятия является излишним и бессмысленным.
• Эти классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров останова просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.

Классы печати

Как и обычные адаптивные классы, используйте их для переключения содержания для печати.

Тестовые сценарии

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

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

✔ Отображается на дополнительной небольшой
Очень маленькие

✔ Видно на маленьких или узких
Маленький или узкий

✔ Отображается на средний или узкий
Средний или узкий

✔ Видимый на большие или узкие
Большие или узкие

✔ Видно на маленьких или шире
Небольшой или шире

✔ Отображается на средних или широких
Средний или шире

✔ Видимый на большие или шире
Большие или широкие

✔ Видны на очень большой
Очень большая

✔ Ваши просмотра именно сверхмалые
Вашего просмотра точно не очень маленькая

✔ Ваши просмотра именно небольшой
Вашего просмотра точно не маленький

✔ Ваши просмотра именно средний
Вашего просмотра точно не средний

✔ Ваши просмотра именно большие
Вашего просмотра точно не большие

✔ Ваши просмотра точно очень большая
Вашего просмотра точно не очень большой

Bootstrap 3.1 visible-xs и visible-sm не работают вместе

У меня есть div, который я хочу показать на устройствах sm и xs, он выглядит так:

<div>
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

Мой bootstrap загружается с cdn без какой-либо настройки.

Это должно показать этот div на xs и sm, как указано в классах, но в результате класс sm display:none !important переопределяет xs display:block !important , когда вы переходите к размеру xs в браузере.

Я попытался выяснить это в документации bootstrap, но у них есть только таблица, которая не объясняет, как использовать несколько параметров видимости в одном div.

twitter-bootstrap

Поделиться

Источник

Jaypee    

10 февраля 2014 в 00:24

4 ответа

• Использование Bootstrap: как добавить класс, когда объект виден-xs visible-sm?

  Я пытался найти решение этой проблемы. Я не смог найти никаких ответов в интернете. И, к сожалению, мои навыки javascript не слишком хороши. Я понимаю основную концепцию того, как это сделать, единственная проблема, которая у меня есть, — это как вызвать этот вход и только тогда, когда он…

• twitter bootstrap class visible-* не работает на мобильных телефонах и планшетах

  Я пытаюсь использовать visible-xs , visible-sm , visible-md на таком div: <div class=badge class=visible-xs visible-sm>text</div> Но это, кажется, не работает на мобильном телефоне или планшете, на рабочем столе, однако это работает, когда я манипулирую окном, на мобильных телефонах…

91

Если вы хотите показать его в нескольких размерах, не используйте visible-* , а вместо этого скройте другие размеры, которые вам не нужны, с помощью hidden-* .
В этом случае: hidden-md hidden-lg

Поделиться

Juri Robl    

10 февраля 2014 в 00:54

3

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

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

Или, если вы хотите повторно использовать это, определите пользовательский класс, такой как:

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

и повторно используйте его вместо того, чтобы давать вашему div два класса видимости одновременно.

Поделиться

Zafar    

10 февраля 2014 в 00:36

3

Вы должны добавить одно значение из:

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

В этом случае у вас будет что-то вроде этого:

<div>

Продолжайте в том же духе 🙂

Поделиться

user1789975    

23 июня 2015 в 13:43

• SEO влияние Bootstraps visible-lg/md/sm/xs-классы

  Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На большинстве страниц основной контент находится слева, а затем есть несколько ссылок в правой части…

• Bootstrap видимые и скрытые классы не работают должным образом

  Я попытался использовать классы Bootstrap visible и hidden для создания контента, видимого только на mobile/desktop. я заметил, что классы не работают должным образом (и я заметил, что у многих людей была эта проблема, и решил ее таким образом), поэтому я создал мобильную таблицу стилей, чтобы…

2

Bootstraps работает с классами, которые идут от указанного класса ширины и выше. Например , если вы поставите col-sm-4, это просто заставит его быть шириной в 4 столбца для ширины sm и шире.

В вашем случае простого class="col-xs-4 hidden-md hidden-lg" должно быть достаточно, чтобы получить желаемое решение.

Причина, по которой ваше первое решение не сработало, заключается в том, что вы указали visible-xs перед visible-sm . Который навязывает ему класс sm, делая его невидимым на ширине xs. Как это указано в начальной загрузке css.

Edit: Для тех, кто использует Bootstrap 4, это может быть достигнуто только с class="col-4 d-md-none"

Поделиться

Thomas Scheffer    

23 апреля 2018 в 08:53

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

visible-xs-block и visible-sm-block bootstrap 3.3.4 не работают

Используя BS 3.3.4, я пробовал hidden-xs-block и hidden-sm-block на дивах, которые все еще отображаются на iphone 3, iphone 4. Единственный способ, которым я мог заставить его работать, — это новый…

как повернуть img в visible-xs и visible-sm bootstrap

Я сделал класс row2 для img , который я хочу вращать. Есть три элемента img , которые я хочу повернуть, когда видимость составляет xs и sm . Теперь мой вопрос заключается в том, как я могу вращать…

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

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

Использование Bootstrap: как добавить класс, когда объект виден-xs visible-sm?

Я пытался найти решение этой проблемы. Я не смог найти никаких ответов в интернете. И, к сожалению, мои навыки javascript не слишком хороши. Я понимаю основную концепцию того, как это сделать,…

twitter bootstrap class visible-* не работает на мобильных телефонах и планшетах

Я пытаюсь использовать visible-xs , visible-sm , visible-md на таком div: <div class=badge class=visible-xs visible-sm>text</div> Но это, кажется, не работает на мобильном телефоне или…

SEO влияние Bootstraps visible-lg/md/sm/xs-классы

Мне было интересно, знает ли кто-нибудь о влиянии SEO использования bootstraps visible классов для создания адаптивного веб-сайта? Я создал новый веб-сайт с Bootstrap, используя эти классы. На…

Bootstrap видимые и скрытые классы не работают должным образом

Я попытался использовать классы Bootstrap visible и hidden для создания контента, видимого только на mobile/desktop. я заметил, что классы не работают должным образом (и я заметил, что у многих…

о том, как определить новый visible-sm-table-cell в Bootstrap 3

Bootstrap 3 поставляется с: visible-sm-block visible-sm-inline visible-sm-inline-block Мне нравится определять visible-sm-table-cell , как это в моем файле css: @media (min-width: 768px) and…

Не удается найти исходный код “visible-xs-block” в файле Bootstrap.css

Я учусь Бутстрапу. В моем проекте visible-xs-block — это имя класса. Но я не могу найти исходный код “visible-xs-block” в файле Bootstrap.css <div class=row> <div class=col-xs-6…

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

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

Отображение элементов. Утилиты · Bootstrap. Версия v4.0.0

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

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т.к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

• .d-{value} для xs
• .d-{breakpoint}-{value} для sm, md, lg и xl.

Где значение – это одно из:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.

Примеры

<div>d-inline</div>
<div>d-inline</div>

d-block
d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

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

Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display, как в наших отзывчивых классах .d-*.

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

Bootstrap 3 нет обратной совместимости с версии v2.x. Используйте данное описание как основной путеводитель миграции с v2.x к v3.0. Для более детального ознакомления просмотрите объявления релиза что нового в v3.0.

Основные изменения классов

В этой таблице показаны различия стилей между v2.x и v3.0.

Что нового

Мы добавили новые элементы и изменили существующие. Здесь продемонстрированы новые или обновленные стили.

Что удалено

Следующие элементы были удалены или изменены в v3.0.

Дополнительные примечания

Другие изменения в v3.0 не столь очевидны. Базовые классы, основные стили поведения были скорректированы для гибкости и нашего подхода в первую очередь для мобильных устройств. Вот неполный список:

• По умолчанию текстовые элементы управления формы теперь получают минимальный стиль. Для управления цветом фокуса и закругленными углами применяйте класс .form-control.
• Текстовые элементы управления формы с классом .form-control теперь по умолчанию имеют ширину со значением 100%. Вкладывайте формы ввода в середину <div></div> для управления их шириной.
• .badge больше нет контекстных классов (-success,-primary,и т.д.).
• .btn должен также использовать .btn-default, чтобы создать кнопку по умолчанию.
• .row is now fluid.
• Изображения неадаптивны по умолчанию. Используйте .img-responsive, для тягучести <img>.
• Теперь иконки .glyphicon базируются на шрифтах. Иконкам также необходимые базовые и специальные классы (например, .glyphicon .glyphicon-asterisk).
• Typeahead было удалено, на пользу Twitter Typeahead.
• Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
• As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
• JavaScript события имеют пространства имен (namespaced). Например, чтобы обработать событие «show» в модалі, используйте 'show.bs.modal'. Для закладок «shown» используйте 'shown.bs.tab', и т.д.

Более подробную информацию о апгрейда до v3.0 смотрите на Bootply, где участники обсуждений преподают также и части кода.

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

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

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

Как это работает

Измените значение свойства display с помощью наших служебных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display .Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Показать служебные классы, которые применяются ко всем точкам останова, от xs до xl , не имеют в них аббревиатуры точки останова. Это потому, что эти классы применяются от min-width: 0; и выше и, следовательно, не связаны медиа-запросами. Однако остальные точки останова содержат аббревиатуру точки останова.

Таким образом, классы именуются в формате:

• .d- {value} для xs
• .d- {breakpoint} - {value} для sm , md , lg и xl .

Где значение является одним из:

• нет
• рядный
• рядный блок
• блок
• стол
• таблица-ячейка
• стол-ряд
• гибкий
• линейный гибкий

Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше .Например, .d-lg-none устанавливает display: none; на экранах LG и xl .

Примеры

  
 d-inline 
 d-inline 
  

d-блок
d-блок

   d-блок 
 d-block   

Скрывающиеся элементы

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

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d- {sm, md, lg, xl} -none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, вы можете объединить один класс .d - * - none с классом .d - * - * , например .d-none .d-md- block .d-xl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

скрыть на экранах шире, чем LG

скрыть на экранах меньше LG

  
 скрыть на экранах шире lg 
 скрыть на экранах меньше lg 
  

Показать в печати

Измените значение элементов display при печати с помощью наших служебных классов отображения печати.Включает поддержку тех же значений display , что и наши адаптивные утилиты .d- * .

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (Скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

  
 Только экран (Скрывать только при печати) 
 Только печать (Скрыть только на экране) 
 Скрыть до большого размера на экране, но всегда показывать при печати 
  

Показать свойство · Bootstrap v5.0

Как это работает

Измените значение свойства display с помощью наших служебных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display . Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Показать служебные классы, которые применяются ко всем точкам останова, от xs до xxl , не имеют аббревиатуры точки останова в них. Это потому, что эти классы применяются от min-width: 0; и выше и, следовательно, не связаны медиа-запросами.Однако остальные точки останова содержат аббревиатуру точки останова.

Таким образом, классы именуются в формате:

• .d- {value} для xs
• .d- {breakpoint} - {value} для sm , md , lg , xl и xxl .

Где значение является одним из:

• нет
• рядный
• рядный блок
• блок
• сетка
• стол
• таблица-ячейка
• стол-ряд
• гибкий
• линейный гибкий

Отображаемые значения можно изменить, изменив переменную $ Display и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше . Например, .d-lg-none устанавливает display: none; на экранах LG , xl и xxl .

Примеры

  
 d-inline 
 d-inline 
  

d-блок
d-блок

   d-блок 
 d-block   

Скрывающиеся элементы

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

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d- {sm, md, lg, xl, xxl} -none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, вы можете объединить один класс .d - * - none с классом .d - * - * , например .d-none .d-md- блок .d-xl-none.d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

скрыть на lg и более широких экранах

скрыть на экранах меньше LG

  
 скрыть на lg и более широких экранах 
 скрыть на экранах меньше lg 
  

Показать в печати

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

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-grid
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (Скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

  
 Только экран (Скрывать только при печати) 
 Только печать (Скрыть только на экране) 
 Скрыть до большого размера на экране, но всегда показывать при печати 
  

Sass

Утилиты API

Утилиты

Display объявлены в нашем API утилит в scss / _utilities.scss . Узнайте, как использовать API утилит.

  "дисплей": (
      отзывчивый: правда,
      печать: правда,
      свойство: дисплей,
      класс: d,
      значения: встроенный встроенный блок блок сетка таблица таблица-строка таблица-ячейка flex встроенный-гибкий нет
    ),
      

Справочник по вспомогательным классам CSS для начальной загрузки

Текст

Добавьте смысл с помощью цветов текста с помощью классов ниже. Ссылки будут темнеть при наведении курсора:

Фон

Добавьте смысл с помощью фоновых цветов с помощью классов ниже. Ссылки будут темнеть при наведении курсора, как и классы текста:

Прочие

Адаптивные утилиты

Эти классы используются для отображения и / или скрытия содержимого устройством с помощью медиа-запросов.

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

Скрытый

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

Пример

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст скрыт на ДОПОЛНИТЕЛЬНО МАЛОМ экране.

Этот текст скрыт на МАЛЕНЬКОМ экране.

Это текст, скрытый на СРЕДНЕМ экране.

Это текст, скрытый на БОЛЬШОМ экране. .

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Попробуй сам »

Начиная с версии 3.2.0, классы .visible - * - * для поставляются в трех вариантах, по одному для каждого дисплея CSS
Стоимость недвижимости:

Например, для небольших ( см ) экранов доступны классы .visible - * - * : .visible-sm-block , .visible-sm-inline и .visible-sm-inline-block .

Классы .visible-xs , .visible-sm , .visible-md и .visible-lg являются устаревшими , начиная с версии 3.2.0 .

Пример

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Попробуй сам »

bootstrap 4 отзывчивые утилиты видимые / скрытые xs sm lg не работают

Решение:

With Bootstrap 4 .hidden- * классы были полностью удалены (да, они были заменены на hidden - * - * , но эти классы также исчезли из альфа-версии v4).

Начиная с v4-beta, вы можете комбинировать классы .d - * - none и .d - * - block для достижения того же результата.

visible- * также был удален ; вместо использования явных классов .visible- * сделайте элемент видимым, не скрывая его (опять же, используйте комбинации .d-none.д-мд-блок). Вот рабочий пример:

  

    
        …
    


    

                …
    
    

                …
    

  

class = "hidden-xs" становится class = "d-none d-sm-block" (или d-none d-sm-inline-block ) …

   hidden-xs 

 скрытый-xs 
  

Пример адаптивных утилит Bootstrap 4 :

  
 скрытый-xs
  
 visible-md и вверх (скрытый-sm и вниз)
    
 visible-lg и вверх (скрытый-md и вниз)
      
 visible-xl 
    
  


 eXtra Small <576px 
 SMall ≥576px 
 МЕДИУМ ≥768px 
 БОЛЬШОЙ ≥992px 
 eXtra Large ≥1200px 

 hidden-xl (visible-lg и вниз)
  
 visible-md и вниз (скрытый-lg и вверх)
    
 visible-sm и вниз (или hidden-md и вверх)
      
 visible-xs 
    
  

  

• код.io / _yatko / pen / ZJXQxy

Документация

Размер экрана Класс

–

1. Скрыто на всех .d-none

2. Скрыт только на xs .d-none .d-sm-block

3. Скрыт только на sm .d-sm-none .d-md-block

4. Скрыт только на md .d-md-none .d-lg-block

5. Скрыто только на LG .d-lg-none .d-xl-block

6. Скрыто только на xl .d-xl-none

7. Виден на всех .d-блоке

8. Видно только на xs .d-block .d-sm-none

9. Виден только на sm .d-none .d-sm-block .d-md-none

10. Виден только на md .d-none .d-md-block .d-lg-none

11. Видно только на LG .beta) изменил классы для гибкого скрытия / отображения элементов. См. Эту ссылку, чтобы узнать, какие классы использовать: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

    Адаптивные утилиты — Bootstrap — Университет Хьюстона

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

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

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

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

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

    Начиная с версии v3.2.0 классы .visible - * - * для каждой точки останова представлены в трех вариантах, по одному для каждого значения свойства отображения CSS , указанного ниже.

    Группа классов	CSS дисплей
    .visible - * - блок	дисплей: блок;
    .visible - * - встроенный	дисплей: встроенный;
    .видимый - * - встроенный блок	дисплей: строчно-блочный;

    Итак, для очень маленьких ( xs ) экранов, например, доступны классы .visible - * - * : .visible-xs-block , .visible-xs-inline и .visible. -xs-встроенный-блок .

    Классы .visible-xs , .visible-sm , .visible-md и .visible-lg также существуют, но в версии 3.2.0 . Они приблизительно эквивалентны блоку .visible - * - , за исключением дополнительных особых случаев для переключения элементов, связанных с

    .

    Классы печати

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

    Классы	Браузер	Печать
    .visible-print-block .visible-print-inline .видимая печать встроенного блока	Скрытый	видимый
    . Скрытая печать	видимый	Скрытый

    Класс .visible-print также существует, но является устаревшим , начиная с версии 3.2.0. Это приблизительно эквивалентно .visible-print-block , за исключением дополнительных особых случаев для элементов, связанных с

    .

    Тестовые примеры

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

    Виден на …

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

    Extra small ✔ Виден на x-small

    Маленький ✔ Виден на маленьком

    Средний ✔ Виден на среднем

    Большой ✔ Виден на большом

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

    Среднее и большое ✔ Видно на средних и больших

    Очень маленькие и средние ✔ Видны на x-маленьких и средних

    Маленькие и большие ✔ Видны на маленьких и больших

    Очень маленькие и большие ✔ Видно на x-маленьких и больших

    Малые и средние ✔ Видны на малых и средних

    Скрыто на…

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

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

    Маленький ✔ Скрытый на маленьком

    Средний ✔ Скрыт на среднем

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

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

    Средний и большой ✔ Скрытый на средних и больших

    Очень маленькие и средние ✔ Скрытые на x-маленьких и средних

    Маленькие и большие ✔ Скрытые на малых и больших

    Очень маленькие и большие ✔ Скрытые на x-маленьких и больших

    Малые и средние ✔ Скрытые на малых и средних

    Как использовать видимые / скрытые классы Bootstrap — Удивительные шаблоны Joomla

    Как использовать видимые / скрытые классы Bootstrap — Удивительные шаблоны Joomla — Расширения Joomla

    • Документы

      /

    • Шаблоны

      /

    • Как использовать видимые / скрытые классы Bootstrap

    Используйте классы Bootstrap 3 с именем .visible- и .hidden- с префиксом favth- для скрытия / отображения различных модулей для настольных компьютеров, планшетов или мобильных устройств. Вот эти отзывчивые служебные классы:

    Снимок экрана взят из официальной документации Bootstrap 3, поэтому, пожалуйста, обратитесь к первоисточнику документации по адаптивным служебным классам.

    Не забудьте добавить префикс «favth-» перед любым из этих имен (например, favth-hidden-xs).

    Чтобы использовать видимые и скрытые классы, вставьте имя класса в поле Суффикс класса модуля в расширенных настройках модуля:

    Чтобы эти классы работали, вам нужно вставить пробел перед именем класса (нажав клавишу пробела на клавиатуре).

    © 2012-2021 гг.

    FavThemes

    .Все права защищены.

    The Joomla! имя используется в соответствии с ограниченной лицензией, предоставленной Open Source Matters, владельцем товарного знака в США и других странах.FavThemes не связан и не одобрен Open Source Matters или Joomla! Проект.

    Этот веб-сайт использует файлы cookie для улучшения работы в Интернете и обеспечения дополнительных функций.

    Классы отзывчивой видимости

    — Документация

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

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

    Начиная с версии 3.2.0, классы .visible - * - * для каждой точки останова представлены в трех вариантах, по одному для каждого CSS , отображающего значение свойства , перечисленное ниже.

    Группа классов	CSS дисплей
    . Видимый - * - блок	дисплей: блок;
    .visible - * - встроенный	дисплей: встроенный;
    .visible - * - встроенный блок	дисплей: строчно-блочный;

    Итак, для очень маленьких ( xs ) экранов, например, доступно .visible - * - * классы: .visible-xs-block , .visible-xs-inline и .visible-xs-inline-block .

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

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

    Комментарий *

    Имя *

    Email *

    Сайт