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
<div class="col-12 demo-display"> <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> </div> <div class="col-12 demo-display"> <div class="d-inline-block p-2 bg-primary text-white">d-inline-block</div> <div class="d-inline-block p-2 bg-dark text-white">d-inline-block</div> </div> <div class="col-12 demo-display"> <div class="d-block p-2 bg-primary text-white">d-block</div> <div class="d-block p-2 bg-dark text-white">d-block</div> </div> <div class="col-12 demo-display"> <div class="d-table p-2 bg-primary text-white">d-table</div> <div class="d-table p-2 bg-dark text-white">d-table</div> </div> <div class="col-12 demo-display"> <div class="d-table-cell p-2 bg-primary text-white">d-table-cell</div> <div class="d-table-cell p-2 bg-dark text-white">d-table-cell</div> </div> <div class="col-12 demo-display"> <div class="d-table-row p-2 bg-primary text-white">d-table-row</div> <div class="d-table-row p-2 bg-dark text-white">d-table-row</div> </div> <div class="col-12 demo-display"> <div class="d-flex p-2 bg-primary text-white">d-flex</div> <div class="d-flex p-2 bg-dark text-white">d-flex</div> </div> <div class="col-12 demo-display"> <div class="d-inline-flex p-2 bg-primary text-white">d-inline-flex</div> <div class="d-inline-flex p-2 bg-dark text-white">d-inline-flex</div> </div>
Bu yazı yorumlara kapalı.