Kapat
Anasayfa 73 0

2.Bootstrap Nedir? Nasıl Kullanılır?

Bootstrap nedir? Ne işe yarar? Neler yapabiliriz? Bootstrap ile ölçeklendirme ve hizalama nasıl gerçekleştirilir? Bütün bu sorularımıza cevap niteliğinde olan içerik daha önce sizlerle paylaşmış olduğum içeriğin devamı şeklindedir. Eğer okumadıysanız, içeriğin ilk bölümü için lütfen tıklayınız.

Bootstrap ile Mobil Uyumluluk (Responsive)

Web sitesini tasarlamaya en yaygın kullanılan büyük çözünürlüklere sahip cihazlarla başlarız. Daha sonra bu içeriğin makul boyutlarla diğer cihazlarda düzgün ve anlaşılır görünmesini sağlarız. Buna mobil uyumluluk (responsive) denilmektedir. Bootstrap, daha önce sizinle paylaştığım içerikteki ölçeklendirme konusunda gördüğümüz class isimlerini farklı cihazlar için uyarlar.

col-md-1, bizler için medium device (ortalama boyuttaki cihazlar) üzerinde 1 birimlik yer ayırdığımızı ifade eder. col-md-6 ise satırın yarısını kapsadığını gösterir. İki adet resim düşünülürse, solda col-md-6, sağda col-md-6 içinde iki resim var. Bilgisayar ortamında yan yana duruyor. Peki bu, küçük bir telefonun dikey ekranında görüntülenirse ne olur? Bootstrap otomatik olarak col-md-6 classını tam ekran genişliğine sığdırır. Yani bir sınıf ismi vererek iki cihaza göre adapte edilmiş olunur. Bu durum büyük bir zaman tasarrufu sağlar. Peki ya resimlerin mobilde de yan yana kalmasını istiyorsak ne yapmalıyız? Aslında kulağa zor gibi gelse de, oldukça basit. Eğer 2 sütun tüm cihazlarda yan yana dursun istiyorsanız col-md-6 yerine, doğrudan ve sadece col-6 yazmanız gerekmektedir. 

Mobil uyumluluk adına sütunları temsil eden pek çok class vardır:

col-*, col-sm-*, col-md-*, col-lg-*, col-xl-*

* ile belirtilen alanlarda 12’ye kadar numara verilir. Böylece bir hücrenin hangi cihazda kaç birim yer kapladığına karar verilebilir. 

Bileşenler (Components)

Bir web sitesine baktığınızda ne görüyorsunuz? Metinlerden oluşan tipografiler, resimler, butonlar, menüler, uyarı mesajları, akordiyon içerikler, tab içerikler… İşte tüm bunlar aslında bir web sitesinin bileşenleridir. Bootstrap componentleri size zengin ve kullanışlı yapılar sunar. Bunları kolayca özelleştirebilirsiniz.

Alerts (Uyarılar): 

Kullanıcılara, dikkatleri üzerine çekecek bir uyarı alanı gösterir. Bunlar aslında durum bildirileridir. Varsayılan 8 biçimi vardır.

Breadcrumb / Sayfalama Navigasyonu:

Bu bileşeni ekmek kırıntıları gibi düşünebilirsiniz. Hansel ve Gretel hikayesini bilirsiniz. Geçtikleri yolu kaybetmemek için ekmek kırıntıları bırakırlar. Sayfalarda gezinirken, kullanıcıların hangi sayfa hiyerarşisi içinde bulunduklarını buradan gösterebiliriz. Aslında bir navigasyon menüdür.

Butonlar:

Varsayılan olarak 9 farklı biçimi vardır. Aslında butonlar da uyarı mesajlarında olduğu gibi vurgulama amacı ve ara yüze uygun olarak çeşitli sınıflara ayrılır. Primary ve Secondary; içerikler altında en sık kullanılan biçimlerdir. Sayfanızda birer primary ve secondary buton tanımı yapmak ve bu standarta uymak faydalı olacaktır. Bu sayede kullanıcılar yönlendirmenin yerini ve biçimini kolayca fark edeceklerdir.

Kartlar (Cards):

Bootstrap kartları zengin içerikler oluşturmak için kilit öneme sahiptir. Sebebi; resim, başlık (heading), paragraf ve buton içermesidir. Sonuçta, zengin bir içerik de tam olarak bu elemanlardan oluşur. Kartların pek çok farklı stille kullanılması mümkündür. 

Daha fazlası için GencProgramci ziyaret edebilirsiniz…

[Toplam: 1   Ortalama: 5/5]
Avatar

Merve Kibir {Merve Kibir}