20 Nisan 2016

Bootstrap Öğreniyoruz

Front-end tarafında yeni misiniz? Ve eminim ki her platformda sorunsuz çalışan siteler nasıl yapılıyor merak ediyorsunuzdur. İşte bu konunun cevabı aslında Bootstrap, en azından bana göre öyle.. Gelin beraber Bootstrap nedir, ne değildir beraber inceleyelim.

Öncelikle belirtmeliyim ki CSS kodlamayı öğrenmeden Bootstrap kullanmaya başlamak gerçek anlamda sizi daha çok geriye götürecektir ve kendinizi geliştirmeniz ciddi anlamda sekteye uğrayacaktır. Bu yüzden önce HTML/CSS site kodlamayı öğrenin ve kendinizi basit siteler tasarlayarak geliştirin.

Bootstrap nedir konusuna gelirsek yaptığınız siteleri grid (sutünlara) bölerek tüm platformalara uyumlu siteler yapmanızı sağlayan CSS kütüphanesidir. Tabi içeriği sadece bundan ibaret değil yine her cihaza uyumlu menüler, tablolar, butonlar oluşturmanız için gerekli kompanentleri barındırıyor. Böylelikle tasarlayacağınız siteyi kodlarken hem mobil hem bilgisayara uyumlu bir şekilde kodlayarak zamandan tasarruf sağlayabilir ve daha kaliteli siteler tasarlayabilirsiniz.

Nasıl kullanılıyor bu Bootstrap? 

Öncelikle HTML dosyanızın <head> tagleri arasına aşağıda yer alanı css dosyasını çağırıyoruz. Bootstrap CDN kodu olduğu için her hangi bir dosya indirmenize gerek yoktur.

<head>
 <!-- Bootstrap CSS Dosyası -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head>

Temel CSS dosyamızı çağırdık eğer yazılan kodda ki linke dikkat ederseniz bootstrap.min.css yazan bir kısım bulunuyor. Bu CSS dosyasının sıkıştırıldığı anlamına geliyor. Üzerinde düzenleme yapmak normal CSS’e göre çok zordur ama internet sitesine çağırma işlemi çok daha hızlı gerçekleştiği için min.css kullanmanızı her zaman tavsiye ederim.

Ayrıca mobilde Bootstrap’in sorunsuz çalışmasını istiyorsak <head> tagleri arasına aşağıda ki koduda eklemeyi unutmayın.

<meta name=viewport content="width=device-width, initial-scale=1">

Şimdi eğer Bootstrap’in sitesinde ki kompanentlerden yararlanmak istiyorsanız ekstradan bir CSS ve JS dosyası çağırmamız gerekiyor. Onlarıda aynı CDN şeklinde direk internet ortamından çekelim.

<html>
<head>

 <!-- Bootstrap Tema Dosyası -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

</head>
<body>
 
 <!-- JS Dosyası -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 <!-- Bootstrap JS Dosyası -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>
</html>

Eğer olurda Bootstrap kompanentleri üzerinde değişiklik yapmanız gerekirse kendi oluşturduğunuz CSS dosyasında ki komutlara !important ekleyebilirsiniz. Böylece öncelik sırası sizin yazdığınız koda geçecektir.

.navbar-default {
   background: #43a2f4 !important;
}

Sonunda dosyaları çekme işlemlerini tamamladık. Gelelim şimdi Bootstrap Grid mantığına…

Öncelikle terimlerden bahsedeyim.

Televizyon/Bilgisayarlar için

<!-- Large -->
<div class="col-lg-12"></div>

Bilgisayar/Tabletler için

<!-- Medium -->
<div class="col-md-12"></div>

Tablet/Telefonlar için

<!-- Small -->
<div class="col-sm-12"></div>

Telefonlar için

<!-- XSmall -->
<div class="col-xs-12"></div>

Fark ettiyseniz hepsine 12 yazdım. Şöyle düşünmeniz gerekiyor. Bootstrap kütüphanesi cihazlarınızın ekranını tam 12 eşit parçaya ayırıyor.

Örneğin ben .col-md-12 class’ı tanımlarsam ekranı tek parça halinde görür. Ama ben aşağıda ki görselde ki bir düzenleme yapmak istiyorum dersem col-md-3 kullanmam gerek. Böylece 4 kutuyu eşit olarak yan yana sığdırabilirim. Tanımladığınız her classları bir satır olarak düşünürsek 12’ye eşitlemediğiniz sürece bir sonraki div alt satıra inmeyecektir. Eğer ben 4 kutu değilde 3 kutu kullansaydım .col-md-4 yapacaktım. Ve bu kodu 3 kez yazacaktım ki bir satırı doldurabileyim.

