Bootstrap 5.3.0: Heyecan Verici Yeni Özelliklerinin Kilidini Açmak

Bootstrap, web geliştirmede devrim yaratan popüler bir ön uç çerçevesidir. En son sürümü olan Bootstrap 5.3.0 ile çerçeve, çok sayıda heyecan verici yeni özellik sunmuştur. ve çarpıcı, hızlı yanıt veren, zengin özelliklere sahip web siteleri ve uygulamalar oluşturmanızı sağlayan geliştirmeler.

Karanlık Mod Geçişi

dikkate değer biri Bootstrap 5.3.0 eklemeleri için bir geçiş karanlık mod. Bu geçiş, web sitenizin kullanıcılarının aydınlık ve karanlık modlar arasında zahmetsizce geçiş yapmasını sağlayarak web sitenizin veya uygulamanızın çeşitli aydınlatma koşullarında sorunsuz kullanımını kolaylaştırır.

Bu özelliği kullanmak için, basitçe data-bs-toggle="karanlık modu" herhangi bir düğme veya bağlantı öğesine öznitelik.

İşte bir örnek:

<düğmetip="düğme"sınıf="btn btn-birincil"data-bs-geçiş="karanlık mod">
 Karanlık Modu Değiştir
düğme>

Yazı Tipi Ölçeği Yardımcı Programları

Bootstrap 5.3.0, metninizin boyutunu önceden tanımlanmış ölçeklere göre hızlı bir şekilde ayarlamanıza olanak tanıyan bir dizi yazı tipi ölçeği yardımcı programı sunar. belirli yazı tipi değerlerini kendiniz seçin.

Web sitenizde veya uygulamanızda ölçeklenebilir ve tutarlı tipografi elde etmek için bu yardımcı programları diğer Bootstrap tipografi sınıflarıyla birlikte kullanabilirsiniz.

Yazı tipi ölçeği yardımcı programlarını nasıl kullanabileceğinize dair birkaç örnek:

<Psınıf="fs-1">Bu en büyük yazı tipi boyutudurP>
<Psınıf="fs-2">Bu biraz daha küçük bir yazı tipi boyutudurP>
<Psınıf="fs-3">Bu orta yazı tipi boyutudurP>
<Psınıf="fs-4">Bu küçük bir yazı tipi boyutudurP>
<Psınıf="fs-5">Bu en küçük yazı tipi boyutudurP>

Oluk Araçları

Bootstrap 5.3.0'daki bir başka yeni ekleme, oluk yardımcı programlarının tanıtılmasıdır. Bu yardımcı programlar, özel CSS yazmak zorunda kalmadan Bootstrap ızgara düzeninizdeki sütunlar arasına oluklar eklemenizi kolaylaştırır.

İşte oluk yardımcı programlarını nasıl kullanabileceğinize dair bir örnek:

<divsınıf="satır gx-3">
<divsınıf="kol">Sütun 1div>
<divsınıf="kol">Sütun 2div>
div>

Bu örnek, gx-3 iki sütun arasına 3 birimlik (veya 1,5 rem) bir oluk eklemek için sınıf.

Güncellenmiş Form Kontrolleri

bu Bootstrap'te form kontrolleri tutarlılığı ve kullanılabilirliği iyileştirmek için 5.3.0 sürümünde güncellendi. Yeni form denetimleri, onay kutuları, radyo düğmeleri ve seçim kutuları için güncellenmiş stillerin yanı sıra iyileştirilmiş doğrulama geri bildirimi içerir.

Onay Kutuları ve Radyo Düğmeleri

Bootstrap 5.3.0, kullanımlarını kolaylaştıran ve daha erişilebilir hale getiren onay kutuları ve radyo düğmeleri için yeni stiller sunar. Yeni tasarım, bu girdilerle etkileşim kurmanızı kolaylaştıran daha büyük vuruş alanları ve iyileştirilmiş odak göstergeleri içerir.

İşte yeni onay kutusu stillerini nasıl kullanabileceğinize dair bir örnek:

<divsınıf="form kontrolü">
<girişsınıf="form-check-input"tip="onay kutusu"değer=""İD="kontrol1">
<etiketsınıf="form-kontrol-etiketi"için="kontrol1">varsayılan onay kutusuetiket>
div>

Ve işte yeni radyo düğmesi stillerini nasıl kullanabileceğinize dair bir örnek:

<divsınıf="form kontrolü">
<girişsınıf="form-check-input"tip="radyo"isim="örnekRadyolar"İD="radyo1"değer="seçenek 1">
<etiketsınıf="form-kontrol-etiketi"için="radyo1"> seçenek 1 etiket>
div>

Bu işaretlemenin .form-check-input giriş öğesinin kendisini biçimlendirmek için sınıf ve .form-kontrol etiketi etiketi biçimlendirmek için sınıf.

Kutuları Seçin

Seçim kutuları da daha iyi tutarlılık ve kullanılabilirlik için Bootstrap 5.3.0'da yeni stillerle güncellendi. Yeni seçim kutusu stilleri, daha büyük vuruş alanları ve geliştirilmiş odak göstergeleri içerir ve bu girdilerle etkileşim kurmanızı kolaylaştırır.

İşte yeni seçim kutusu stillerini nasıl kullanabileceğinize dair bir örnek:

<seçmesınıf="form-seçim"arya etiketi="Varsayılan seçim örneği">
<seçenekseçilmiş>Bu seçim menüsünü açseçenek>
<seçenekdeğer="1">Birseçenek>
<seçenekdeğer="2">İkiseçenek>
<seçenekdeğer="3">Üçseçenek>
seçme>

nasıl kullanabileceğinize dikkat edin. .form-seçim seçme kutusunun kendisini biçimlendirmek için sınıf.

Doğrulama Geri Bildirimi

Bootstrap 5.3.0 ayrıca form kontrolleri için yeni doğrulama geri bildirim stilleri sunar. Bu stiller, web sitenizin kullanıcılarına bir formu yanlış doldurduklarında görsel geri bildirim sağlamayı kolaylaştırır.

İşte yeni doğrulama stillerini nasıl kullanabileceğinize dair bir örnek:

<divsınıf="gruptan">
<etiketiçin="exampleInputPassword1">Şifreetiket>
<giriştip="şifre"sınıf="form-kontrol geçersiz"İD="exampleInputPassword1"Yer tutucu="Şifre"gerekli>
<divsınıf="geçersiz geri bildirim"> Lütfen geçerli bir şifre girin. div>
div>

nasıl olduğuna dikkat edin .geçersizdir class, giriş alanının geçersiz olduğunu ve .geçersiz geri bildirim class, kullanıcıya bir mesaj görüntüler.

Bu yeni stillerle, web siteniz veya uygulamanız için erişilebilir ve tutarlı formlar oluşturmak her zamankinden daha kolay.

Bootstrap 5.3.0'da Heyecan Verici İyileştirmeler

Bootstrap 5.3.0, tabloya birkaç yeni özellik ve iyileştirme getiren popüler CSS çerçevesine yönelik önemli bir güncellemedir. Karanlık mod geçişinden yazı tipi ölçeği yardımcı programlarına ve cilt payı yardımcı programlarına kadar, daha iyi web siteleri ve uygulamalar oluşturmanıza yardımcı olacak pek çok yeni araç elinizin altında.