Bootstrap Nedir ? Nasıl Kullanılır ?
Merhaba Arkadaşlar,
Bu makalede sizlere arayüz geliştiricilerinin fazlasıyla ilişkili olduğu bir Css framework’ ü olan Twitter Bootstrap’ ten bahsedeceğim. Adından da anlaşılacağı üzere twitter’ ın arayüz geliştirici ekibi tarafından 2010 yılında geliştirilmeye başlanmış bu proje şu an Dünya’ nın en iyileri arasında yer almaktadır. Ayrıca geliştirilirken de sürekli olarak o günün trendlerine göre ufak kabuk değişimleri yaşayarak sürekli olarak insanlar için çekici olmayı başarmaktadır.
Bootstrap bizlere düzgün bir grid sistemi, tarayıcı uyumluluğu konusunda duyarlılık, sayfalarımız içerisinde kullanacağımız bir çok elementin değişik bir çok seçeneğiyle birlikte hazır olarak alınabilmesi olanağı sağlıyor. Ayrıca Font olarak içerisinde ikonlar da barındırarak bu konuda ayrıca arayış içerisine girmemize gerek kalmamasını sağlıyor.
İlk kurulduğu zaman Web trend’ leri arasında gradient tasarımlar ön planda tutuluyordu. Özellikle arka plan renkleri ve butonlar için bol bol gradient kullanılırken Bootstrap’ te bu konuya duyarlı bir biçimde ortaya çıkarak özellikle gradient kullandığı butonları ile dikkat çekmeyi başarmıştı. Yeni dönem trendler arasında ise Flat tasarımlar ortaya çıkarken Bootstrap bu konuya da adapte olmayı başarılı bir şekilde gerçekleştirerek 3.0 sürümü ile birlikte hem sitesini hem de kod yapısını yeniledi. Gayet başarılı bir geçiş ile artık daha düz elementlere ulaşabiliyoruz. Ayrıca 3.0 sürümü ile birlikte önceden pek iyi olmayan responsive desteği de artık neredeyse ekstra kod yazdırmadan kendi içerisinde responsive bir site yapabilme olanağı sağlıyor.
Bootstrap her ne kadar Css ve Javascript tarafında sağladığı destek ile ön plana çıkma gibi bir başarı gösterse de ana yapısında ve çıkış amacında grid sistemi yatmaktadır. Mantık olarak sayfayı container içerisinde 12 dikey parçaya bölen Framework, her bir satır içerisinde istediğimiz genişliğe sahip olan kutular yaratmamızı ve bu kutuların hiç bir ekran boyutunda bozulmadan düzenli bir şekilde tutulmasını sağlamaktadır.
Sitesi kadar geniş bir dökümantasyona sahip Türkçe kaynak bulunmadığı için ülkemizde özellikle de başlama evresinde bir sıkıntı yaşanıyor. Ancak bir proje de kullanıldıktan sonra kodlama yaparken sağladığı basit ve anlaşılır yazım tipi, responsive desteği, düzgün grid sistemi ve daha az kod yazarak sağladığı daha hızlı iş çözme yeteneği sayesinde vazgeçilmezimiz oluyor. Kendimden biliyorum 🙂
Peki bunu nasıl kullanıyoruz ?
İlk olarak resmi sitesi olan getbootstrap.com adresine giriş yapıyoruz. Karşımıza çıkan ilk ekrandaki ” Download Bootstrap ” butonuna tıklıyoruz. Açılan sayfada değişik seçenekler sunulacaktır. Biz ilk aşamada Less, Sass gibi yardımcı materyallere girmeyeceğimiz için tekrar ” Download Bootstrap ” butonuna tıklıyoruz. Bilgisayarımıza indireceğimiz zip uzantılı dosyayı bir klasöre çıkarttığımızda içerisinde css, js ve fonts isimli üç klasör göreceğiz. Js ve Css klasörleri içerisinde hem normal boyutlu hemde isminde ” min ” yazan sıkıştırılmış ve haliyle de dosya boyutu küçülmüş dosyalar göreceğiz. Ben burada da değişik materyallere girerek konuyu karmaşık aktarmak istemediğim için sadece işimize yarayacak dosyaları alarak konuya devam edeceğim. Css klasörü içerisinde ” bootstrap.min.css ” dosyası dışındakileri siliyoruz. Aynı şekilde js klasörü içerisinde de ” bootstrap.min.js ” isimli dosya dışındakiler siliniyor. Daha sonra indirdiğimiz dosya içerisinde index.html isimli bir sayfa yaratalım ve artık Bootstrap ile kodlamaya başlayalım.
Html sayfamız içerisine dosyalarımızı çağırıyoruz. Ve ilk olarak kodlarımız şu şekilde olacaktır.
<!DOCTYPE html> <html> <head> <title>BilgiSayaci.Org</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> </body> </html>
Dosyalarımızı çağırdığımıza göre artık bootstrap ile tamamen responsive destekli bir çalışma yapabiliriz. İlk olarak grid sisteminin nasıl kullanılacağını göreceğiz.
Bootstrap’ in sitesinde ” CSS ” menüsüne baktığımızda orada ” Grid options ” isminde bir tablo göreceğiz. Bu tabloda değişik büyüklüklerde class’ ların nasıl verilmesi gerektiğini görebiliriz. İlk olarak en büyük boyut olan 1170px’ lik bir container dan başlayacağız. Bu nedenle de class’ larımızı ” col-lg-5 ” , ” col-lg-6 ” şeklinde vereceğiz. Container class’ ı olan bir div açıyoruz ve içerisinde de ” row ” isimli bir class’ ı olan bir div daha açıyoruz. Bootstrap üzerinde kodlama yaparken satırları birbirinden ayırmak, aynı ana div içerisinde farklı elementler oluşturmak için bu class’ a da ihtiyaç duyarız. Daha sonra ilk örneğimizde 12 parça olan ilk satırımızı 3′ e bölüyoruz. Bunlar 12 dilimlik parçadan sırasıyla 6, 2, 4 parça alacaklardır. Kod yapımız şu şekilde olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{height: 200px;}
#first{background: #7f8c8d;}
#second{background: #2c3e50;}
#third{background: #bdc3c7;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" id="first"></div>
<div class="col-lg-2" id="second"></div>
<div class="col-lg-4" id="third"></div>
</div>
</div>
</body>
</html>
Her bir div’ imize de ayrı ayrı ID vererek daha belirgin olmaları içinde birer arka plan rengi belirtiyoruz. Sayfamızı bu kod yapısı ile çalıştırdığımızda dikey olarak üçe bölünmüş üç farklı renk tonu bulunan div’ ler görüyoruz.
Şimdi bunları sırasıyla değişik ekran boyutlarına göre küçülterek responsive bir görüntü oluşturmalarını sağlaacağız. ” col-lg- ” ile verdiğimiz class’ ların ardından sıra ” col-md- ” ile vereceğimiz class’ lara geldi. Bu class ile birlikte 970px genişliğinde bir container kontrolü sağlayacağız. Farklılığı görmek adına bu sefer div’lerimiz sırasıyla 12′ li sistemden 3,4,5 parça alacaklar. Kod yapımız şu şekilde olacaktır.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{height: 200px;}
#first{background: #7f8c8d;}
#second{background: #2c3e50;}
#third{background: #bdc3c7;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-3" id="first"></div>
<div class="col-lg-2 col-md-4" id="second"></div>
<div class="col-lg-4 col-md-5" id="third"></div>
</div>
</div>
</body>
</html>
Bu şekildeki kod yapımızı kaydedip tarayıcıda çalıştırdığımızda tam ekran olan tarayıcımızı sağdan sola doğru küçülttüğümüzde ( yani tarayıcı genişliği 970px olduğunda ) div’ lerin genişliklerinin değiştiğini göreceğiz. Daha sonra da bir alt ekran boyutu olan 768px’ e geçiyoruz. Burada da ” col-sm- ” ile class boyutlarımızı belirleyeceğiz. Sıradaki boyutlarımızı da sırasıyla 8, 1, 3 olarak veriyoruz ve ekran görüntümüzü kontrol ediyoruz. Bir öncekinde yaptığımız gibi tekrar ekranımızı küçülttüğümüzde ( yani ekran genişliği 768px’ e eşit olduğunda ) değişimi göreceğiz. Kod yapımızda şu şekilde güncellenmiş olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{height: 200px;}
#first{background: #7f8c8d;}
#second{background: #2c3e50;}
#third{background: #bdc3c7;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-3 col-sm-8" id="first"></div>
<div class="col-lg-2 col-md-4 col-sm-1" id="second"></div>
<div class="col-lg-4 col-md-5 col-sm-3" id="third"></div>
</div>
</div>
</body>
</html>
Bununda ardından Bootstrap’ in son desteklediği ekran boyutuna geçiyoruz. Bu da yapacağımız tasarımların akıllı telefonlarda görüntüleneceği şekli için yapacağımız tasarımları içerecektir. Genelde akıllı telefonlarda tüm kutuların alt alta olduğunu görürüz. Zaten küçük olan alanda div’ leri yan yana sıkıştırarak varolan alanı da öldürmek güzel olmayacaktır. Bu nedenle diğer 3 ekranda yan yana sıralanan kutularımızı bu sefer alt alta sıralayacağız. Bu da demek oluyor ki 12 parçaya bölünmüş olan grid sistemimizde her birine %100 genişlik anlamına gelen ” col-xs-12 ” class’ ını vereceğiz. Kod yapımız şu şekilde güncellenecektir :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{height: 200px;}
#first{background: #7f8c8d;}
#second{background: #2c3e50;}
#third{background: #bdc3c7;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-3 col-sm-8 col-xs-12" id="first"></div>
<div class="col-lg-2 col-md-4 col-sm-1 col-xs-12" id="second"></div>
<div class="col-lg-4 col-md-5 col-sm-3 col-xs-12" id="third"></div>
</div>
</div>
</body>
</html>
Bootstrap ile düzenli grid’ e sahip olan, dikey anlamda 12 parça halinde container’ ı kullanan ve ekran boyutlarına göre responsive işlemlerini gerçekleştiren bir sayfa kodlamasının nasıl yapılması gerektiğini bu şekilde görmüş olduk. Artık kendi oluşturacağımız yapıyı buraya kadar olan kısımda bootstrap desteği ile kodlayabiliriz.
Grid sistemi ile alakalı işlemlerimizi de iki div arasında istenen boşluğun nasıl verilmesi gerektiğini görerek sonlandıracağız. Bunun için de sayfamızda iki div yaratacağız ve ilk div container içerisinde en sola dayalı iken ikinci div en sağa dayalı olacaktır. Bunu css ile flot: left / float:right kullanarak yapabiliyoruz fakat bootstrap bunu daha da geliştirerek yukarıdaki ekran boyutlarının her birinde ayrı ayrı belirleyebileceğimiz bir hale getirmiştir. Görüntüyü oluştururken iki adet div oluşturuyoruz ve her ikisininde en yüksek ekran genişliğinde 2′ şer parçalık bir alan kaplamasını class ile belirtiyoruz. Daha sonra belirlediğimiz yerleşimi yapmak için en sağa konumlandırılacak olan div’e ikinci bir class ekleyiyoruz. Bu class ” col-lg-offset-8 ” olacaktır. Böylece 2+2+8 = 12 gibi küçük bir hesap ile tek bir satırda 12’li grid’i doldurmuş olacağız.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{height: 200px;}
#first{background: #7f8c8d;}
#second{background: #2c3e50;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2" id="first"></div>
<div class="col-lg-2 col-lg-offset-8" id="second"></div>
</div>
</div>
</body>
</html>
Hazır CSS Elementleri Nasıl Kullanılır ?
Şimdi de yeni bir başlık altında sitelerimiz içerisinde sık sık kullandığımız elementlerin nasıl hazır bir şekilde kullanılabileceğini göreceğiz. Burada öncelikli olarak tablo kullanımını göstermek istiyorum. Getbootstrap.com adresine giriyoruz ve Css sayfasından ” Table ” başlığı altını inceliyoruz. Buradan en üstteki class’ı sadece table olan yapıyı alıyoruz ve kendi kodlarımız arasına ekliyoruz. Daha sonrada hepimizin bildiği şekilde tr ve td kullanarak iki satır oluşturalım. Kod yapımız şu şekilde olacaktır :
<div class="container"> <div class="row"> <table class="table"> <tr> <td>Kolon 1</td> <td>Kolon 2</td> </tr> <tr> <td>Ersel Gülyaz</td> <td>BilgiSayaci.Org</td> </tr> </table> </div> </div>
Sayfamızı görüntülediğimizde alt alta sıralanmış iki satır ve container içerisinde %100 genişliği olan bir tablo göreceğiz. Şimdi tablomuza bir ” :hover ” efekti ekleyelim. Bunun için ” table ” class’ımıza ” table-hover ” isimli bir class daha ekliyoruz. Yapacağımız işlem bu kadar kısa bir ekleme ile amacına ulaşmış oluyor. Başka bir ekleme ile tablomuzun hatlarının daha belirgin olması için nasıl satırlar arasında bir çizgi var ise sütunlar arasında da olmasını sağlayalım. Bunun için de ” table ” class’ımıza ” table-bordered ” class’ı ekliyoruz.
Hazır html elementlerinin kullanımının daha iyi anlaşılabilmesi için şimdi de bir kaç buton kullanalım. Css sayfasında ” Buttons ” alanına gittiğimizde değişik renklerde butonlar göreceğiz. Biz bunların içerisinden kırmızı renkte olanı kullanalım. Kodlarımız içerisine alttaki gibi bir satır ekliyoruz :
<button type="button" class="btn btn-danger">Danger</button>
Sayfamızı çalıştırdığımızda gördüğümüz kırmızı renkte butonun hem hover hem de tıklanma efekti olduğunu göreceğiz. Bu şekilde bir butonu kendimiz yapmak istediğimizde üç farklı satırda kod yazmamız gerekecektir.
Hazır JavaScript Elementleri Nasıl Kullanılır ?
Html elementlerinin hazır bir şekilde alınıp nasıl kullanıldığını gördükten sonra içerisine Javascript ile müdahale edilmiş html’in nasıl kullanılacağını da görelim. Bunun için öncelikle Javascript sayfasına giriyoruz. Buradan ilk olarak Tab Menü kullanımını görelim. Bunun için ” Tab ” başlığı altından aşşağıdaki kod bloğunu kodlarımız arasına ekliyoruz ve daha sonra kayıt edip sayfamızı çalıştırıyoruz :
<div class="container"> <div class="row"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home">1. İçerik Alanı</div> <div class="tab-pane" id="profile">2. İçerik Alanı</div> <div class="tab-pane" id="messages">3. İçerik Alanı</div> <div class="tab-pane" id="settings">BilgiSayaci.Org</div> </div> </div> </div>
Artık kullanıma hazır bir tab menümüz oldu. Şimdi bunun içerisinde tıklamaya bağlı olarak açılan içerik alanlarının bir anda değil ” fade in ” efekti ile açılmasını sağlayalım. Gerçekleşmesi için ” tab-content ” class’ına sahip olan div içerisindeki elemanların class’ larına ” fade ” isimli yeni bir class ekliyoruz. Ek olarakta ilk sırada yer olan ve ” active ” class’ ına sahip olan ilk div’ e birde ” in ” isimli bir class daha ekliyoruz. Güncellenmiş yapımız kullanıma hazırdır.
İkon Kullanımı
Sürekli yenilenen Bootstrap’ in içerisine yakın bir zamanda Font Awesome‘ ın sağladığı bir yapı olan font ikonlarda eklendi. Font Awesome’ ın çalışma mantığından vs. belki başka bir makalede daha sonra bahsedebilirim ama ben burada direkt olarak kullanımına geçmek istiyorum. Getbootstrap.com içerisinden ” Components ” sayfasını açtığımızda burada hangi font ikonunun hangi class ile çalıştırıldığını göreceğiz. Buradaki ikonları denemek için sayfamızda ikonlar için kullandığımız etiketlerini açıyoruz ve herhangi bir ikon için şu şekilde kullanım yapıyoruz :
<i class="glyphicon glyphicon-asterisk"></i>
Kaydettikten sonra sayfamızı çalıştırdığımızda ikonumuzun çalıştığını görebiliriz. Class içerisinden ” glyphicon ” çıkarıldığında ikonlarımız kalın yapısını kaydedip klavyeden kendimiz eklediğimiz hali ile görüntülenir.
İsteklere Göre Düzenlenmiş Paket Hazırlama
Makalenin en başında bootstrap’ i nasıl indirebileceğimizi görmüştük. Bu şekilde bir indirmenin içerisinde kullanmayacağımız bir çok elemanında entegre edilmiş bir biçimde indireleceği görülen bir gerçektir. Bu da ekstra olarak dosya boyutunun büyümesine neden olacaktır. Hiçbirimiz de bu şekilde bir durumu istemeyiz. Bunun önüne geçmek için de ” Customize ” sayfasından isteklerimize uygun seçenekleri işaretleyerek en düşük boyuttaki paketi bilgisayarımıza indirebiliriz.
Sonuç
Genel hatları ile anlatmaya çalıştığım Twitter Bootstrap, arayüz geliştiricileri için orta yol, ortak dil olarak görülen bir Framework’tür. Sitesinde ki her nesnenin tek tek nasıl kullanılacağını da anlatmak isterdim fakat o zamanda hem makalenin uzunluğu çok fazla olurdu hemde sizin sonuna kadar okuyamayacağınız kadar yoğun bir şekilde yazı içerirdi. Zaten her başlık için ayrı ayrı gösterdiğim örnekler üzerinden ilerleyerek diğerlerini de rahatça kullanabilirsiniz.
Zaman zaman Bootstrap üzerinde olabilecek gelişmelere göre güncelleyebileceğim yazıma burada son veriyorum. Bir başka makalede görüşmek üzere 🙂
Keşke görsel olarak detaylı anlatsanız boostrap ile ilgili türkçe kaynak yok maalesef
yani videolu
@cranberry,
Videolu bir anlatımı hiç düşünmemiştim. Bu nedenle de konu içerisinde olabildiğince net ve kısa kısa anlatmaya çalıştım. Bir gün videolu halini de çekersem bu yazı içerisinden yayınlayacağım. Önerin için Teşekkür Ederim 🙂
Çok yararlı bir çalışma olmuş teşekkürler..
http://www.sonercelix.com/MakaleDetay/36/Bootstrapa-giris-Bootstrap-kullanmak-icin-gerekli-dosyalar
Bu sitede videolu anlatımıda mevcuttur. Uzun zamandır takip ettiğim ve beğendiğim bir sitedir. Tavsiye ederim.
Çok anlaşılır bir makale gerçekten. Teşekkürler.