Bootstrap v5 İle Tasarım Teknikleri
Bootstrap Nedir?
İçerisinde HTML, CSS ve JavaScript kütüphaneleri barındıran bir arayüz geliştirme kütüphanesidir.
Bootstrap Kullanmanın Avantajları İçerisindeki hazır kütüphaneler ile kolay, hızlı ve belirli bir standart çerçevesinde Responsive (Duyarlı) arayüz tasarımları yapmaya imkan sağlamaktadır.
Tarayıcı ve Cihaz Desteği Bootstrap v5, tüm büyük tarayıcıların (Google Chrome, Firefox, Safari ve Edge) ve platformların en son, kararlı sürümlerini destekler.
Bootstrap'ın HTML5 Sayfalarına Eklenmesi Bootstrap'ın bir html sayfasına dâhil edilebilmesi için 2 (iki) yöntem kullanılabilir. Birincisi, Bootstrap dosyalarını yerel kaynak olarak eklemek. İkincisi ise dış kaynak olarak bir CDN servisinden faydalanılabilir. Bootstrap özellikleri elementlerin "class" tanımına eklenerek kullanılır.
Layout (Düzen) Sistemi
Layout (Düzen) sistemi Bootstrap’ın ana iskeletini oluşturan bir yapıdır.
Breakpoints (Kesme Noktaları)
Responsive (duyarlı) bir tasarımın web tarayıcıda nasıl davranacağını belirleyen özelleştirilebilir genişlikler olarak tanımlanabilir ve duyarlı tasarımın en önemli yapı taşıdır. Her bir kesme noktası 12'lik ızgara sisteminden oluşmaktadır.
Containers (Kapsayıcılar)
Containers (Kapsayıcılar), web sayfasını belirli bir cihaz veya görünüm alanı içerisine barındıran ve hizalayan bir yapıdır. Bootstrap’ta “<body>” etiketi içerisinde yer alan tüm elementler bir container (kapsayıcı)<div> içerisinde yer almalıdır.
Grid (Izgara)
Satır ve sütunlardan oluşan flexbox ile geliştirilmiş Layout (Düzen) sisteminin bir parçasıdır. Bu sistemde satıları tanımlamak için row, sütunları tanımlamak için ise col css tanımı kullanılır. Her bir satırda toplam 12 adet sütun bulunmaktadır.
Typography (Tipografik Stiller)
Bootstrap içerisinde yazı tipi (font) başlık (<h>), link (<a>), listeler (<ol> ve <ul>) vb. birçok html elementine ait css kodları hazır bulunmaktadır. Bu kodlar belirtilen elementleri Bootstrap standartlarına göre yeniden biçimlendirir. Bu kodların bütünü ise Bootstrap tipografisini oluşturmaktadır.
Headings (Başlıklar <h1>... <h6>)
Başlık(<h1>... <h6>) etiketleri Bootstrap tarafından yazı tipi, yazı boyutu, kalınlık gibi stil özellikleri yönünden Bootstrap tipografisi çerçevesinde yeniden biçimlendirilmektedir.
Yazı ve Arka Plan Renkleri
Web sayfası içerisindeki yazıları vurgulamak, ön plana çıkarmak, yönlendirme sağlamak ve bilgi vermek için renklerden faydalanılabilir. Bootstrap bu ihtiyaçtan yola çıkarak kendi içerisinde bir renklendirme sistemi oluşturmuştur. Böylelikle metinler istenen amaca uygun şekilde oldukça kolay bir şekilde biçimlendirebilir.
Tables (Tablolar)
Bootstrap klasik html tabloları daha estetik, okunabilir ve responsive bir yapıya kavuşturmaktadır. Bootstrap ’da tablolar üzerindeki kullanıcı deneyimini iyileştirmek ve tabloların okunabilirliğini arttırabilmek için kullanılan tablo ve satır tasarımları bulunmaktadır.
Striped (Zebra) Tablo
Striped (Zebra) tablo, “<table>” etiketinin “class” tanımına eklenen “table-striped” ifadesi ile kullanılır. Striped (Zebra) tablolarda satırlardan biri açık biri koyu tonda renk kullanılarak oluşturulur. Böylelikle satırlar daha kolay görülür ve okunur bir hâle gelir.
Hoverable (Mouse'a Duyarlı) Tablo
Hoverable (Mouse’a Duyarlı) tablo, “<table>” etiketinin “class” tanımına eklenen “table-hover” ifadesi ile kullanılır. Hoverable (Mouse’a Duyarlı) tablolarda mouse imlecinin üzerinde bulunduğu satır kontrast renkle renklendirilir.
Bordered (Kenarlıklı) Tablo
Bordered (Kenarlıklı) tablo, “<table>” etiketinin “class” tanımına eklenen “table-bordered” ifadesi ile kullanılır. Bordered (Kernarlıklı) tablolarda, satır ve sütunlarda dâhil olmak üzere tablonun tamamına kenarlık eklenir.
Responsive (Duyarlı) Tablo
Responsive (Duyarlı) tablo, “<table>” elementini içine alan bir “<div>” elementinin “class” tanımına eklenen “table-responsive” ifadesi ile kullanılır. Tabloların her türlü cihaz ya da ekran boyutunda elverişli bir şekilde görüntülenmesini sağlar.