Bootstrap Display Sınıfları: d-none ile Ekrana Göre Gizleme ve Gösterme

Adlandırma ve değerler

Display yardımcıları, Bootstrap'in kesme noktası sistemini izler. Tüm ekranlarda geçerli olan sınıfların adında kademe yoktur, çünkü min-width: 0 ve üstüne uygulanırlar; diğer kademelerde ad kademe kısaltmasını içerir. Biçim xs için .d-{değer}, sm, md, lg, xl ve xxl için .d-{kademe}-{değer} şeklindedir.

Belgeler bilerek display özelliğinin yalnızca bir alt kümesini desteklediğini belirtir. Kullanılabilen değerler şunlardır:

Derlenmiş CSS'te her sınıf !important taşır; örneğin .d-none kuralı display: none !important;, .d-md-block ise @media (min-width: 768px) içinde display: block !important; şeklindedir. Belgeler değerlerin $displays değişkeniyle değiştirilebileceğini söyler; ancak v5.0.2 kaynak kodunda bu liste _utilities.scss içindeki "display" girdisinin values anahtarında durur. Kendi değerinizi eklemek için Utilities API yazısındaki yöntemi kullanın.

// scss/_utilities.scss (v5.0.2)
"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid table table-row table-cell flex inline-flex none
),

responsive: true her kademe için ayrı sınıf, print: true ise .d-print-* sınıflarını üretir. Bu iki anahtar, aşağıdaki bölümlerde anlatacağımız iki davranışın kaynağıdır.

Kademeler "ve üstü" demektir

Belgelerin altını çizdiği kural şudur: medya sorguları verilen kesme noktasını ya da daha geniş ekranları etkiler. .d-lg-none yalnızca lg ekranlarda değil, lg, xl ve xxl ekranlarda display: none uygular. Bu yüzden "yalnızca md'de gizle" gibi bir aralık için tek sınıf yetmez; gizlemenin başladığı yeri ve bittiği yeri ayrı ayrı yazmanız gerekir.

Kural, sınıfların CSS dosyasındaki yerleşiminden gelir. Ön eksiz sınıflar medya sorgusu olmadan dosyanın başlarında durur; her kademenin sınıfları ise kendi min-width sorgusunun içinde, küçükten büyüğe doğru dosyanın ilerisinde yer alır. Tüm sınıflar aynı özgüllükte ve hepsi !important taşıdığı için, aynı anda geçerli olan iki sınıftan dosyada sonra geleni kazanır. .d-none .d-md-block yazdığınızda 768px altında yalnızca .d-none geçerlidir; 768px ve üstünde .d-md-block da devreye girer ve dosyada sonra geldiği için kazanır. Geçiş rehberi ayrıca .d-none sınıfının v5'te diğer display yardımcılarına göre daha fazla ağırlık kazanması için CSS içinde taşındığını belirtir; derlenmiş dosyada .d-none ön eksiz display sınıflarının en sonunda yer alır.

Ekran boyutuna göre gizleme ve gösterme

Belgeler mobil uyumlu geliştirme için aynı sitenin tamamen farklı sürümlerini yapmak yerine öğeleri ekran boyutuna göre gizlemeyi önerir. Aşağıdaki tablo belgelerdeki tablonun Türkçe özetidir:

Bir aralıkta göstermek için belgeler bir .d-*-none sınıfını bir .d-*-* sınıfıyla birleştirmeyi söyler. Örnek olarak .d-none .d-md-block .d-xl-none .d-xxl-none öğeyi md ve lg dışındaki tüm ekranlarda gizler. Burada .d-xxl-none aslında gerekli değildir, çünkü .d-xl-none zaten xxl'yi de kapsar; ama yazmanın zararı yoktur.

<div class="d-lg-none">Bu metin lg ve daha geniş ekranlarda gizlenir</div>
<div class="d-none d-lg-block">Bu metin lg'den dar ekranlarda gizlenir</div>

Doğru display değerini geri vermek

Tablodaki örneklerde öğeyi geri göstermek için block kullanılır, ama bu her öğe için doğru değildir. Gizlediğiniz öğe bir flex kapsayıcısıysa geri gösterirken .d-md-flex, bir tablo satırıysa .d-md-table-row, bir tablo hücresiyse .d-md-table-cell kullanın. Aksi halde öğe görünür hale gelir ama düzeni bozulur: .d-md-block verilmiş bir menü artık flex kapsayıcısı olmadığı için öğelerini alt alta dizer.

