Bootstrap 4- Web Tasarımı

Web Mobil Yazılım

Bootstrap 4- Web Tasarımı

Web yazılım dünyası geliştikçe teknolojik yenilikler geçtiğimiz her güne göre farklılaşmaya başladı. Farklı cihazların hayatımıza girmesiyle web tasarımı; düşüncesi ve dinamiği farklı fikirler ekseninde yeni web geliştirmelerin ilk çaldığı kapı olmaya başladı. Bootstrap teknolojisi ile geliştirilen uygulamaların daha çok responsive odaklı olması bu teknolojinin temelini oluşturuyor.

Bootstrap teknolojisi, web üzerinde mobil projelerinizi daha hızlı ve kolay bir şekilde geliştirebileceğiniz, responsive tasarım odaklı, kullanacağınız; tipografi, formlar, butonlar, tablolar, navigasyon gibi birçok seçeneğin yanında, isteğe bağlı JavaScript eklentileri için HTML ve CSS tabanlı tasarım şablonlarını kullanabileceğiniz front-end framework platformudur.

Bootstrap teknolojisi, responsive tasarıma sahip mobil web site ve uygulamalarının geliştirilmesini kolaylaştırmak için HTML, CSS ve JavaScript üzerine kurulmuştur.

 

Bootstrap 4

Bootstrap 4, Bootstrap’in en yeni sürümüdür. Yeni bileşenlerle birlikte daha hızlı ve daha responsive bir yapıyı sunmaktadır. Bootstrap 4’deki bazı yeniliklere göz atarak bu teknolojinin yeni sürümünü tanıtalım;

Bootstrap 3’te 4 grid sisteme sahipti. Bootstrap 4, 5 grid sistemine sahiptir.

Bootstrap 3’te col-md-offset-4 offset sınıfı kullanılıyordu. Bootstrap 4’t ise offset-4 kullanılıyor.

Bootstrap 3’te responsive görseller için .img-responsive sınıfı kullanılıyordu. Bootstrap 4’te .img-fluid kullanılıyor.

Responsive Arayüz Tasarımı

Günümüzde web sitesi ve uygulamalara ulaşmak için kullandığımız cihaz sayısı oldukça fazlalaştı. Artık her cihaz günden güne web yazılım sektörünün yapılacaklar listesine eklenen bir görev ögesi olmaya başladı. Responsive tasarım, bir web tasarımcısının tasarladığı web sitesinde, kullanılan cihazın türüne göre yanıt veren veya yeniden boyutlandıran bir tasarım şeklidir. Masaüstü, tablet, akıllı telefonlar gibi her türlü cihazda “duyarlı” davranır. Responsive tasarımın temel amacı, tek bir siteye sahip olarak, farklı boyutlarda ki cihazlarda görüntülendiğinde farklı yanıtlar veren farklı ögeler içererek arayüz tasarımını bütünleştirmektir.

Responsive arayüz tasarım ile oluşturulan web siteleri, fluid-grid kullanır. Tüm sayfa ögeleri orantılıdır. Üç sütuna sahipseniz bu üç sütunu farklı oranlarda kullanılabilir. Örneğin Sütun 1 %50, Sütun 2 %30 ve Sütun 3 %20 şeklinde dağıtılabilmektedir. Görseller ve medya gibi ögeler nispeten yeniden boyutlandırılır. Bu şekilde bütün ögeler kendi sütununda veya ilgili tasarım ögesinde kalarak düzeni bozmadan bir bütün olarak sizlere sunulur.