Ez a cikk egy tükör gépi fordítás, kérjük, kattintson ide, hogy ugorjon az eredeti cikkre.

Architect_Programmer_Code Mezőgazdasági Hálózat»Építész › Front-end design és web › Front-end keret › Hogyan mutatjuk és rejthetjük el elemeket a Bootstrap4-szel
Nézet: 12583|Válasz: 0

[Bootstrap] Hogyan mutatjuk és rejthetjük el elemeket a Bootstrap4-szel

[Linket másol]
Közzétéve 2019. 04. 04. 10:46:25 | | | |
Hogyan mutatjuk és rejthetjük el elemeket a Bootstrap4-szel

A gyorsabb mobil eszközök fejlesztéséhez használj érzékeny kijelzőosztályokat az elemek megjelenítésére és elrejtésére eszközönként. Kerüld el ugyanannak az oldalnak a teljesen eltérő verziókat létrehozni, de rejtsd el az egyes képernyőméretekhez tartozó elemeket ennek megfelelően.

Az elemek elrejtéséhez egyszerűen.d-semmiosztály vagy valamelyikük.d-{sm,md,lg,xl}-noneA képernyőváltás bármilyen gyors változása a Class.

Ha az elemeket csak egy adott képernyőméret intervallumban jelenítheted meg, beállíthatsz egyet.d-*-nincsOsztály és egy.d-*-*Az osztályokat csoportosítják, például:.d-nincs .d-md-block .d-xl-noneMinden képernyőméretű elem el lesz rejtve, kivéve a közepes és nagy eszközöket.

Vakolatok:



Megjelenítés/rejtés a törésponthoz és a lefelé:

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


Mutasd/rejtsd el a töréspontot és felfelé:

  • hidden-xs-up = d-none (ugyanaz, mint a rejtett)
  • 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


Csak egyetlen töréspontnál mutasd vagy rejtsd el:

  • hidden-xs (csak) = d-none d-sm-block (ugyanaz, mint hidden-xs-down)
  • hidden-sm (csak) = d-blokk d-sm-nincs d-md-blokk
  • hidden-md (csak) = d-blokk d-md-none d-lg-block
  • hidden-lg (csak) = d-blokk d-lg-nincs d-xl-block
  • hidden-xl (n/a 3.x) = d-blokk d-xl-none
  • visible-xs (csak) = d-blokk d-sm-none
  • visible-sm (csak) = d-none d-sm-block d-md-none
  • visible-MD (csak) = d-none d-md-block d-lg-none
  • visible-lg (csak) = d-none d-lg-block d-xl-none
  • visible-xl (n/a 3.x) = d-none d-xl-blokk


Vizualizáció:



Hivatkozások:https://getbootstrap.com/docs/4.0/utilities/display/





Előző:Milyen tulajdonságokat kellene egy szoftverarchitektornak megszereznie?
Következő:Nem tudunk @Autowired befecskendíteni a Listenerbe

Kapcsolódó bejegyzések
Lemondás:
A Code Farmer Network által közzétett összes szoftver, programozási anyag vagy cikk kizárólag tanulási és kutatási célokra szolgál; A fenti tartalmat nem szabad kereskedelmi vagy illegális célokra használni, különben a felhasználók viselik az összes következményet. Az oldalon található információk az internetről származnak, és a szerzői jogi vitáknak semmi köze ehhez az oldalhoz. A fenti tartalmat a letöltés után 24 órán belül teljesen törölni kell a számítógépéről. Ha tetszik a program, kérjük, támogassa a valódi szoftvert, vásároljon regisztrációt, és szerezzen jobb hiteles szolgáltatásokat. Ha bármilyen jogsértés történik, kérjük, vegye fel velünk a kapcsolatot e-mailben.
Mail To:help@itsvse.com