Web tasarımını öğrenmek mi istiyorsunuz? CSS ve JavaScript hatta HTML öğrenmek sizi yoruyor mu? Yada bütün bunlarla uğraşmak için yeterli zamanınız yok mu? Doğru yerdesiniz.
CodeMareFi olarak yepyeni bir makale ile sizlerleyiz.
Karşınızda günümüzün öne çıkan front-end framewordklerinin en popüler; Bootstrap. Bu makalemizde Bootstrap'in tam olarak ne olduğunu ve ne işe yaradığını konuşacağız, bir HTML iskeleti ile örneğimizi oluşturacağız.
Template (Şablon Yapı)
Bootstrap'i download ettiysenz bir örnek hazırlayalım. Frameworkü kullanmamız için ilk olarak head tagı içerisine CSS dosyalarımızı tanımlamamız gerekiyor. Beraberinde istersek Internet Explorer ile uyum sağlayan Respond ve Shim dosyalarını da bu alanlara dahil edebiliriz. Body tagını kapatmadan önce de ilk JQuery, sonrada Bootstrap.JS'yi tanımlayarak işlemi tamamlıyoruz.
İşte örnek bir yapı:
CodeMareFi olarak yepyeni bir makale ile sizlerleyiz.
Karşınızda günümüzün öne çıkan front-end framewordklerinin en popüler; Bootstrap. Bu makalemizde Bootstrap'in tam olarak ne olduğunu 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. Yada okuma-yazma öğreten bir CD satın alıp tüm sınıflardaki öğrencilere bu eğitim CD'ini izletebilirsiniz. Böylece yine tüm öğrenciler okuma-yazma öğrenir, siz de boşuna efor harcamamış olursunuz.
İşin programlama tarafından da bu yapılara framework, yani iskelet denir. Bootstrap ise an itibari ile 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ımlayalı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 cihazlarda sorunsuz olarak çalışmakta. İşte bu yüzdendir ki Responsive ile Bootstrap kavramları yanyana çok kez kullanılmaktadır.
Kapsamlı kaynak
Bootstrap hakkında binlece makale ve anlatım mevcut. Ayrıca yapımcıların hazırladığı resim kaynaklar ve örnekler de fazlası ile doyurucu. Hal böyleyken işiniz daha kolaylaşmakta.
Desteklediği Tarayıcılar
Bootstrap popüler tüm tarayıcılarda alışmakta.
Download Bootstrap
Bu makaleyi 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.
Bootstrap'i İndirTemplate (Şablon Yapı)
Bootstrap'i download ettiysenz bir örnek hazırlayalım. Frameworkü kullanmamız için ilk olarak head tagı içerisine CSS dosyalarımızı tanımlamamız gerekiyor. Beraberinde istersek Internet Explorer ile uyum sağlayan Respond ve Shim dosyalarını da bu alanlara dahil edebiliriz. Body tagını kapatmadan önce de ilk JQuery, sonrada 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ğı ~ CodeMarefi.blogspot.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>CodeMarefi 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>
Çok güzel anlatım olmuş teşekkürler. Merak ediyorum acaba dersleri gelecek mi?
YanıtlaSil