in English

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

$displaysDeğişken değiştirilerek ve SCSS yeniden derlenerek ekran değerleri değiştirilebilir .

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

<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 öğ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}-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`

lg ve daha geniş ekranlarda gizleyin

lg'den daha küçük ekranlarda gizleyin

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

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