Bootstrap, web ve mobil projeler geliştirmek için kullanılan en popüler HTML, CSS ve JS kütüphanesidir. (Kişisel web sitemde kullandığım tasarımda bootstrap yardımı ile geliştirilmiştir.)

Bootstrap içinde front-end geliştirme aşamasında neredeyse ihtiyacınız olan tüm elementler mevcuttur. Menüler, tablolar, formlar, butonlar, listeler, medya nesneleri hatta slider gibi akla gelebilecek bir çok element ve bir çok yardımcı class ile front-end geliştirme sürecini azaltmanıza ve üretilen işin kalitesini arttırmanıza yardımcı olacaktır. Özellikle responsive projelerde, bootstrap içinde yer alan grid(ızgara sistemi) ile neredeyse hiç responsive kodları oluşturmadan mobil, tablet ve tüm bilgisayar çözünürlükleri ile uyumlu projeler geliştirebilirsiniz.

Bootstrap front-end geliştirme sürecinde en çok HTML ve CSS kısımlarında size yardımcı olacak gibi gözükse de geniş bir JS kütüphanesine de sahiptir. Modal’lar(Popuplar), tab sistemi, tooltip, collapse menüler ve carousel slider gibi bir çok yapıyı sadece bootstrap ile kolayca projelerinizde kullanabilirsiniz.

Bootstrap’ı Elde Etme

Bootstrap‘ı indirdiğinizde bütün bir paket olarak gelir. Bu paket içinde tüm elementler, yapılar ve yardımcı class’lar mevcuttur. Bazen bazı projelerinizde, bootstrap içindeki bazı elementlere, yardımcı class’lara ve yapılara ihtiyacınız olmayabilir. Hatta bazı yardımcı class’lar ve element stilleri projeniz için uygun olmayabilir. Böyle bir durumda bootstrap’ta yer alan Customize(Özelleştirme) kısmını kullanabilirsiniz. Bu kısım bootstrap’ı bütün bir paket olarak değilde, ihtiyacınız olan kısımları paket içine yerleştirerek bootstrap’ı size sunar.

Örneğin, bootstrap grid sistemi veya form elementlerinin stilleri projeniz ile uyumsuz ise bu kısımları çıkartıp kendi oluşturduğunuz stilleri kullanabilirsiniz. Tabi ki bütün bir paket halinde de kendi oluşturduğunuz stilleri kullanabilirsiniz lakin bootstrap stilleri ile kendi oluşturduğunuz stiller çakışabilir ve istenmeyen sonuçlar ortaya çıkabilir. Bu istenmeyen sonuçları temizlemek için harici stiller oluşturmak zorunda kalabilirsiniz.

Bootstrap Kullanımı

Bootstrap’ı projelerde kullanmak çok basittir. İndirdiğiniz dosyaları projenize ait olan klasöre atıp JS ve CSS kütüphanelerini, bootstrap kullanacağınız sayfalarda çağırmanız yeterlidir.

Örnek:

CDN kullanarak çağırmak

Bootstrap’ı İndirerek Çağırmak:

<!-- Bootstrap CSS -->
<link rel="stylesheet" 
href="www.sitem.com/css/bootstrap.min.css">
<!-- Bootstrap JavaScript -->
<script 
src="www.sitem.com/js/bootstrap.min.js"></script>

Dokümantasyon

Bootstrap ile ilgili bir çok örnek kod ve uygulamalar yapmak istiyordum bu yazıda lakin bootstrap’ın çok net ve çok iyi hazırlanmış bir Türkçe dokümantasyonu mevcut. Tüm elementler ve yapıları örnekler ile açıklamışlar ve daha iyisini yapabileceğimi düşünmüyorum açıkçası.

Bootstrap dokümantasyonları:

HTML/CSS: Genel CSS ayarları, temel HTML elemanları ve grid sistemi ile ilgili dokümantasyon.

Bootstrap Bileşenleri: İkonlar, seçimler, medya nesneleri, navigasyon, uyarı mesajları ve diğer bileşenlerin bulunduğu dokümantasyon.

JavaScript: Modallar, tab sistemleri ve slider gibi javascript elementlerine ait dokümantasyon.

Bonus: Bootstrap Özelleştirme, Bootstrap Expo(Bootstrap ile geliştirilen projelerden bazıları)