Bootstrap Türkçe Tema Yapımı
Günümüzde bir çok web sitesinin alt yapısını oluşturan Bootstrap hem kullanım kolaylığı hemde responsive özelliği ile kullanıcılar arasında çok ilgi görmektedir.
Bootstrap Nedir Nasıl Kullanılır
Bootstrap Html5 yapısını kullanan Css3 ve JavaScript destekli görsel yardımcı bir dildir. Kullanımı oldukça basit ve kullanışlıdır. Yapacağımız ilk iş Bootstrap'ı indirmek
Şu adresten Bootstrap İndirin indirdiğiniz zip'te yer alan dosyaları gerekli dizinlere yerleştirdikten sonra başlayalım.
<!-- CSS Dosyası -->
<link rel="stylesheet" href="css_dizininiz/bootstrap.min.css">
<!-- CSS Tema Dosyası -->
<link rel="stylesheet" href="css_dizininiz/bootstrap.min.css"><!-- JS Dosyası -->
<script src="js_dizini/bootstrap.min.js"></script> Bu kodları <head> </head> arasına yerleştirin ve <body> tagının arasına kod yazarak ilk sitenizi yapmaya başlayalım
<div class="container"> <!-- Sitenin ana omurgası tüm site bu div'in içine alınacak --></div>Container ana omurgadır ön tanımlı olarak 1170px dir eğer sitenin tamamını kaplayan bir div oluşturmak isterseniz
<div class="container-fluid"> <!-- Sitenin ana omurgası tüm site bu div'in içine alınacak --></div>diye oluşturmanız gerekir bu durumda div in genişliği %100 olur. Container tag'ının sağdan ve soldan padding değeri 15px dir.
İkinci önemli tag ROW tag'ı dır. Bu tag satır anlamına gelir ve sağdan soldan -15px lik bir genişlik sağlar buda yapacağınız div etiketinin container içinde sağdan soldan 0 olmasını sağlar
<div class="container">
<div class="row">
Satır içerikleri burada olacak
</div>
</div>Şuan'a kadar sitenin ana yapısını oluştuduk ve yeni tag'ları öğrenmeye başlayalım
col-xs- = bu tag ekran boyutu 0 ile 768px arasında geçerlidir
col-sm- = bu tag ekran boyutu 768px ve üstü geçerlidir
col-md- = bu tag ekran boyutu 990px ile 1200px arasında geçerlidir
col-lg- = bu tag ekran boyutu 1200px ve daha yukarısı için geçerlidir.
Yani ne demek?
Örneğin bir site yaptınız ve bu sitenin ekranında 4 tane yan yana ürün gösterimi var ama bu cep telefonunda yan yana 4 tane gösterince küçük olur geniş ekranlı bilgisayarda 4 tane az tablette biraz küçük
Ama bizim istediğimiz Geniş ekranlı bilgisayarda 6 tane göstersin Küçük ekranlı bilgisayarda 4 tane Tablette bakınca 3 tane ama cep telefonunda ise 2 tane yan yana göstersin
Yani ekran boyutu küçüldükçe tek satırda gösterilecek ürün sayısı ekrana oranla değişsin işte bu durumda ekran boyutuna göre col- kullanmamız gerekir Örnek
Çok önemli col- sonrasındaki sayıların toplamı 12 etmelidir. Mesela 6+6 veya 4+4+4 ya da 2+4+5+3 olabilir
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
Ürün Adı 12/2 6da bir demektir. 12/3 4 olur. 12/4 3 demektir. 12/6 2 demektir
</div>
</div>Şimdi açılayalım ne demek istediğimi
col-lg-2 lg 1200px ve üstü ekranlarda geçerlidir. 2 ise 12 li stunun kaç parçasını kullanmamız gerektiğini söyler site 12'li dilime bölünmüş sitenin 2 parçasını kullan demektir. Yani yan yana 2'li 6 tane dilim kullanabiliriz. Bu da demek oluyor 6 tane div yan yana olacak
col-md-3 lg 990px ve 1200px arası ekranlarda geçerlidir. 3 ise 12 li stunun kaç parçasını kullanmamız gerektiğini söyler site 12'li dilime bölünmüş sitenin 3 parçasını kullan demektir. Yani yan yana 3'li 4 tane dilim kullanabiliriz. Bu da demek oluyor 4 tane div yan yana olacak
Diğer aşamalarda bunun gibi olur
Bir div'in görünümü aşağıdaki gibi olur 8+4 = 12
Bootstrap div yapısı bu şekilde ikinci dersimizde CSS yapısnı öğreneceğiz