grid4

Yukarıda yer alan görselin kodlanma şekli nasıl olacak biraz daha detay verir misin diyecek olursanız.. Buyrun;

<!-- 1. Kutu -->
<div class="col-md-3">
   <div class="box"></div>
</div>

<!-- 2. Kutu -->
<div class="col-md-3">
   <div class="box"></div>
</div>

<!-- 3. Kutu -->
<div class="col-md-3">
   <div class="box"></div>
</div>

<!-- 4. Kutu -->
<div class="col-md-3">
   <div class="box"></div>
</div>

Az önce söylediğim gibi 4 kez aynı kodu yazdım. Ve col-md-3 classını tanımladım. 4*3=12 olduğuna göre bu tam bir satırı dolduracaktır. Deneyerek benim yaptıklarımı yaparsanız emin olun mantığını çok hızlı kavrayacaksınız.

Ben normal bir site kodlarken col-md class’ı ile kodluyorum. Site bittikten sonra mobilden siteye girdiğimdeyse Bootstrap col-sm-12 kullanarak kutuları alt alta sıralayacaktır. Bu konuda gerekli düzenlemeler yapmanız gerekebilir. Çünkü Boostrap bazen istediğiniz gibi görsellik sunmayabiliyor bunun içinse…

<!-- Tüm Platformlar İçin Düzenleme -->
<div class="col-lg-6 col-md-8 col-sm-10 col-xs-12"></div>

şeklinde yazabilirsiniz. Tabi bu biraz saçma oldu ama anlamanız bakımından önemli bir durum. Koda baktığımızda div’imiz büyük ekranlarda ekranın yarısını kaplayacak. Standartlara yakın normal pclerde 8/12 şeklinde bir genişliğe sahip olacak. Small’da 10/12 şeklinde. En küçük ekranlarda ise tam ekranı kaplayacak şekilde konumlanacak. Böylece sitenizin responsive kısmını kodlarken dilediğiniz gibi değişiklik yapabilirsiniz.

Container ve Media-Tag’ler

Yazımın sonlarına doğru yaklaşırken 2 önemli konudan daha bahsetmek istiyorum. Bunun dışında Bootstrap’i daha detaylı öğrenmek isteyenleriniz olursa internette biraz araştırma yapmanız gerekecek. Her neyse konumuza geri dönelim.

Container nedir? 

Aslında Container ve Container-Fluid olmak üzere ikiye ayrılıyorlar. Container kullanırsanız sitenizin genişliğini sabitleyerek ortalar ve bozulmaları minimum’a düşürür. Olurda Container-Fluid kullanırsanız genişliği 100% olur böylelikle geniş menüler, siteler vs. oluşturabilirsiniz. Kullanımına gelecek olursak;

<div class="container"></div>

<!-- ya da --> 

<div class="container-fluid"></div>

Media-tag

Şimdi sitenizi tasarladınız. Bilgisayarda görünüm gayet güzel. Ama mobilde istemediğiniz materyaller mevcut diyelim ya da yeni butonlar, resimler eklemek istiyorsunuz. Bunun için Media-tag kullanıyoruz.

<!-- 767px 'den aşağısını etkiler -->
@media(max-width:767px){
   .yeniButton{}
}

max-width veya min-width yazabilirsiniz ayrıca yanında yer alan px’i istediğiniz gibide değiştirebilirsiniz.

.col-lg : 1200px ve üstü

.col-md : 992px – 1199px

.col-sm : 768px -991px

.col-xs : 480px ve altı

Önerim;

Normal site tasarlarken .col-md kullanmanız. Mobil kısmını yaparken .col-sm ile düzenleme yaparsınız. Siteyi yaparken fark edeceksiniz ki .col-lg ve col-xs kullanmanıza gerek kalmamış. Tabi bu işler bol tekrar ve yeni şeyler deneyerek olan türden.

Son olarak büyük .col-md ‘de kullandığınız div’i mobilde gizlemek istiyorsunuz diyelim bunun için çeşitli kodlar yazmanıza gerek yok tek yapmanız gereken;

<div class="col-md-12 hidden-sm"></div>

hidden-sm yazmak. Tabi bunu hidden-md , hidden-xs , hidden-lg olarakta kullanabilirsiniz.

Umarım Bootstrap hakkında yazdığım bu blog yazısı işinize yarar ve çoğu basit kavramını öğrenmenize yarar. Mantığını anladıktan sonrası emin olun geliyor. Aman unutmayın CSS öğrenmeden Bootstrap öğrenmek büyük bir yanlış! Herkese iyi çalışmalar dilerim. Sağlıcakla kalın 🙂



ETİKETLER