Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Architect_Programmer_Code Tarım Ağı»Mimar › Ön yüz tasarımı ve web › Ön gövde çerçevesi › Bootstrap4 kullanarak öğeleri nasıl gösterir ve gizlerim
Görünüm: 12583|Yanıt: 0

[Bootstrap] Bootstrap4 kullanarak öğeleri nasıl gösterir ve gizlerim

[Bağlantıyı kopyala]
Yayınlandı 4.04.2019 10:46:25 | | | |
Bootstrap4 kullanarak öğeleri nasıl gösterir ve gizlerim

Daha hızlı mobil cihaz geliştirme için, öğeleri cihaz bazında göstermek ve saklamak için duyarlı ekran sınıfları kullanın. Aynı sitenin tamamen farklı versiyonlarını oluşturmaktan kaçının, ancak her ekran boyutu için öğeleri buna göre gizleyin.

Öğeleri gizlemek için sadece.d-hiçbirisınıf ya da bunlardan biri.d-{sm,md,lg,xl}-nonesınıf olarak herhangi bir tepki verici ekran değişikliği yapması için kullanılır.

Öğeleri sadece belirli bir ekran boyutu aralığında göstermek için bir tane ayarlayabilirsiniz.d-*-yokSınıf ve bir.d-*-*Sınıflar bir arada gruplanır, örneğin,.d-none .d-md-block .d-xl-noneTüm ekran boyutlarındaki öğeler gizli olacak, orta ve büyük cihazlar hariç.

Render:



Breakpoint ve down için göster/gizle:

  • 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 (hidden ile aynı)


Breakpoint ve üzeri için göster/gizle:

  • hidden-xs-up = d-none (hidden ile aynı)
  • 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


Sadece tek bir kırılma noktası için göster/sakla:

  • hidden-xs (sadece) = d-none d-sm-block (hidden-xs-down ile aynı)
  • gizli-sm (sadece) = d-blok d-sm-none d-md-block
  • hidden-md (sadece) = d-block d-md-none d-lg-block
  • hidden-lg (sadece) = d-blok d-lg-none d-xl-block
  • hidden-xl (n/a 3.x) = d-blok d-xl-none
  • visible-xs (sadece) = d-block d-sm-none
  • visible-sm (sadece) = d-none d-sm-block d-md-none
  • visible-MD (sadece) = d-none d-md-block d-lg-none
  • visible-lg (sadece) = d-none d-lg-block d-xl-none
  • visible-xl (n/a 3.x) = d-none d-xl-blok


Görselleştirme:



Referans bağlantıları:https://getbootstrap.com/docs/4.0/utilities/display/





Önceki:Bir yazılım mimarının hangi özelliklere sahip olması gerekir?
Önümüzdeki:Listener'a @Autowired enjekte edemiyoruz

İlgili Yazılar
Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.
Mail To:help@itsvse.com