<ul class="list-unstyled d-none d-md-flex gap-3 mb-0">
  <li><a href="#">Ürünler</a></li>
  <li><a href="#">Fiyatlar</a></li>
  <li><a href="#">İletişim</a></li>
</ul>

Bu listede .d-none menüyü md altında gizler, .d-md-flex ise md ve üstünde bağlantıları yan yana dizen bir flex kapsayıcısı olarak geri getirir. .gap-3 bağlantılar arasına 1rem boşluk koyar; .list-unstyled madde işaretlerini kaldırır. Aynı işi .d-md-block ile yapsaydınız bağlantılar alt alta kalırdı. Tablo öğeleri için de aynı kural geçerlidir:

<table class="table">
  <thead>
    <tr>
      <th>Ürün</th>
      <th class="d-none d-md-table-cell">Stok kodu</th>
      <th>Fiyat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Klavye</td>
      <td class="d-none d-md-table-cell">KLV-01</td>
      <td>450 TL</td>
    </tr>
  </tbody>
</table>

Bu tabloda stok kodu sütunu md altında gizlenir, md ve üstünde normal bir tablo hücresi olarak geri gelir. Gizleme hem başlık hücresine hem veri hücrelerine aynı şekilde uygulanmalıdır, yoksa sütunlar kayar. Dar ekranda bütün tabloyu kaydırmak daha uygunsa Bootstrap table-responsive yazısına bakın.

Yazdırma için display sınıfları

Display yardımcılarının bir de yazdırma sürümü vardır: .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 ve .d-print-inline-flex. Derlenmiş dosyada bu sınıflar @media print bloğunun içindedir, yani yalnızca sayfa yazdırılırken etkilidir. Yazdırma ve ekran sınıfları birlikte kullanılabilir:

<nav class="d-print-none">Menü: ekranda görünür, çıktıda yok</nav>
<div class="d-none d-print-block">Yalnızca çıktıda görünen not</div>
<div class="d-none d-lg-block d-print-block">Ekranda lg ve üstünde, çıktıda her zaman görünür</div>

Fatura, sipariş özeti ya da başvuru formu gibi kullanıcıların yazdırabileceği sayfalarda menüleri, butonları ve reklam alanlarını .d-print-none ile çıktıdan çıkarmak yaygın bir ihtiyaçtır. Geçiş rehberine göre Bootstrap 5 eski yazdırma stillerini ve $enable-print-styles değişkenini kaldırdı, ancak yazdırma display sınıfları korundu. Yani çıktıda neyin görüneceğini artık bu sınıflarla siz belirlersiniz.

Görünürlük: invisible ve visible

Visibility yardımcıları display değerine hiç dokunmaz, CSS visibility özelliğini değiştirir. Derlenmiş CSS'te .visible kuralı visibility: visible !important;, .invisible kuralı ise visibility: hidden !important; şeklindedir. Belgelere göre bu sınıflar düzeni etkilemez: .invisible verilen öğe görünmez ama sayfada yerini kaplamaya devam eder.

Visibility sınıflarının duyarlı sürümü yoktur; 5.0.2 kaynak kodundaki tanım responsive anahtarı içermez. Belirli bir ekranda yer koruyarak gizleme ihtiyacı nadirdir; çoğu durumda doğru araç kademeli display sınıflarıdır.

Display sınıflarının diğer kullanım alanları

• Flex kapsayıcısı açmak: .d-flex ve .d-inline-flex bütün flex yardımcılarının başlangıç noktasıdır. Ayrıntılar Bootstrap flex yardımcıları yazısında.
• Alt alta tam genişlik butonlar: .d-grid .gap-2 Bootstrap 4'teki .btn-block sınıfının yerini alır; geçiş rehberine göre bu sınıf kaldırıldı. Butonlar sayfasındaki örnekte .d-md-block eklenerek md ve üstünde grid düzeni kaldırılır. Bkz. Bootstrap buton sınıfları.
• Duyarlı satır kırma: Grid içinde .w-100 .d-none .d-md-block taşıyan boş bir öğe, sütunları yalnızca md ve üstünde yeni satıra geçirir (sütun hizalama yazısı).
• Navbar ve menüler: Menülerin daraltılıp açılması display ile yapılmaz, navbar kendi sınıflarını kullanır; Bootstrap navbar yazısına bakın.

Uygulama: telefon ve masaüstü için farklı çağrı metni

Bir iletişim bölümünde telefonda dokunulabilir kısa bir buton, geniş ekranda ise numarayı açıkça yazan bir metin göstermek isteyebilirsiniz. İki öğeyi de HTML'e koyup display sınıflarıyla birini gizlemek basit bir çözümdür:

