Web tasarımını öğrenmek mi istiyorsunuz? HTML ve JavaScript hatta CSS öğrenmek sizi zorluyor mu? Ya da bütün bunlarla uğraşmak için zamanınız yok mu? Doğru yerdesiniz.
blogveri.blogspot.com olarak yepyeni bir makale dizisiyle sizlerleyiz.
Karşınızda günümüzün en vazgeçilmezi front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak nasıl bişey olduğunu ve nasıl işe yarayacağını anlatmaya çalışacağız, bir HTML iskeleti ile örneğimizi oluşturacağız
Birçok yazılım dilinde olduğu gibi web tasarımında da yazılımı hızlandırmak için belirli iskelet yapılar mevcut.
Bir ilkokul öğretmeni olduğunuzu varsayın. Okumayı ve yazmayı öğretmeniz gereken 5 adet sınıf olduğunu öngörün. Bu sınıfların her birine teker teker gidip, 5 kere aynı şeyleri anlatıp tüm öğrencilere okumayı ve yazma öğretebilirsiniz. Ya da okuma-yazma öğreten bir CD satın alıp tüm sınıflardaki öğrencilere bu eğitim CD’sini izletebilir. Böylece yine tüm öğrenciler okumayı ve yazmayı öğrenir, siz de boşuna efor harcamamış olursunuz.
İşin programlama tarafında bu yapılara framework, yani web tasarım iskeleti 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/
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.
İşte örnek bir yapı :
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.
blogveri.blogspot.com olarak yepyeni bir makale dizisiyle sizlerleyiz.
Karşınızda günümüzün en vazgeçilmezi front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak nasıl bişey olduğunu ve nasıl işe yarayacağını anlatmaya çalış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 yazılımı hızlandırmak için belirli iskelet yapılar mevcut.
Bir ilkokul öğretmeni olduğunuzu varsayın. Okumayı ve yazmayı öğretmeniz gereken 5 adet sınıf olduğunu öngörün. Bu sınıfların her birine teker teker gidip, 5 kere aynı şeyleri anlatıp tüm öğrencilere okumayı ve yazma öğretebilirsiniz. Ya da okuma-yazma öğreten bir CD satın alıp tüm sınıflardaki öğrencilere bu eğitim CD’sini izletebilir. Böylece yine tüm öğrenciler okumayı ve yazmayı öğrenir, siz de boşuna efor harcamamış olursunuz.
İşin programlama tarafında bu yapılara framework, yani web tasarım iskeleti 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.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.
