"Enter"a basıp içeriğe geçin

Bootstrap Display Kullanımı Özellikleri

Bootstrap 4.0 ile gelen display classları hakkında bir kaç bilgi paylaşacağım.

Display ile ilgili gelen özellikler oldukça başarılı ve işinizi hızlandıracağını düşünüyorum.

Css’den bildiğiniz gibi display: özelliği bulunmakta bunu bootstrap sizin için daha kullanışlı hale getirmiş.

Öncelikle Tanımları nasıl yapacağınıza bakalım.

  • .d-{value} xs için yazım tipi
  • .d-{breakpoint}-{value} sm, md, lg, ve xl için yazım tipi

Value değeri için aşağıdakileri kullanıyoruz.

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

Breakpoint değeri içinde aşağıdakileri kullanıyoruz.

  • sm
  • md
  • lg
  • xl

Gizleme Tanımları Nasıl Yapılır?

Bazı durumlarda gizmek istenebilir, bu gibi durumlar da da none eklemesi yapıyoruz.

Örneğin projenize mobil girişlerde görünmesin ama masaüstü veya laptop gibi cihazlardan girildiğinde görünsün gibi işlemlerde aşağıdaki sınıfları kullanabiliriz.

Ekran Boyutu Sınıf
Tüm boyutlarda gizle .d-none
Sadece xs ekranlarda gizle .d-none .d-sm-block
Sadece sm ekranlarda gizle .d-sm-none .d-md-block
Sadece md ekranlarda gizle .d-md-none .d-lg-block
Sadece lg ekranlarda gizle .d-lg-none .d-xl-block
Sadece xl ekranlarda gizle .d-xl-none
Tüm boyutlarda göster .d-block
Sadece xs ekranlarda göster .d-block .d-sm-none
Sadece sm ekranlarda göster .d-none .d-sm-block .d-md-none
Sadece md ekranlarda göster .d-none .d-md-block .d-lg-none
Sadece lg ekranlarda göster .d-none .d-lg-block .d-xl-none
Sadece xs ekranlarda göster .d-none .d-xl-block

Yazdırma Özellikleri

Yazdırma özelliklerini de kullanmak oldukça basit sadece sınıf tanımlamasında print eklemeniz yeterli olacaktır.

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

 

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir