Notes

Bootstrap Nedir ?
Bootstrap front end geliştiriciler arasında git gide daha da popüler olan ücretsiz bir framework’tür. Kullanımı kolaydır ve geliştiricilerin tekrar tekrar söz dizimi yazmasına gerek kalmadığı için vakitlerinden tasarruf etmelerini sağlar.

Bu framework ayrıca oldukça esnektir ve front end web sitesi geliştirme için neredeyse bütün gereksinimleri karşılar. En iyi özelliklerinden birisiyse web sayfalarının bütün ekran boyutlarında ideal biçimde çalışmasını sağlamasıdır.
Bootstrap Nedir?
Bootstrap, HTML5 ve CSS3 ile güçlendirilmiş, hazır html ve hazır css şablonları içeren ve tabiki javascript, jquery ile desteklenmiş açık kaynak kodlu bir kütüphanedir (framework). Twitter tarafından geliştirilmektedir. Tüm cihazlara uyumlu bir tasarım modellemesi yapabilmek amacı ile oluşturulmuştur.

Bootstrap, bir web sitesi için gerekli olan tüm elementleri (form ögeleri, etiketler, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, grafikler, iconlar, farklı özelliklere sahip butonlar, tablolar vb bir çok tasarım ögesini) içinde barındırır ve bu araçları kullanarak esnek bir yapı ile responsive tasarım yapmamıza imkan sağlar.

Çoğu web sitesinin birbirine benziyor olması, Bootstrap elemanlarını olduğu gibi kullanmalarından kaynaklanmaktadır. Bootstrap açık kaynak kodlu bir sistem olduğu için projemizde kullanırken kendimize göre renklendirmemiz ve şekillendirmemiz mümkündür. Bootstrap’ın bize sağladığı imkanlardan faydalanarak bir web sayfası tasarımı gerçekleştirmek bize büyük kolaylık sağlamaktadır.

Bootstrap, tasarladığımız veya tasarlayacağımız web sitesini kolay bir şekilde “responsive” yani tablet, telefon, masaüstü bilgisayar ve her türlü ekran çözünürlüğüne duyarlı olarak ayarlamamıza yarayan ücretsiz ve açık kaynak kodlu frameworktür.

Bootstrap içerisinde bir web site tasarlarken ihtiyacımız olan her faktörü düşünerek hazır hale getirilmiş ve bize bu şekilde sunmuştur. Bootstrap İçerisindeki hazır tablolar, etiketler, butonlar, açılan menüler, navigasyon bar ve daha fazlası sayesinde kolay bir şekilde responsive web sitesi yapabilmekteyiz. Aynı zamanda bu hazır element ve objelere yine Bootstrap’in içerisinde bulunan CSS kodları ile istediğimiz gibi müdahale edebilmekteyiz.

Tüm bunların yanında Bootstrap’i diğer framework ve kod kütüphanelerinden ayrı kılan özellik, grid sistemidir. Bootstrap’in grid yani ızgara sistemi sayesinde responsive web sitesi yapmak en kolaya indirgenmiştir.

Basitçe anlatmak gerekirse Bootstrap web sayfanızı eşit ölçülerde ızgaralara böler ve size eşit şekilde ayrılmış bu bölümlere istediğiniz gibi müdahale etme şansı verir. Bu sayede ekran çözünürlüğü düştükçe sayfanın konumlandırmasını istediğiniz şekilde ayarlayabilirsiniz.

Gelelim Bootstrap’in nasıl kullanıldığına. Bootstrap kullanabilmek için Bootstrap’in kendi sitesini giriş yapıp Resimde gösterilen Download butonuna tıklıyoruz.
++++++++++++++++++++++ bir ss alıdım o eklenicek

Açılan sayfada resimde gösterilen Compiled CSS and JS başlığı altındaki Download butonuna tıklıyoruz.



İndirmiş olduğumuz .rar dosyasının içindeki klasörü çalışma dosyamıza dahil ediyoruz. Bu işlemide yaptıktan sonra geriye yapılacak son bir işlem kalıyor.



Resimde gösterilmiş olan Get Started butonuna tıklıyoruz.



Açılan sayfada Starter template başlığı altındaki kodları kopyalayıp, kendi çalıştığımız metin editörüne yapıştırıyoruz.

Yapacağımız işlemler bu kadar.


Bootstrap Kullanımı
Bootstrap Kütüphanesi’ni projemize eklemek için iki yöntem bulunmaktadır. Bu yöntemlerden bir tanesi Bootstrap Download bölümünden kaynak dosyaları indirip proje dizinimize dahil etmek ve daha sonra sayfa içinden bu kodları ekleyerek çağırmak, bir diğer yöntem ise direkt olarak Bootstrap CDN üzerinden kaynak kodları projemize dahil ederek kullanmaktır.

Bootstrap CDN üzerinden ekleme:
Bootstrap’ın derlenmiş CSS ve JS dosyalarının önbelleğe alınmış sürümlerini projenize eklemek için: BootstrapCDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Derlenmiş JavaScript kullanıyorsanız, jQuery ve Popper.js‘nin CDN sürümlerini eklemeyi unutmayın.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
Bootstrap CSS Yazımı
Bootstrap ile tüm cihazlar için ayrı ayrı davranışların sergileneceği CSS kodları yazabiliriz. Bunu bir örnekler ile açıklayacak olursak:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Yukarıdaki örnekte gördüğünüz gibi @media(min-width:1200px){ … } kod satırının içine yazılan CSS kodları sadece en düşük değeri 1200px olan ekranlarda çalışacaktır.
Bootstrap Izgara Sistemi
Bootsrap kütüphanesinin bizlere sunduğu bir diğer avantaj ise Izgara Sistemi (Grid system) ‘dir. Bu sistem ekranı 12’li sistemde bölmemize imkan sağlar. Yani 1/12 veya 2/6 + 2/6 veya 3/4 + 3/4 + 3/4 + 3/4 veya 2/6 + 4/3 + 4/3 vb. Izgara sistemi sayesinde HTML kısımları farklı ekranlarda farklı yerlerde konumlandırabiliriz.

Bootstrap Grid System:
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Yukarıdaki örnekte bulunan <strong>class=”col-md-1″</strong> tanımlaması HTML div’lerin 12’lik ızgara sisteminde 12 parça halinde durmasını sağlar. Burada dikkat edilmesi gereken col-md tanımlamasının orta ölçekli cihazlar için olduğudur. Ancak sadece tek başına kullanılırsa tüm cihazlarda aktif olur. Div’lere farklı cihazlarda farklı davranışlarda bulunmasını söylemek için şu şekilde bir tanımlama yapılması gerekmektedir:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Görüldüğü üzere div’e, col-xs-12 ile küçük cihazlarda 12’lik sistemde tek parça, col-md-4 ile orta ölçekli cihazlarda 12’lik sistemde 3 parça halinde durması gerektiğini söylemiş olduk.
Neden Bootstrap?
Eğer Bootstrap kütüphanesi ile hiç tanışmadıysanız şimdi tam sırası. Kişisel deneyimlerime dayanarak, kullanmaya başladıktan kısa süre sonra adapte olacağınızı ve bir daha vazgeçmeyeceğinizi söyleyebilirim. Çünkü vazgeçmeniz için hiçbir sebep yok.

Bootstrap kütüphanesi içerisinde birçok kolaylık ve avantaj barındırıyor.

İşte Bootstrap kullanmanız için birkaç sebep:

