Bootstrap Responsive Tasarım

2016-01-20   bootstrap   responsive   navbar   Yorumlar


Bootstrap navbar gibi css bileşenleriyle; tarayıcı, tablet, mobil gibi cihazların ekran çözünürlüğüne duyarlı(ekran çözünürlüğüne göre yeniden şekillenen) görünüm sunmaktadır. Bunu sitenize sadece bootstrap-css, bootstrap-js dosyalarını ekleyerek ve navbar gibi bileşenleri kullanarak duyarlı hale getiremezsiniz. Bunun için ek olarak aşağıdaki meta etiketini head etiketleri arasına eklemeniz gerekiyor.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bu meta etiketini açıklayacak olursak,

width=device-width: Cihazın ekran genişliğini elde ediyoruz.

initial-scale: Sayfa açıldığında ne kadar zoom yapılacağını belirliyoruz. Mesela 1 diyerek gerçek boyut elde ediliyor.

maximum-scale: Kullanıcın sayfayı ne kadar zoom yapabileceğini ayarlıyor.

user-scalable=no: Kullanıcının sayfada zoom yapmasını engelliyorsunuz.

Not: Bu sitedeki header ve footer'da birer navbardır ve responsive çalışmaktadır :-)

Kaynak


Aksi belirtilmedikçe Gökhan Demir tarafından tüm içerik hakları saklıdır. Powered by Jekyll, Bootstrap, Awesome, Datatables, Highlightjs, Animatecss