Скрыть кнопку html: Методы скрытия элементов веб-страниц / Хабр

2 года назад

156 просмотров

Отображение элементов.

• Как это устроено
• Обозначение
• Примеры
• Скрытие элементов
• Отображение при печати

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

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

Изменяйте значение свойства 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.

Примеры

d-inline

d-inline

<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 скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана	Класс
Скрыт на всех	.d-none
Скрыт только на xs	.d-none .d-sm-block
Скрыт только на sm	.d-sm-none .d-md-block
Скрыт только на md	.d-md-none .d-lg-block
Скрыт только на lg	.d-lg-none .d-xl-block
Скрыт только на xl	.d-xl-none
Виден на всех	.d-block
Виден только на xs	.d-block .d-sm-none
Виден только на sm	.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

Скрыто на экранах шире 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>

Please enable JavaScript to view the comments powered by Disqus.

Отображение и скрытие содержимого — Компоненты

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

Что такое раскрытие информации?

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

Некоторые примеры:

• Часто задаваемые вопросы, где каждый вопрос представляет собой кнопку, которая показывает или скрывает ответ.

• Гамбургер-меню в мобильном окне просмотра, часто визуализируемое тремя горизонтальными полосами:

• Выпадающее меню:

Как сделать доступное раскрытие информации

• Поместите расширяемый контент сразу после кнопки в исходном коде
• Скрыть содержимое с помощью display:none
• Информировать пользователей вспомогательных технологий о статусе кнопки развертывания/свертывания

Заказ исходного кода

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

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

Скрытие с помощью display:none

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

Доступные индикаторы состояния

Визуальные индикаторы, такие как стрелки, обычно используются для обозначения кнопки как расширяемой/сворачиваемой. Этот индикатор состояния подразумевает действие. Тот, у кого нет визуального обзора своего экрана, не знает, что эта кнопка будет расширяться/сворачиваться при использовании. Текущее состояние блока контента (видимое или скрытое) также неясно. Есть несколько способов решить эту проблему.

Изменить метку кнопки

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

 
Мультяшное меню



 

Когда меню отображается, измените метку кнопки на «скрыть меню».

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

С подробностями

Это довольно просто.

 <подробности>
Как это работает?
Это довольно просто.

 

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

С

ARIA также является опцией. Взгляните на практику разработки компонента «показать-скрыть», чтобы увидеть, как это делается.

Пример

 
Есть ли бесплатная парковка в праздничные дни?
 

• В отличие от методики с использованием деталей и сводок , вы должны предоставить свой собственный сценарий для отображения/скрытия содержимого.
• Атрибут aria-expanded передает состояние блока контента в дерево доступности. Aria-expanded=»true» означает, что контент виден. Aria-expanded=»false» означает, что содержимое в настоящее время скрыто. Всегда синхронизируйте значение этого атрибута с визуальным состоянием компонента . Программы чтения с экрана объявят об этом состоянии, когда кнопка получит фокус.
• Добавьте aria-expanded атрибут к кнопке, которая переключает видимость вместо контейнера скрытого/показанного содержимого .
• Убедитесь, что атрибут aria-expanded имеет правильное значение при загрузке страницы . Не добавляйте его просто при изменении состояния компонента.
• Используйте нейтральную метку кнопки при применении этого метода, например, «меню» вместо «показать меню» или «скрыть меню». Метка остается нейтральной, в то время как aria-expanded указывает на состояние.
• Пример кода также содержит атрибут aria-controls . Этот атрибут сообщает вспомогательным технологиям, каким контентом управляет кнопка. Поскольку aria-controls обычно располагается сразу после кнопки в исходном коде раскрытия информации, этот атрибут является необязательным.

Свернуть · Начальная загрузка

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших подключаемых модулей JavaScript.

Пример

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

• . collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибут href или кнопка с атрибутом data-target . В обоих случаях требуется data-toggle="collapse" .

Ссылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.

 

  
    Ссылка с href
  
  
    Кнопка с целью данных
  

<дел>
  <дел>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid.  Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.