Ця стаття є дзеркальною статтею машинного перекладу, будь ласка, натисніть тут, щоб перейти до оригінальної статті.

Architect_Programmer_Code Сільськогосподарська мережа»Архітектор › Фронтенд-дизайн і веб › Передня рама › Як показати та приховати елементи за допомогою Bootstrap4
Вид: 12583|Відповідь: 0

[Бутстреп] Як показати та приховати елементи за допомогою Bootstrap4

[Копіювати посилання]
Опубліковано 04.04.2019 10:46:25 | | | |
Як показати та приховати елементи за допомогою Bootstrap4

Для швидшої розробки мобільних пристроїв використовуйте адаптивні класи відображення та приховування елементів за пристроями. Уникайте створення абсолютно різних версій одного сайту, але приховуйте елементи для кожного розміру екрану відповідно.

Щоб приховати елементи, просто використовуйте.d-немаєКлас чи один із них.d-{sm,md,lg,xl}-noneклас для будь-яких адаптивних змін на екрані.

Щоб відображати елементи лише на заданому інтервалі розміру екрану, можна встановити один.d-*-немаєКлас і один.d-*-*класи групуються разом, наприклад,.d-none .d-md-блок .d-xl-noneЕлементи всіх розмірів екранів будуть приховані, окрім середніх і великих пристроїв.

Візуалізації:



Показуйте/сховайте для точки розриву та зменшення:

  • hidden-xs-down (hidden-xs) = d-none d-sm-блок
  • 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-блок
  • hidden-xl-down (n/a 3.x) = d-none (те саме, що прихований)


Показувати/ховатися для точки розриву і вище:

  • 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 (n/a 3.x) = d-xl-none


Показувати/ховатися лише для однієї точки розриву:

  • hidden-xs (лише) = d-none d-sm-block (те саме, що прихований-xs-down)
  • hidden-sm (only) = d-блок d-sm-none d-md-блок
  • hidden-md (лише) = d-блок d-md-none d-lg-блок
  • hidden-lg (лише) = d-блок d-lg-none d-xl-блок
  • hidden-xl (n/a 3.x) = d-блок d-xl-none
  • visible-xs (лише) = d-блок d-sm-none
  • visible-SM (лише) = d-none d-sm-блок d-md-none
  • visible-md (only) = d-none d-md-блок d-lg-none
  • visible-lg (лише) = d-none d-lg-блок d-xl-none
  • visible-xl (n/a 3.x) = d-none d-xl-блок


Візуалізація:



Посилання на посилання:https://getbootstrap.com/docs/4.0/utilities/display/





Попередній:Якими якостями має володіти архітектор програмного забезпечення?
Наступний:Не можу ввести @Autowired у Listener

Пов'язані дописи
Застереження:
Усе програмне забезпечення, програмні матеріали або статті, опубліковані Code Farmer Network, призначені лише для навчання та досліджень; Вищезазначений контент не повинен використовуватися в комерційних чи незаконних цілях, інакше користувачі несуть усі наслідки. Інформація на цьому сайті надходить з Інтернету, і спори щодо авторських прав не мають до цього сайту. Ви повинні повністю видалити вищезазначений контент зі свого комп'ютера протягом 24 годин після завантаження. Якщо вам подобається програма, будь ласка, підтримуйте справжнє програмне забезпечення, купуйте реєстрацію та отримайте кращі справжні послуги. Якщо є будь-яке порушення, будь ласка, зв'яжіться з нами електронною поштою.
Mail To:help@itsvse.com