Açık kaynak kodludur bu nedenle kolaylıkla özelleştirilebilir. Kendi çalışmalarınıza uyarlayarak dilediğiniz gibi kullanabilirsiniz.
Crossbrowser tabanı sayesinde neredeyse tüm web tarayıcılar ile uyumlu tasarımlar yapmanızı sağlar.
Günceldir, içerisinde HTML 5 ve CSS3 trendlerini barındırdığından büyük ölçüde W3C standartlarını da içerisinde barındırır.
Bootstrap kütüphane çegirdek yapısı kendiliğinden responsive (mobil uyumludur). Web siteniz için ek CSS klasları yazmanıza ve ekstra boyutlandırma yapmanıza gerek kalmaz, sadece birkaç düzenleme ile telefon, tablet gibi cihazlara uyumlu hale getirebilirsiniz.
Sağladığı birçok tasarım seçeneği sayesinde (hazır butonlar, inputlar, tablolar, renkler vb.) çalışmalarınıza hem görsel hem de işlevsel anlamda zenginlik katar.
Mobil uyumlu web sayfaları oluşturmak Google SEO konusunda da bir adım önde olmak anlamına gelir. Zira Google'ın geliştirdiği AMP teknolojisi bu konuya ne kadar önem verdiğinin bir örneği.
Oldukça istikrarlı çalışır. Hata kodları, kayma sorunları vs. yok denecek kadar azdır.
Kolay öğrenilebilir bir yapıya sahiptir. Bu sayede temel CSS ve HTML bilgisi olanlar çok çabuk adapte olabilirler.
Bootstrap Nasıl Kurulur?
Kurulum: İndirdiğiniz sıkıştırılmış dosyayı klasöre çıkartın. Daha sonra bootstrap.min.css veya bootstrap.css herhangi birini CSS klasörüne almanız yeterli, hepsi bu. Neden herhangi biri diyorum çünkü .min uzantısı sıkıştırılmıştır, içerisinde değişiklik yapmanız zaman alabilir veya karışık gelebilir.

Eğer değişiklik yapmayacaksanız doğrudan .min uzantısını kullanın. Çok gerekirse kendi stil dosyanızın içerisinden bazı klaslarda !important özelliğini kullanarak dilediğiniz kısımları özelleştirebilirsiniz.

Bootstrap Nasıl Kullanılır?
Kullanım: CSS ve isteğe bağlı JS dosyalarını sayfa içerisine çağırdıktan sonra doğrudan HTML içerisinde kullanabilirsiniz. Kullanımı oldukça basittir.

Örnek: Boş bir A4 kâğıdı düşünün. Projenizi bu A4 içerisine yazmanız gerekiyor, fakat alanı duruma göre yönetmelisiniz. Zira bazı başlıklar 20px yer alacak uzunlukta iken bazıları 70-80 px uzunlukta olacak. Bu durumda hayali bir çizgi ile aklınızdan bölümlere ayırır, nereye ne kadar uzunluk sığacak diye ölçümleme yaparsınız değil mi?
İşte Bootstrap mantığı da tam olarak böyle çalışır. Sana 12 tane bölme veriyorum, duruma göre ister 7 tanesini bir amaç için kullan, ister 12 tanesini tek amaç için. Seçim senin.

Bu örnek bir başlık olsun

Yukarıdaki cümleyi Bootstrap ızgaralarına göre yan yana yerleştirecek olsak:

col-md-1 col-md-3 col-md-2 col-md-3 col-md-3 = toplamda 12 parça yaptı. İçerik uzunluklarına göre rakamları biz belirledik ve yerleştirdik. Mobil ekrana geldiğinde eğer ekstra bir diziliş emri vermediyseniz otomatik olarak hepsi alt alta dizilecektir. Çalışma mantığı kısaca bu…

Farklı örnekler görmek için şuraya göz atabilirsiniz.

Bu arada classların “md” diye başlaması sizi şaşırtmasın oradaki anlam ekran ebatlarını yansıtır. Mesela 1920 ekranda şöyle görünsün ama telefonda da şu şekilde dizilsin maksatlıdır. Açılımları ise şöyledir:

xs = extra small screens (mobile phones)

sm = small screens (tablets)

md = medium screens (some desktops)

lg = large screens (remaining desktops)

Bootsrap’in Üç Ana Dosyası
Bootstrap çeşitli fonksiyonlar gerçekleştiren söz dizimi koleksiyonlarından oluşsa da üç farklı dosyaya sahip olması oldukça mantıklıdır. İşte bir web sitesinin arayüzünü ve fonksiyonelliğini yöneten üç ana dosya.

Bootstrap.css
Bootstrap.css bir web sitesinin düzenini yoluna koyan ve yöneten bir CSS framework’üdür. HTML bir web sayfasının içeriğini ve yapısını yönetirken CSS ise sitenin düzeni ile ilgilenir. Bu nedenden dolayı bu iki yapının belirli bir eylemin gerçekleştirilmesi için bir arada olmaları gerekir.

Fonksiyonlarından ötürü CSS istediğiniz kadar web sayfasında aynı görünüşü oluşturmanızı sağlar. Bir kenarın genişliğini değiştirmek için saatlerce düzenleme yapmaya elveda deyin.

CSS ile tek yapmanız gereken CSS dosyalarını web sayfalarına ilişkilendirmektir. Gerekli bütün değişiklikler sadece CSS dosyasında yapılabilmektedir.

CSS’in fonksiyonları sadece metin stilleriyle sınırlı değildir. Web sayfasının tabloları ve görsel düzenleri gibi diğer açılarını da biçimlendirebilirsiniz.

CSS’nin birçok bildiri ve seçicileri bulunduğu için hepsini ezberlemek uzun sürebilir. Bir an önce işe başlamak istediğinizi görebiliyoruz. İşte öğrenme sürecinizi kısaltabilecek bir kopya kağıdı (ing).

Bootstrap.js
Bu dosya Bootstrap’in çekirdek dosyasıdır. Web sitesinin interaktifliğinden sorumlu olan JavaScript dosyalarını içerir.

Tekrar tekrar JavaScript sözdizimi yazmaktan zaman tasarrufu yapmak için geliştiriciler jQuery kullanır. jQuery açık kaynaklı ve çok platformlu popüler bir JavaScript kütüphanesidir. Web sitenize çeşitli fonksiyonellikler eklemenize izin verir.

İşte jQuery’nin yapabileceklerinden birkaç örnek:

Başka bir konumdan dinamik olarak veri çıkarmak gibi Ajax isteklerini yerine getirme
Bir JavaScript eklenti koleksiyonu kullanarak bileşen oluşturma
CSS özelliklerini kullanarak özel animasyonlar oluşturma
Web sitesinin içeriğine dinamizm ekleme
Her ne kadar Bootstrap CSS özellikleri ve HTML elementleri ile normal bir şekilde çalışabilse de mobil duyarlı bir tasarım oluşturmak için jQuery’e ihtiyaç duyar. Aksi takdirde CSS’in sadece basit ve statik kısımlarını kullanabilirsiniz.

Daha fazla bilgiye ihtiyacınız mı var? jQuery hakkında daha fazla bilgi almak için bu rehbere göz atabilirsiniz.

Glyphicons
İkonlar bir web sitesinin ayrılmaz bir parçasıdır. Sıklıkla kullanıcı arayüzünden belirli eylemler ve verilerle ilişkilendirilmektedirler. Bootstrap bu ihtiyacı karşılamak için Glyphicon’ları kullanır.

Bootstrap ücretsiz kullanıma açılmış bir Glyphicon Halfling seti içerir. Ücretsiz versiyonu standart bir görünüşe sahiptir ancak temel fonksiyonlar için yeterlidir.

Eğer daha şık ikonlar bulmak isterseniz Glyphicons özel konulara yoğunlaşan web sitelerde hiç şüphesiz daha iyi görünecek çeşitli premium setler satmaktadır.

Ayrıca bireysel ve temalara özel ikonları Flaticon, GlyphSearch, ve Icons8 gibi web sitelerinden indirebilirsiniz.

Bazı ikonlarda CSS ile değişiklik yapılabilirken bazılarıysa varsayılan görünüşe sahiptir. Sitenizin ihtiyacına en çok uyan ikonları kullanın.

+
Bootstrap Kullanımı
Bootstrap nedir öğrendiğinize göre sıra Bootstrap kullanımı nasıl olur onu öğrenmekte. Aşağıdaki örneğimize bir göz atın.

<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 101 Şablonu</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Merhaba, dünya!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
HTML dosyası için karakter kodlamasıdır. Bu örnekte ise UTF-8, Unicode’a atfeder.

meta charset="utf-8"
Web sitesini yazmak için kullanılan karakter setini belirtir.

