Bootstrap Nedir? Bootstrap Nasıl Kullanılır? | Ebru Aydın Yazılım ve Danışmanlık Hizmetleri - Web & Grafik Tasarım, E-Ticaret Çözümleri
İnternette Bootstrap ile alakalı Tr – En dillerinde kayda değer birkaç makale var. Ben de bunlardan yararlanarak var olan yazıları bir makalede toplayıp sizlerle buluşturma kararı aldım.
Bu yazımda, web ara yüz geliştiricilerinin fazlasıyla ilişkili olduğu bir Css framework’ü olan Twitter Bootstrap’ten bahsedeceğim.
Bootstrap nedir? Bootstrap, Twitter’ın arayüz geliştirici ekibi tarafından 2010 yılında geliştirilmeye başlanmış ve şu an Dünya’nın en iyileri arasında yer alan bir Css Framework’üdür. Bootstrap geliştirilirken sürekli olarak o günün trendlerine göre ufak kabuk değişimleri yaşayarak insanlar için çekici olmayı başarmış ve 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.
Bootstrap ilk oluşturulduğu zamanlarda Web trendleri 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ı.
Bootstrap, responsive desteğiyle artık neredeyse ekstra kod yazdırmadan kendi içerisinde responsive bir site yapabilme olanağı sağlıyor.
İ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, fonts ve js isimli üç klasör göreceğiz. Js ve Css klasörleri içerisinde hem normal boyutlu hem de 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 siliyoruz. 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.
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 :
<div class=”col-lg-6″ id=”first”></div>
<div class=”col-lg-2″ id=”second”></div>
<div class=”col-lg-4″ id=”third”></div>
Her bir div’ imize de ayrı ayrı ID vererek daha belirgin olmaları için de 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ğlayacağı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.
<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>
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 :
<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>
Bunun da 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 var olan 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 :
<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>
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 ikisinin de 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 ekliyoruz. 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.
<div class=”col-lg-2″ id=”first”></div>
<div class=”col-lg-2 col-lg-offset-8″ id=”second”></div>
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 ” Tables ” başlığı altını inceliyoruz. Buradan en üstteki class’ı sadece table olan (Basic example) yapıyı alıyoruz ve kendi kodlarımız arasına ekliyoruz. Daha sonra da hepimizin bildiği şekilde tr ve td kullanarak iki satır oluşturalım. Kod yapımız şu şekilde olacaktır :
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üçük 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 :
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.
<!– 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>
<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”>EbruAydin.com.tr</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 olarak da ilk sırada yer olan ve ” active ” class’ ına sahip olan ilk div’ e bir de ” in ” isimli bir class daha ekliyoruz. Güncellenmiş yapımız kullanıma hazırdır.
Sürekli yenilenen Bootstrap’in içerisine yakın bir zamanda Font Awesome‘ ın sağladığı bir yapı olan font ikonlar da eklendi. Font Awesome’ ın çalışma mantığından vs. belki başka bir makalemizde daha sonra bahsedebiliriz ama şimdi 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 etiketleri 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ın da entegre edilmiş bir biçimde indirileceğ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.
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.
Zaman zaman Bootstrap üzerinde olabilecek gelişmeler doğrultusunda bu makalemiz güncellenecektir.
Şimdilik hoşça kalın! 🙂
Category: TwitterBy EBRU AYDIN Mart 22, 2017 Leave a comment
Tags: bootstrapbootstrap hakkındabootstrap nasıl kullanılırbootstrap ne işe yararbootstrap nedir
PreviousPrevious post:Google AMP Nedir? Ne İşe Yarar ve Özellikleri Nelerdir?NextNext post:YOLO Dünyası için Geri Sayım Başladı!
Markalar Twitter’ı Nasıl Kullanmalı?
Twitter’da Toplu Takip Bırakma “Unfollow” Kodu
Doğum Günü Kutlamalarını Artık Twitter’dan da Alabileceksiniz