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 display
mü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ı xxl
kı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çinsm
,md
,lg
,xl
vexxl
.
Değerin şunlardan biri olduğu yer:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
$displays
Değ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 , .d-lg-none
ayarlar display: none;
ve ekranlar .lg
xl
xxl
Örnekler
<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>
<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-none
sı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-*-none
sınıfı bir sınıfla birleştirebilirsiniz .d-*-*
, örneğin .d-none .d-md-block .d-xl-none .d-xxl-none
orta 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 .d-xxl-block |
Yalnızca xxl'de gizli | .d-xxl-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 .d-xxl-none |
Yalnızca xxl'de görünür | .d-none .d-xxl-block |
<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
display
Print 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ı display
değ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.
<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
),