meta http-equiv="X-UA-Compatible"
Sayfayı işleyecek Internet Explorer sürümünü belirler. Edge modunu kullanılarak mevcut en yüksek modu kullanması için ayarlanmıştır.

meta name="viewport"
Sayfanın viewport boyutuyla 1:1 orantıya sahip olmasından emin olur.

link href="css/bootstrap.min.css" rel="stylesheet"
Bu ise Bootstrap’in çekirdek CSS’inin eklendiği kısımdır.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
Google CDN aracılığıyla jQuery’i yükler. Sayfalar bir yıllığına önbelleklenebileceğinden HTTP aracılığıyla CDN’den yüklenmeleri daha iyidir.

src="js/bootstrap.min.js"
Bootstrap’in çekirdek JavaScript’ini ekler. Bu söz diziminin düzgün çalışması için daima jQuery söz diziminin altında konumlandırılması gerekir. Ekleme işlemi Google‘ın URL’si veya elle indirme aracılığıyla yapılabilir.
Bootstarp ile neler yapılabilir?

Bir web sitesi için gerekli olan tüm ögeleri içerdiği için bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, tablolar, imajlar, slider, carousel, modal pencereler, butonlar, dropdown menüler, navigasyon bar, sayfalandırma, etiketler, thumbnaili uyarı ve bilgilendirme balonları, yükleme barları vb gibi bir çok tasarım ögesi hazır olarak sunulmuş ve yapmanız gereken tek şey ihtiyacınız olan kodu kopyala yapıştır yapmak. Aşağıda hazırlanmış örnekleri görebilirsiniz:

+++bootstrap ile neler yapılabileceği ile ilgili bi jpg

Bootstrap nasıl kullanılır?

Hazır bir sistem olması dolayısıyla neredeyse her şeyi kopyala yapıştır yaparak kullanabiliyorsunuz. Ama öncelikle ana template dosyanız için bazı olmazsa olmazlar var. Sayfamız Html5 olmalı ve Bootstrap için ana css dosyası ve jquery scriptini de sayfanıza eklemelisiniz.

Sayfanızda kullanacağınız her bir öge için getbootstrap.com sitesi referans siteniz olacak. Siteye girdiğinizde üst menüde yer Getting Started, CSS, Component ve JavaScript alanlarına sıkça başvurup gerekli kodları buralardan kopyala yapıştırla alacağız.

+++++bootstrap +++++++ olan jpg buraya

Bootstrap’ın temel tasarım mantığını şöyle özetleyebiliriz. Bir satır 12 eşit sütuna bölünerek bu sütunların genişlikleri farklı cihazlara göre esnetilip daraltılıyor. Böylelikle farklı cihazlara göre bu sütunların görüntülenme şekli değiştiriliyor. Örneğin geniş ekranlı bir cihaz için 3lü sütun bir yapı düşünüyorsunuz. Bootstrap mantığı nasıldı? Satır 12 parçaya bölmek. O zaman 3lü sütun yapabilmek için her bir sütun bu 12li sütunlardan 4er tane kapsamalı. Yani kod ile bunu göstermek gerekirse aşağıdaki gibi olmalı:


<div class="row">

<div class="col-md-4"></div>

<div class="col-md-4"></div>

<div class="col-md-4"></div>

</div>

.col-md-1 class’ı 12ye bölünen satırın her bir sütununu ifade ediyor. Satırımızı kaça bölmek istiyorsak bu classtan faydalanıyoruz. Farklı bir örnek verecek olursak satırı iki eşit sütuna bölmek istiyorsak ilk sütuna .col-md-6 ve ikinci sütuna da .col-md-6 classlarını veriyoruz. Toplamda 12 yapıyor bu da satırın 2 eşit parçaya bölünmesini sağlıyor. Bu oranları değiştirerek (toplamda 12 olacak şekilde) sütun genişliklerini ayarlayabilirsiniz. Aşağıdaki görselden satırların class’larla nasıl sütunlara bölündüğünü daha iyi anlayabilirsiniz:

++++++++ bootstrap sütun yapısı jpg buraya
Özellikle sütunların cihazlara göre duyarlı olmasını aşağıdaki class’lar ile sağlayabiliriz:
Masaüstü bilgisayarlar için kullanılan class .col-md-
Cep telefonları için kullanılan class: . col-xs-
Tabletler için kullanılan class: .col-sm-
Farklı cihazlar için bu sütunların farklı davranmasını istediğimizde masaüstü için bu şekilde tablet için bu şekilde mobil telefonlar için bu şekilde genişlikte davran diyerek aynı class etiketi içine bu genişlikleri birlikte verebilirsiniz. Mesela masaüstü bilgisayarlar için .col-md-3 class’ı ile 4e böldüğünüz satırları cep telefonlarında 2 tane 2’li sütun şeklinde görünsün isteyebiliriz. Yani masaüstünde 4lü sütun görünen bir satır, cep telefonlarında classlar kullanılarak 2 satıra dönüştürülüp her bir satırda 2li sütun görünecek şekilde davranmasını sağlayabiliriz.

Bunu yapmak için class yapımızı aşağıdaki şekilde yapıyoruz:

<div class="row">

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

</div>



<div class="row">

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

<div class="col-md-3 col-xs-6"></div>

</div>

Sitemizi düşündüğümüz senaryoya göre hazırlamaya başlayalım. Bootstrap için gerekli dosyaları http://getbootstrap.comadresinden indiriyoruz, gerekli tüm .css, .js vb dosyalar burada var.

++++++++ bootstrap zip foto buraya

bootstrap-3.0.1-dist.zip dosyası sayfanız için olmazsa olmazları barındırıyor. bootstrap-3.0.1.zip dosyası ise Bootstrap’ın tüm dosyalarını (tüm script dosyaları, cssler, less dosyaları, font dosyaları vb) barındırıyor. Eğer ana şablonu oluşturmakla uğraşmak istemiyorsanız indirdiğiniz dosyaların içinde örnek sayfalar var. Bu örnek sayfalardan birini alarak kendi şablonunuz olarak kullanabilirsiniz. Tasarımları yaparken zaten bu örnek sayfaları sık sık kullanacaksınız.

Şimdi örnek bir sayfayı birlikte yapalım. Yapacağımız sitemizde senaryo olarak da en üstte header alanında ana menü onun altında carousel, onun altında 3lü sütunda bir alan ve onun altında da footer olsun. bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zipten çıkaralım. EXAMPLES klasöründeki NAVBAR klasöründeki örneği şablonum olması için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörünün içine yapıştırıyorum. Fakat direk açtığımda düzgün tasarım görünmeyecektir çünkü css dosyası doğru yerde linki değil bunu düzeltmem gerekiyor. Kopyaladığım index.html içindeki css dosyasının ve bootstrap js dosyasının yolunun başındaki iki üst klasörde olduğunu belirten kısmı siliyorum ve kaydediyorum. Dosyaların yolu aşağıdaki gibi olmalı. Bootstarp js dosyası dokümanın sonundadır.

CSS dosyası yolu: <link href=”dist/css/bootstrap.css” rel=”stylesheet”>

Bootstrap js dosyası yolu: <script src=”dist/js/bootstrap.min.js”></script>

Dosyayı açtığımda şablonu görebilirim artık. Header alanımız hazır. Oradaki .jumbotron divi bizim için gerekli değil onu siliyoruz.
++++++++ template.jpg buraya

Şimdi carousel i ekleyelim. Carousel’imizi eklemek için getbootsrap.com sitesinde JavaScript bölümüne girip oradan carousel kısmından gerekli scripti kopyala yapıştır ile alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz

Carousel için gerekli kod:

CSS
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<img src="..." alt="...">

<div class="carousel-caption">

...

</div>

</div>

...

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<img src="..." alt="...">

<div class="carousel-caption">

...

</div>

</div>

...

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>


Carousel’de yer alan her bir slide koddaki aşağıdaki kısım içine yerleştirilmeli. Yani her bir slide için aşağıdaki kodu çoğaltmanız gerek. Bu tip düzenlemeleri temek html bilsine sahipseniz çok kolaylıkla yapabileceğiniz düzenlemelerdir.

Her bir slide için gerekli kod aşağıdaki gibidir. Aktif olan slide için gerekli olan .active classı sadece ilk slide divinde olmalıdır diğerlerinden silmeniz gerekir. Ayrıca imajlar için dosya yolunu ve slide içinde kullanılacak metni de kodda düzenlemelisiniz.

Her bir slide için gerekli kod:

CSS
<div class="item active">

<img src="..." alt="...">

<div class="carousel-caption">

...

</div>

</div>

<div class="item active">

<img src="..." alt="...">

<div class="carousel-caption">

...

</div>

</div>
Üç tane slide olan olan bir carousel için kod şu şekilde olmalı:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">

<!-- 1nci slide için başlangıç -->

<div class="item active">

<img src="img/image01.jpg" alt="image01">

<div class="carousel-caption">

Buraya image01 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 1nci slide için bitiş -->

<!-- 2nci slide için başlangıç -->

<div class="item">

<img src="img/image02.jpg" alt="image02">

<div class="carousel-caption">

Buraya image02 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 2nci slide için bitiş -->

<!-- 3ncü slide için başlangıç -->

<div class="item">

<img src="img/image03.jpg" alt="image03">

<div class="carousel-caption">

Buraya image03 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 3ncü slide için bitiş -->

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">

<!-- 1nci slide için başlangıç -->

<div class="item active">

<img src="img/image01.jpg" alt="image01">

<div class="carousel-caption">

Buraya image01 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 1nci slide için bitiş -->

<!-- 2nci slide için başlangıç -->

<div class="item">

<img src="img/image02.jpg" alt="image02">

<div class="carousel-caption">

Buraya image02 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 2nci slide için bitiş -->

<!-- 3ncü slide için başlangıç -->

<div class="item">

<img src="img/image03.jpg" alt="image03">

<div class="carousel-caption">

Buraya image03 için metin yazabilirsiniz. HTML

</div>

</div>

<!-- // 3ncü slide için bitiş -->

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>
Carousel kodlarımızdan sonra sayfamızın ekran görüntüsü aşağıdaki gibi oldu:

+++++++++ template-02.jpg buraya

Sırada 3lü sütun var. Bunun için Bootstrap’ın sitesindeki Components > Thumbnail > Custom Content kodunu (aşağıdaki) kopyalayıp alıyoruz:

CSS
<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img data-src="holder.js/300x200" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>...</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img data-src="holder.js/300x200" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>...</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

</div>
3lü sütun istediğimiz için row div’inin içindeki div’i çoğaltıyoruz ve kodumuz aşağıdaki gibi oluyor:



<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/01.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/02.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/03.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

</div>


<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/01.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/02.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="img/03.png" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

</div>


Bootstrap’ta dikkat etmemiz gereken bir konu var. Bu da imajların en boy ölçülerini yazmıyoruz. Bootrap imajları responsive olacak şekilde kendisi yöneterek büyütüp küçültüyor.

3lü sütunlarımız da tamam. Ekran görüntüsü aşağıdaki gibi oldu:
+++++++++++ template-03.jpg buraya


Son olarak footer alanımızı ekleyelim. Bunun için indirdiğiniz EXAMPLES klasöründeki Sticky Footer klasöründeki örnekteki aşağıdaki kodu alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz:

<div id="footer">

<div class="container">

<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>

</div>

</div>

<div id="footer">

<div class="container">

<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>

</div>

</div>
Vee sayfamız bitti. Çok kolay ve pratik bir şekilde sayfamızı oluşturduk. Sayfamızın son halinin ekran görüntüsü aşağıdaki gibi:

++++++++template-04.jpg burayya


Metinleri isteğinize göre uygun şekilde düzenleyip tasarımlarınıza son şeklini verebilir Bootstrap’ın bu kolaylıklarından siz de fayalanabilirsiniz.Siz de burada anlattığım mantıkla siteniz için gerekli ögeleri kolaylıkla uygulayabilirsiniz. Modal pencereler, dropdown menüler, akordion menüler, uyarı etiketleri, farklı renkte ve özellikteki butonları indirdiğiniz zip dosyasındaki örnekleri inceleyek sitenize ekleyebilirsiniz.