Bootstrap Nedir ve Neler Yapılabilir?

Bootstrap Nedir ve Neler Yapılabilir?

Bootstrap front-end kodlamayı kolaylaştıran ve hızlandıran ücretsiz bir framework’tür. İçerisinde HTML, CSS ve JS kullanılarak geliştirilen yazı biçimleri, formlar, butonlar, tablolar, menüler,modal yapıları vb. pek çok yapı bulunmaktadır. Bu yapıları yazılımcı çok kolay bir şekilde kendi projelerine ekleyip kullanabilir. En büyük artılarından bir tanesi responsive tasarıma sahip olmasıdır.

Responsive Tasarım Nedir?

Geliştirilen web sitesinin, görüntülendiği tüm cihazlarda otomatik olarak en uygun görünümü almasını sağlar. Mobil uyumluluğun çok daha ön plana çıkmasıyla birlikte daha fazla önem kazanmıştır. Sitenize telefondan veya tabletten bağlanan kişilerin sitenizde kolayca gezinebilmesi, yazıları rahatça okuyabilmesi için responsive tasarım kullanmanız gereklidir.

Neden Bootstrap Tercih Edilmeli?

  1. Basit düzeyde HTML ve CSS bilgisi olan herkes kullanabilir.
  2. Responsive yapısı ile telefon, tablet ve bilgisayarlarda sayfaların kolayca görüntülenmesini sağlar.
  3. Mobil öncelikli yapısı vardır. Yani önceliği mobil aygıtlara vermektedir. Bu da kullanılan tüm yapıların diğer cihazlarda sorun yaşamadan görüntülenmesini sağlar.
  4. Tüm modern tarayıcılarla uyumludur. Sayfalar Chrome, Firefox, Internet Explorer, Safari, Opera tarayıcılarının tümünde sorunsuz şekilde görüntülenir.

 Nasıl Kullanırım?

İki şekilde projenize dahil edebilirsiniz. Kendi sitesinden dosyaları indirerek sunucunuza yükleyip bu dosyaları proje içerisinde kullanabilirsiniz. Eğer dosyaları indirmek istemiyorsanız bulut teknolojisinden faydalanabilirsiniz. MaxCDN kullanacağımız CSS ve JS dosyalarını barındırmakta. Ayrıca jQuery için de bu servisi kullanabiliriz.

Yukarıdaki örnekte verdiğimiz linkleri kullanarak projeye dahil edebilirsiniz. Bulut teknolojisi kullanmanın birçok avantajı bulunmakta. Örneğin pek çok kullanıcı daha önce ziyaret ettikleri sitelerden MaxCDN ile kullandığımız dosyaları tarayıcılarına indirmiş oluyorlar. Tarayıcı önbelleğinde tutulan bu dosyalar, siteniz ziyaret edildiğinde sayfaların çok daha hızlı bir şekilde açılmasını sağlayacaktır. Bir başka avantaj ise bulut teknolojisinin kullanıcının bağlandığı en yakın sunucudan dosyaları yüklemesidir. Bu sayede farklı yerlerden siteye erişen kullanıcılar daha kısa sürede siteyi görüntüleyebilir.

Örnek Sayfa Yapısı

Üç adımda basit düzeyde bir sayfa oluşturabiliriz.

  1. HTML5 sayfası oluşturmalıyız. Sayfanın başında kullandığımız doctype ifadesinde sayfanın HTML5 ile oluşturulduğunu belirtmeliyiz.
  2. Mobil öncelikli olduğunu belirtmiştik. Bu özelliği kullanmak için bir meta etiketi eklememiz gerekiyor.
  3. Sitenin içerik görüntülenen bölümü container sınıfı içerisine alınmalıdır.

Bu adımları teker teker nasıl kullanacağımız inceleyelim. Öncelikle HTML5 sayfası oluşturalım.

Ardından mobil için gerekli meta etiketini sayfaya ekleyelim.

meta etiketleri head etiketi arasına yazılır. Belirttiğimiz iki ayar bulunmakta.

  1. width=device-width ile sayfa genişliğinin kullanılan cihazın ekran genişliğine eşit olmasını istiyoruz.
  2. initial-scale=1 ile sayfa tarayıcıda ilk kez yüklendiğinde yakınlaştırma seviyesini belirtmiş olduk.

Son olarak container sınıfını ekleyerek sayfamızın taslağını oluşturuyoruz. Responsive yapıda, sabit genişliğe sahip olması için container‘ı kullanıyoruz. Tüm genişliği kapsayan yapıda kullanmak için ise container-fluid‘i kullanmalısınız. Ayrıca container sınıfı sayfada sadece bir kez kullanılmalıdır ve iç içe iki container sınıfını kullanamazsınız.

İlk örnek container sınıfıyla oluşturulmuştur.

Son örnekte ise container-fluid sınıfını kullandık.

İki örneği de kendi tarayıcınızda çalıştırdığınızda aradaki farkı net bir şekilde görebilirsiniz. İlk örnekte container sınıfında tanımlı olan genişlik değeri kullanılır ve başlık daha içeride görünecektir. İkinci örnekte ise ekranın genişlik değeri baz alınır ve başlık ekranın sol köşesine daha yakın görünecektir.

bootstrap nedir

Etiketler:

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: