Bootstrap 4 Input Gruplar

Bootstrap 4 Input Grupları

Bootstrap4 input grupları birden fazla input elemanını bir arada tutmak ve düzenli bir yapı şeklinde kullanıcıya sunmak için hazırlanmıştır. Burda aynı düzende bulunan birden fazla textbox'dan bahsedilmez. Bu elemanlar genelde bir input elemanı ve onu belirten farklı renkteki bir buton veya etiket nesnesi olarak görüntülenirler. Anlatım içerisinde bulunan örnekleri uyguladığınızda tam olarak nasıl bir sonuç verdiğiniz göreceksiniz.
Gelelim ilk örneğimize, basit bir input grup oluşturmak için aşağıdaki kodları kullanmanız gereklidir.
<div class="input-group"> <input type="text" class="form-control" placeholder="Kullanıcı Adınız"> <div class="input-group-append"> <span class="input-group-text">@ornekmail.com</span> </div> </div> Görüldüğü gibi en dışta bulunan div elemanına input-group, bu elemanın içinde bulunan etiket gibi kullanılan sırasıyla div elamanına input-group-append ve span elemanına input-group-text class özellikleri verilerek yapı oluşturulur.
input elemanı grubun başında olduğunda içte bulunan div elemanına input-group-append,
input elemanı grubun sonunda olduğunda ise içte bulunan div elemanına input-group-prepend,
özellikleri verilmesi gerekir.

Etiket şeklinde görünen bölüme checkbox ya da radio HTML nesneleri de eklenebilir.
Örnek: <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input type="text" class="form-control"> </div> Hemen üstte bulunan kod da input-group-text elemanının içine yazı yazmak yerine bir checkbox nesnesi yerleştirmek yeterlidir.

Çoğu bootstrap elemanında olduğu gibi grup elemanlarının da boyutları değiştirilebilir.
Küçük input elemanı için => input-group-sm,
büyük input elemanı için => input-group-lg,
class özelliklerini en dışta bulunan div'e eklemek yeterli olacaktır.
Örnek: <div class="input-group input-group-lg"> ...... </div>

Butonlu Input Groupları

İçinde buton bulunan bir input group oluşturmak için input-group-prepend özelliğine sahip div'in içine buton elemanı yerleştirilir.
<div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-primary" type="button">Gönder</button> </div> <input type="text" class="form-control" placeholder="Kullanıcı Adı Girin.."> </div>

Input Group Select ve File elemanlarını

Select ve input file elemanları input group içinde kullanıldığında serbest kullanıma göre çok daha profesyonel bir görünüme sahip olurlar. select elemanı için custom-select ve file elemanı için de custom-file ve custom-file-input class özellikleri eklenerek uygun görünüm oluşturulur.
Aşağıdaki kod bloğunda bu elemanların kullanımı ile ilgili bir örnek verilmiştir. <div class="input-group mb-2"> <div class="input-group-prepend"> <label class="input-group-text">Şehirler</label> </div> <select class="custom-select"> <option selected>Seçim Yapın</option> <option value="Erzincan">Erzincan</option> <option value="Muğla">Muğla</option> <option value="Tekirdağ">Tekirdağ</option> </select> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Dosya Ekle</span> </div> <div class="custom-file"> <input type="file" class="custom-file-input"> <label class="custom-file-label">Dosya Seçin</label> </div> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com