Source

Görüntü özelliği

Görüntüleme yardımcı programlarımızla bileşenlerin görüntü değerini ve daha fazlasını hızlı ve duyarlı bir şekilde değiştirin. Daha yaygın olan bazı değerler için desteğin yanı sıra yazdırma sırasında ekranı kontrol etmek için bazı ekstralar içerir.

Nasıl çalışır

Duyarlı görüntüleme yardımcı program sınıflarımızla displaymülkün değerini değiştirin . için tüm olası değerlerin yalnızca bir alt kümesini destekliyoruz display. İhtiyacınıza göre çeşitli efektler için sınıflar birleştirilebilir.

gösterim

ile arasındaki tüm kesme noktalarıxs için geçerli olan görüntüleme yardımcı program sınıflarında kesme noktası xlkısaltması yoktur. Bunun nedeni, bu sınıfların baştan min-width: 0;ve yukarıya uygulanması ve dolayısıyla bir medya sorgusuna bağlı olmamasıdır. Ancak kalan kesme noktaları bir kesme noktası kısaltması içerir.

Bu nedenle, sınıflar şu format kullanılarak adlandırılır:

  • .d-{value}içinxs
  • .d-{breakpoint}-{value}için sm, md, lgve xl.

Değerin şunlardan biri olduğu yer:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Medya sorguları, verilen kesme noktası veya daha büyük ekran genişliklerini etkiler . Örneğin, hem .d-lg-noneekranlarda display: none;hem de ayarlarda.lgxl

Örnekler

d satır içi
d satır içi
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-blok d-blok
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Öğeleri gizleme

Daha hızlı mobil uyumlu geliştirme için, öğeleri cihaza göre göstermek ve gizlemek için duyarlı görüntüleme sınıflarını kullanın. Aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının, bunun yerine öğeyi her ekran boyutu için duyarlı bir şekilde gizleyin.

Öğeleri gizlemek için, herhangi bir duyarlı ekran varyasyonu için .d-nonesınıfı veya sınıflardan birini kullanmanız yeterlidir..d-{sm,md,lg,xl}-none

Bir öğeyi yalnızca belirli bir ekran boyutu aralığında göstermek için bir .d-*-nonesınıfı bir sınıfla birleştirebilirsiniz .d-*-*, örneğin .d-none .d-md-block .d-xl-noneorta ve büyük cihazlar hariç tüm ekran boyutları için öğeyi gizleyebilirsiniz.

Ekran boyutu Sınıf
Hepsinde gizli .d-none
Yalnızca xs'de gizli .d-none .d-sm-block
Sadece sm'de gizli .d-sm-none .d-md-block
Yalnızca md'de gizli .d-md-none .d-lg-block
Yalnızca lg'de gizli .d-lg-none .d-xl-block
Yalnızca xl'de gizli .d-xl-none
Tümünde görünür .d-block
Yalnızca xs'de görünür .d-block .d-sm-none
Yalnızca sm'de görünür .d-none .d-sm-block .d-md-none
Yalnızca md'de görünür .d-none .d-md-block .d-lg-none
Yalnızca lg'de görünür .d-none .d-lg-block .d-xl-none
Yalnızca xl'de görünür .d-none .d-xl-block
hide on screens wider than lg
lg'den daha küçük ekranlarda gizleyin
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Baskıda göster

displayPrint display yardımcı program sınıflarımızla yazdırırken öğelerin değerini değiştirin . Duyarlı yardımcı programlarımızla aynı displaydeğerler için destek içerir .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

Baskı ve teşhir sınıfları birleştirilebilir.

Yalnızca Ekran (Yalnızca baskıda gizle)
Print Only (Hide on screen only)
Ekranda büyük ölçüde gizle, ancak her zaman baskıda göster
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>