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.

Bu sayfada

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ı xxlkı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, lg, xlve xxl.

Değerin şunlardan biri olduğu yer:

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

Ekran değerleri , SCSS'de displaytanımlanan değerler değiştirilerek ve yeniden derlenerek değiştirilebilir.$utilities

Medya sorguları, verilen kesme noktası veya daha büyük ekran genişliklerini etkiler . Örneğin , .d-lg-noneayarlar display: none;ve ekranlar .lgxlxxl

Örnekler

d satır içi

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-blok d-blok

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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 öğeleri 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,xxl}-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-none .d-xxl-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`
Yalnızca xxl'de gizli	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Yalnızca xxl'de görünür	`.d-none .d-xxl-block`

lg ve daha geniş ekranlarda gizleyin

lg'den daha küçük ekranlarda gizleyin

html

<div class="d-lg-none">hide on lg and wider screens</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-grid
.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)

Yalnızca Yazdır (Yalnızca ekranda gizle)

Ekranda büyük ölçüde gizle, ancak her zaman baskıda göster

html

<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>

küstah

Yardımcı Programlar API'sı

Görüntüleme yardımcı programları, scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),