Bootstrap ile Duyarlı Web Tasarımı

Web sitelerine erişebilen cihazların farklı ekran boyutlarına sahip oluşu, arayüz tasarmında birtakım sorunları da beraberinde getirdi.

Önceleri masaüstü ve mobil cihazlar için ayrı ayrı yapılan arayüz tasarımınları yerini Duyarlı Web Sitelerine bıraktı.

Duyarlı Web Siteleri, ekran görünür alanına göre sayfadaki öğeleri yeniden konumladıran bir yapının kullanılabilmesine olanak sağladı.

Bu sayede farklı cihazlar için ayrı tasarım yapılma dönemi sona ermiş oldu.

Bootstrap, mobil öncelikli olarak Duyarlı Web Siteleri geliştirmeyi kolaylaştıran bir HTML5 çatısıdr.

Bootstrap JavaScript (JS) kütüphanelerinden ve CSS tanımlamalarından oluşur.

Açık kaynak kodlu bir proje olan Bootstrap, birçok geliştirici tarafından tercih edilen popüler bir çatıdır.

Bootstrap'in çalışma mantığı diğer HTML5 çatıları ile paralellik gösterir.

Çalışmanın yapıldığı HTML dosyasından JS ve CSS dosyalarına referans verilerek bağlantı sağlaması yeterlidir.

Bootstrap çekirdek dosyaları, İnternet üzerindeki depolardan kullanılabileceği gibi, kişisel bilgisayarınızın sabit diskine kaydedilerek de kullanılabilir.

Dosyalara referans verilmesiyle tamamlanan kurulum işleminden sonra ilk yapılması gereken Duyarlı Web Sayfası Şablonu'nun tasarlanmasıdır.

Hazırlancak şablon daha sonra Web sitesinin iskeletini oluşturacak, farklı arayüz şablonlarına zemin teşkil edecektir.

Gerek şablon, gerekse de şablondan üretilen dosyalar, İnternet tarayıcısı üzerinde test edilir.

Bu test işlemi sırasında, İnternet tarayıcısının pencere boyutları değiştirilerek farklı cihaz ekranları simüle edilmiş olur.

Bu işlem İnternet tarayıcının içeriğini yakınlaştırarak (zoom) da gerçekleştirilebilir.

Yapılan çalışmaların farklı İnternet tarayıcılarda test edilmesi önemlidir.

Mobil cihazlardaki İnternet tarayıcıları ile masaüstü sistemlerdeki İnternet tarayıcılarının davranışları kimi zaman farklılıklar içermektedir. Bu farklılıklar sonucunda yaşanabilecek sorunları en aza indirmek için test işlemleri ilgili cihazın kendi içinde de yapılabilir.

Bootstrap, birçok farklı bileşenin yer aldığı örnek tasarımları da kendi Web sitesinde bulundurur. Bu örnek çalışmalara rahatlıkla erişilebilir ve bir şablon dosya olarak kullanılabilir.

Örnek Web sayfalarının şablon dosya olarak kullanılabilmesi için İnternet tarayıcılarının yardımıyla ilgili sayfanın kayıt edilmesi gerekir.

Kayıt işlemi sırasında dikkat edilmesi gereken nokta Web sayfasının tüm bileşenleri ile kayıt edilmesidir.

Kayıt işlemi gerçekleştirildikten sonra ana HTML dosyası üzerinde istenilen değişiklikler gerçekleştirilebilir ve kopyaları çıkartılarak Web sitesinin diğer sayfaları bu şablon temel alınarak oluşturulabilir.