<div class="p-3 border">
  <a class="btn btn-primary d-md-none" href="tel:+900000000000">Hemen ara</a>
  <p class="d-none d-md-block mb-0">Bize çalışma saatlerinde telefonla ulaşabilirsiniz.</p>
  <p class="d-none d-print-block mb-0">Çıktı için not: iletişim bilgileri sayfa altında.</p>
</div>

md altında yalnızca buton görünür; md ve üstünde buton .d-md-none ile gizlenir, paragraf .d-md-block ile görünür hale gelir. Üçüncü paragraf ekranda hiçbir zaman görünmez, yalnızca yazdırırken çıkar. Buradaki dengeyi gözetin: belgeler aynı içeriğin tamamen farklı sürümlerini üretmek yerine öğeleri duyarlı olarak gizlemeyi önerir; ama her içeriği iki kez yazmak da sayfayı şişirir. Bu tekniği küçük, sunum farkı olan parçalar için kullanın.

Sık yapılan hatalar

• "Yalnızca" ile "ve üstü"nü karıştırmak: .d-sm-none öğeyi sm, md, lg, xl ve xxl'de gizler. Yalnızca sm'de gizlemek için .d-sm-none .d-md-block gerekir.
• Ters sırayla düşünmek: Önce en küçük ekran için durumu yazın (.d-none), sonra büyüdükçe değiştirin (.d-lg-block). Tersi (.d-block .d-lg-none) da geçerlidir ama anlamı farklıdır.
• Flex öğeyi block ile geri getirmek: .d-flex taşıması gereken bir öğeyi .d-md-block ile göstermek flex düzenini kaldırır; .d-md-flex kullanın.
• Kendi CSS'inizle ezmeye çalışmak: Display sınıfları !important taşır; aynı öğeye kendi kuralınızla display vermek etkisiz kalır.
• Gizli içeriğin yüklenmediğini sanmak: .d-none yalnızca CSS ile görüntülemeyi kapatır; öğe HTML içinde durmaya devam eder. Sayfanın boyutunu küçültmek ya da içeriği gerçekten kaldırmak istiyorsanız öğeyi HTML kodundan çıkarmanız gerekir.
• .invisible ile erişilebilir gizleme yapmak: Ekran okuyucuya bırakılması gereken metinler için .visually-hidden kullanın.

Sık Sorulan Sorular

Bootstrap 5'te hidden-xs ya da hidden-sm sınıfı var mı?

Hayır, bu adlar 5.0.2 CSS dosyasında bulunmaz. Bootstrap 5'te aynı işi yukarıdaki tablodaki display sınıfı kombinasyonları yapar; örneğin yalnızca xs'te gizlemek için .d-none .d-sm-block.

Bir öğeyi sadece mobilde nasıl gösteririm?

Bootstrap'te "mobil" en küçük kademe olan xs'tir (576px altı). .d-block .d-sm-none öğeyi yalnızca bu aralıkta gösterir. Tabletleri de dahil etmek isterseniz kesme noktasını büyütün: .d-md-none öğeyi 768px altında görünür bırakır.

d-none ile invisible arasındaki fark nedir?

.d-none öğeyi düzenden tamamen çıkarır, yerine diğer öğeler kayar. .invisible öğeyi görünmez yapar ama boşluğu yerinde kalır. İkisi de öğeyi görsel olarak gizler; belgeler .invisible için ekran okuyucuların da öğeyi görmediğini özellikle belirtir.

Bir öğeyi JavaScript ile gizleyip göstermek için d-none kullanabilir miyim?

Evet, sınıfı eklemek ya da kaldırmak yeterlidir. Dikkat edilecek nokta şudur: .d-none !important taşıdığı için öğeye satır içi style="display: block" yazmak onu geri getirmez; sınıfı kaldırmanız gerekir. Bootstrap'in kendi bileşenleri (collapse, modal, offcanvas) açma ve kapama için kendi sınıflarını ve JavaScript API'sini kullanır; bunlar için display sınıflarıyla uğraşmak yerine Bootstrap JavaScript API yazısındaki yöntemleri tercih edin.

Kesme noktası değerlerini değiştirirsem display sınıfları da değişir mi?

Evet. Grid belgelerine göre $grid-breakpoints haritasını değiştirip yeniden derlediğinizde duyarlı görünürlük yardımcıları da yeni kesme noktalarını kullanır. Ayrıntılar Bootstrap breakpoint yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Flex yardımcıları · Breakpoint ve responsive kademeler · Erişilebilirlik ve visually-hidden · Sütun hizalama ve satır kırma · Mobil uyumluluk nedir