Ders 1 : Bootstrap nedir?

Vatanay Özbeyli Bootstrap

BootstrapWeb tasarımını öğrenmek mi istiyorsunuz? CSS ve JavaScript hatta HTML öğrenmek sizi zorluyor mu? Ya da bütün bunlarla uğraşmak için zamanınız yok mu? Doğru yerdesiniz.

Adobewordpress olarak yepyeni bir makale dizisiyle sizlerleyiz.

Karşınızda günümüzün öne çıkan front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak ne olduğu ve ne işe yaradığını konuşacağız, bir HTML iskeleti ile örneğimizi oluşturacağız.

Bootstrap nedir?

Birçok yazılım dilinde olduğu gibi web tasarımında da süreci hızlandırmak için belirli iskelet yapılar mevcut.

Bir ilkokul öğretmeni olduğunuzu varsayın. Okuma-yazmayı öğretmeniz gereken 5 adet sınıf olduğunu düşünün. Bu sınıfların herbirine tek tek gidip, 5 kere aynı şeyleri anlatıp tüm öğrencilere okuma-yazma öğretebilirsiniz. Ya da okuma-yazma öğreten bir CD satın alıp tüm sınıflardaki öğrencilere bu eğitim CD’sini izletebilirsiniz. Böylece yine tüm öğrenciler okuma-yazma öğrenir, siz de boşuna efor harcamamış olursunuz.

İşin programlama tarafında bu yapılara framework, yani iskelet denir.  Bootstrap ise an itibariyle dünyanın en popüler front-end (ön yüz) iskeletidir.

Kullanmak için tek yapmanız gereken Bootstrap’in web sayfasından son versiyonu yüklemek ve tanımlamalarınızı HTML, PHP, ASPX ya da diğer dosyalarınız içinde göstermek.

Yapımız şu şekilde :

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Neden Bootstrap kullanmalıyız?

Bunu bir zorunluluk olarak düşünmemeliyiz. Ancak Bootstrap kadar güçlü bir altyapıya sahip değilsek ve daha iyi bir alternatifimiz yoksa bu soruyu kendimize sormalıyız.

Bootstrap’in sunduğu büyük avantajlardan 3 tanesini tanıyalım.

Önişlemci desteği

Bootstrap, Less ve Sass gibi popüler CSS önişlemcilerini desteklemekte.

Tek Framework ile Tüm Cihazlara Hükmedin

Bootstrap ile hazırladığınız tasarımlar her tip cihazda sorunsuz olarak çalışmakta. İşte bu yüzdendir ki Responsive ile Bootstrap kavramları yanyana çok kez kullanılmakta.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #28

Kapsamlı Kaynak

Bootstrap hakkında binlerce makale ve anlatım mevcut. Ayrıca yapımcıların hazırladığı resmi kaynaklar ve örnekler de fazlasıyla doyurucu. Hal böyleyken işiniz daha da kolaylaşmakta.

Desteklediği Tarayıcılar

Bootstrap popüler tüm tarayıcılarda çalışmakta.

Bootstrap Compability

Download Bootstrap

Bu makaleleri hazırlarken Bootstrap’in en güncel versiyonu 3.1.1’idi. O yüzden yazılarımızı oluştururken bu versiyonu temel alacağız. Burayı tıklayarak 3.1.1 versiyonunu indirebilirsiniz ya da aşağıdaki bağlantıdan güncel versiyona erişebilirsiniz.

Boostrap’i indir

Template (Şablon Yapı)

Bootstrap’i download ettiyseniz bir örnek hazırlayalım. Frameworkü kullanmamız için ilk olarak head tagı içerisinde CSS dosyalarımızı tanımlamamız gerekiyor. Beraberinde istersek Internet Explorer ile uyumu sağlayan Respond ve Shim dosyalarını da bu alanda ekleyebiliriz. Body tagını kapatmadan önce de ilk jQuery, sonra da Bootstrap.JS’yi tanımlayarak işlemi tamamlıyoruz.

İşte örnek bir yapı :

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Taslağı ~ adobewordpress.com</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE8 HTML5 ve media sorguları için Shim ve Respond JS dosyalarını kullanalım -->
    <!-- UYARI: Eğer dizini file:// şeklinde gösteriyorsanız Respond.js çalışmayacaktır -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Merhaba dünya!</h1>
    <p>Adobewordpress.com ile Bootstrap öğrenmeye devam ediyoruz.</p>
    <!-- jQuery (Bootstrap'in JavaScript kodları için gerekli) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Bootstrap için ihtiyaç duyulan tüm JS kodlarımız aşağıdaki dosyada -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kapanış

Bir sonraki dersimizde Bootstrap’in 12’lik grid yapısından bahsedeceğiz. Böylece responsive web tasarımının en kolay yapısı ile tanışmış olacağız. Şimdilik bu kadar. Hoşçakalın.