BOOTSTRAP
Bootstrap Nedir?
Bootstrap nedir, nasıl kullanılır? Basit örnekler…
Bootstrap popüler bir CSS framework’tür. Bootstrap ekran boyunu algılayarak ekran genişliğine göre eklenenleri boyutlandırır. Responsive tasarımlar yapmak daha kolay hale gelir. Yani yazılan web sayfasının mobildeki görünümü üzerine kafa yormak zorunda kalmayız Bootstrap ile.
Grid yapısı ile ekran eşit parçalar halinde elimizin altında olur. Bu bölmelere istediğimiz gibi müdahale edebiliriz.
Bootstrap kullanmak için aşağıdaki satırı eklemek gerekir(veya Bootstrap css ve js dosyalarını indirmek gerekir):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>Resimler ile başlayalım
Class isimleri ekleyerek framework içindeki özellikleri ekleyebiliriz. Örneğin resim ekliyoruz ve boyutu tüm ekrana sığsın istiyorsak:
class="img-responsive"Eğer resim etrafına kalın yuvarlak yeşil bir çerçeve istiyorsak:
class="thick-green-border"Resmin boyutunun en küçüğe göre aarlı olmasını istiyorsak:
class="smaller-image"Buton ve Yazı
Yazıları ortalamak için:
class="text-center"Daha güzel butonlar için(aşağıdakileri kullandığımızda butonun boyu buton metni kadar olacaktır):
class="btn-default"class="btn"
Buton boyunu tüm sayfa kadar geniş yapmak istiyorsak “btn-block” kullanılır. buton eklendikten sonra devamında yeni satıra geçilir.
<button class="btn btn-default btn-block">Submit</button>“btn-default” yerine “btn-primary” kullanırsak arkaplanı mavi yapabiliriz:
<button class="btn btn-primary btn-block">Submit</button>Başka ön tanımlı buton renkleri:
class="btn-info"
class="btn-danger"Sonuç
Bootstrap konusuna hızlıca bir giriş yaptık. Basit düzeyde iyileştirmelerden bahsettik.
Sonraki yazımızda “grid” konusuna değineceğiz ve bootstrap ile yapabileceklerimiz nelermiş bakmaya devam edeceğiz.
Bu yazıda bahsi geçen konular hakkındaki kodların toplu haline aşağıdaki linkten erişebilirsiniz:
CSS için yazdığım diğer yazılara ulaşmak için “CSS Yazılar” listesine göz atabilirsiniz.
