Ana içeriğe geç

Düzenler

Formlar

Her bir form alanı grubu bir elementi içinde yer almalıdır. CoreUI for Bootstrap, elementi için varsayılan bir stil sağlamaz, ancak varsayılan olarak sunulan bazı güçlü tarayıcı özellikleri vardır.

ipucu

Tarayıcı formlarına yeni misiniz? Mevcut niteliklerin tam listesi ve genel bir bakış için MDN form belgelerini gözden geçirmeyi düşünün.

  • Bir içindekiler varsayılan olarak type="submit" olarak ayarlanır, bu nedenle spesifik olmaya çalışın ve her zaman bir type ekleyin.

CoreUI for Bootstrap, hemen hemen tüm form kontrollerimize display: block ve width: 100% uygular, bu nedenle formlar varsayılan olarak dikey olarak yığılacaktır. Ek sınıflar, bu düzeni her form için değiştirmenize olanak tanır.

Araçlar

Margin utilities, formlara yapı eklemenin en kolay yoludur. Etiketlerin, kontrollerin, isteğe bağlı form metninin ve form doğrulama mesajlarının temel gruplamasını sağlarlar.

bilgi

Tutarlılık için form boyunca tek bir yön kullanarak margin-bottom yardımcı programlarına sadık kalmanızı öneririz.

Formlarınızı ler, ler veya neredeyse herhangi bir başka öğe ile istediğiniz gibi oluşturabilirsiniz.

Örnek etiket

Diğer etiket

Form ızgarası

Daha karmaşık formlar, ızgara sınıflarımızı kullanarak oluşturulabilir. Çoklu sütunlar, farklı genişlikler ve ek hizalama seçenekleri gerektiren form düzenleri için bunları kullanın. $enable-grid-classes Sass değişkeninin etkinleştirilmesi gerekir (varsayılan olarak açıktır).

Ara

Ara modifier sınıflarını ekleyerek, hem yatay hem de dikey yönde ara genişliği üzerinde kontrol sahibi olabilirsiniz. Ayrıca $enable-grid-classes Sass değişkeninin etkinleştirilmesi gerekir (varsayılan olarak açıktır).

Daha karmaşık düzenler, ızgara sistemi ile de oluşturulabilir.

Önemli Not

tehlike

Bir formun düzgün görünmesi için doğru CSS sınıflarını eklemek esastır.

E-posta



Şifre



Adres



Adres 2



Şehir



Eyalet

Seçin...
...



Posta Kodu






Beni hatırla




Giriş yap

Yatay form

Gridi kullanarak yatay formlar oluşturun; form gruplarına .row sınıfını ekleyin ve etiketlerinizin ve kontrollerinizin genişliğini belirtmek için .col-*-* sınıflarını kullanın. Ayrıca, etiketlerinizi dikey olarak ortalamak için mutlaka `lerinize .col-form-label` ekleyin.

Bazen, mükemmel hizalamayı sağlamak için margin veya padding yardımcı programlarını kullanmanız gerekebilir. Örneğin, yığın halinde olan radyo giriş etiketlerimizdeki padding-top'u kaldırdık, böylece metin tabanı daha iyi hizalansın.

E-posta





Şifre





Radyo




İlk radyo





İkinci radyo





Üçüncü devre dışı radyo









Örnek onay kutusu


Giriş yap

Yatay form etiket boyutlandırması

.form-control-lg ve .form-control-sm'nin boyutunu doğru bir şekilde takip etmek için veyalerinizde .col-form-label-sm veya .col-form-label-lg kullanmayı unutmayın.

E-posta

E-posta

E-posta

Sütun Boyutlandırması

Daha önceki örneklerde gösterildiği gibi, ızgara sistemimiz bir .row içinde herhangi sayıda .col yerleştirmenize olanak tanır. Mevcut genişliği eşit olarak bölerler. Ayrıca, belirli sütun sınıfları kullanarak sütunlarınızdan bir kısmının daha fazla veya daha az alan kaplamasını seçebilirsiniz; kalan .collar, geri kalanını eşit olarak böler. Örneğin, .col-sm-7.

Otomatik Boyutlandırma

Aşağıdaki örnek, içerikleri dikey olarak ortalamak için bir flexbox yardımcı programı kullanır ve sütunlarınızın sadece ihtiyaç duyduğu kadar alan kaplanmasını sağlamak için .colu .col-autoya değiştirir. Başka bir deyişle, sütun boyutunu içeriğe göre ayarlar.

İsim



Kullanıcı adı

@




Tercih

Seçin...
Bir
İki
Üç






Beni hatırla




Gönder

Bunu, boyutlara özel sütun sınıfları ile yeniden karıştırabilirsiniz.

İsim



Kullanıcı adı

@




Tercih

Seçin...
Bir
İki
Üç






Beni hatırla




Gönder

Satır içi formlar

Yanıt veren yatay düzenler oluşturmak için .row-cols-* sınıflarını kullanın. Ara modifier sınıflarını ekleyerek yatay ve dikey yönde ara elde edebiliriz. Dar mobil görünüm noktalarında, .col-12 form kontrollerini yığmaya yardımcı olur. .align-items-center form öğelerini ortalayarak .form-checkbox'ın doğru bir şekilde hizalanmasını sağlar.

Kullanıcı adı

@





Tercih

Seçin...
Bir
İki
Üç







Beni hatırla





Gönder