Тази статия е огледална статия за машинен превод, моля, кликнете тук, за да преминете към оригиналната статия.

Architect_Programmer_Code Селскостопанска мрежа»Архитект › Фронт-енд дизайн и уеб › Предна рамка › Как да показвате и скривате елементи чрез Bootstrap4
Изглед: 12583|Отговор: 0

[Бутстрап] Как да показвате и скривате елементи чрез Bootstrap4

[Копирай линк]
Публикувано в 4.04.2019 г. 10:46:25 ч. | | | |
Как да показвате и скривате елементи чрез Bootstrap4

За по-бърза разработка на мобилни устройства използвайте responsive display класове, за да показват и скриват елементи по устройства. Избягвайте да създавате напълно различни версии на един и същ сайт, но скрийте елементи за всеки размер на екрана съответно.

За да скриете елементи, просто използвайте.д-нямаклас или някоя от тях.d-{sm,md,lg,xl}-нямаклас, за да направят всякакви отзивчиви промени на екрана.

За да показвате елементи само на даден интервал за размер на екрана, можете да зададете такъв.d-*-нямаКлас и едно.d-*-*класовете се групират заедно, например,.d-няма .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)
  • 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-няма


Показвай/скривай само за една точка на прекъсване:

  • hidden-xs (само) = d-none d-sm-блок (същото като hidden-xs-down)
  • hidden-sm (only) = d-блок d-sm-none d-md-блок
  • hidden-md (само) = d-блок d-md-none d-lg-блок
  • hidden-lg (само) = d-блок d-lg-няма 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-няма d-xl-блок


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



Референтни връзки:https://getbootstrap.com/docs/4.0/utilities/display/





Предишен:Какви качества трябва да притежава един софтуерен архитект?
Следващ:Не може да се инжектира @Autowired в Listener

Свързани публикации
Отричане:
Целият софтуер, програмни материали или статии, публикувани от Code Farmer Network, са само за учебни и изследователски цели; Горното съдържание не трябва да се използва за търговски или незаконни цели, в противен случай потребителите ще понесат всички последствия. Информацията на този сайт идва от интернет, а споровете за авторски права нямат нищо общо с този сайт. Трябва напълно да изтриете горното съдържание от компютъра си в рамките на 24 часа след изтеглянето. Ако ви харесва програмата, моля, подкрепете оригинален софтуер, купете регистрация и получете по-добри услуги. Ако има нарушение, моля, свържете се с нас по имейл.
Mail To:help@itsvse.com