Source

Düzen için yardımcı programlar

Daha hızlı mobil uyumlu ve duyarlı geliştirme için Bootstrap, içeriği göstermek, gizlemek, hizalamak ve aralarında boşluk bırakmak için düzinelerce yardımcı program sınıfı içerir.

Değiştirmedisplay

Mülkün ortak değerlerini duyarlı bir şekilde değiştirmek için görüntüleme yardımcı programlarımızı kullanın display. Bunları belirli görünüm pencerelerinde göstermek veya gizlemek için ızgara sistemimiz, içeriğimiz veya bileşenlerimizle karıştırın.

Flexbox seçenekleri

Bootstrap 4, flexbox ile oluşturulmuştur, ancak birçok gereksiz geçersiz kılma ekleyeceği ve beklenmedik şekilde önemli tarayıcı davranışlarını displaydeğiştireceği için her öğe değiştirilmemiştir. Bileşenlerimizindisplay: flex çoğu , flexbox etkinleştirilmiş olarak üretilmiştir.

Bir öğeye eklemeniz gerekirse display: flex, bunu .d-flexya da duyarlı değişkenlerden biri ile yapın (örn., .d-sm-flex). Boyutlandırma, hizalama, aralık ve daha fazlası için ekstra esnek kutu yardımcı programlarımızındisplay kullanımına izin vermek için bu sınıfa veya değere ihtiyacınız olacak.

Kenar boşluğu ve dolgu

Öğelerin ve bileşenlerin nasıl aralıklı ve boyutlandırılacağını denetlemek için marginve padding boşluk yardımcı programlarını kullanın. 1remBootstrap 4, varsayılan bir değer $spacerdeğişkenine dayalı olarak, aralama yardımcı programları için beş düzeyli bir ölçek içerir . Tüm görünüm alanları için değerler seçin (örn. .mr-3için margin-right: 1rem) veya belirli görünüm pencerelerini hedeflemek için duyarlı değişkenler seçin (örn ., kesme noktasından başlamak için .mr-md-3) .margin-right: 1remmd

Aç/Kapatvisibility

displayGeçiş gerekli olmadığında, görünürlük yardımcı programlarımızlavisibility bir öğenin arasında geçiş yapabilirsiniz . Görünmez öğeler sayfanın düzenini etkilemeye devam eder, ancak görsel olarak ziyaretçilerden gizlenir.