Bootstrap nedir, eski twitter çalışanları olan Mark Otto ve Jacob Thornton tarafından geliştirilmiş açık kaynaklı ve ücretsiz bir front end frameworktur. Bootstrap geliştirdiğimiz web sitesini kolay bir şekilde “responsive” (tablet, telefon ve benzeri ekran çözünürlüklerine duyarlı ) hale getiren bir frameworktur. Aynı zamanda web uygulamalarının ve sitelerinin geliştirilmesinde büyük kolaylık sağladığı için beraberinde hızlı geliştirme avantajını da getirmektedir.
Bootstrap tüm bunları yaparken HTML, CSS ve JavaScript dillerinde yazılmış kütüphanelerinden yararlanır. Yazılım geliştiricileri, Bootstrap ile front end tarafında (kullanıcının gördüğü kısım) onlarca satır yazarak gerçekleştirdikleri işlemleri tek satırda gerçekleştirebilirler. Bootsrap hemen hemen tüm internet tarayıcılarıyla uyumlu bir şekilde çalışmaktadır.
Bootstrap Kullanım Alanları
Bootstrap, web sitesi veya web uygulamasının tasarımında
kullanılacak tüm elementleri içinde barındırmaktadır. Bu elementler sayesinde
bootstrap ile bir siteyi kolayca tasarlayabilirsiniz. Bootstrap,
kullanıcılarına tablolar, sliderlar, dropdown menüler, navigasyon araçları,
butonlar, yükleme çubukları, thumbnailler, sayfalandırma etiketleri ve daha birçok
aracı ücretsiz bir şekilde sunmaktadır.
Bootstrap Nasıl Kullanılır?
Hazır bir sistem olmasından dolayı bootstrap’in kullanılması için gerekli linklerin kopyalanıp kaynak kodunuzun bulunduğu dosyada <head> kısmının içine yapıştırılması sistemin hazır hale gelmesine yetmektedir. Bu işlemin ardından bootstrap’in içinde bulunan özellikleri kullanmanızı sağlayan kod parçalarını siteden öğrenerek uygulayabilirsiniz. Bootstrap’ın çalışma mantığı temelde bir sayfanın 12 sütuna bölünmesi ve bu sütunların farklı genişlik ve uzunluktaki cihazlara göre optimize edilmesine dayanmaktadır. Tek bir cihaz için kodlama yapılır ve sistem kendi optimizasyonunu yapar. Bu sayede sütunların farklı cihazlardaki görüntülenme şekilleri değişmekte ve her cihaza uygun bir görünüm elde edilmektedir.
Bootstrap kurulumu için gerekli linkler;
<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
Bu Yazıları da Sevebilirsiniz
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
Bootstrap Avantajları
- Zaman kazandırır: Kod yazmak genelde fazla zaman alan bir eylemdir. Bootstrap özellikle tasarım konusunda satırlaca kod yazarak yapacağınız işlemleri tek satırda halletmenize yaradığı için yazılım süreçlerinde size zaman kazandırır.
- Kolay öğrenilir: Tasarım konusunda getirdiği hızlılık ve tutarlılığın yanında kolay öğrenilebilir bir sistem olmasından dolayı herkes tarafından kolaylıkla kullanılabilir. Örneğin, yazılım geliştirme ekibinize yeni bir kişi katıldığında bu sistemi nasıl kullanacağını öğrenmesi fazla zaman almayacaktır.
- Duyarlılık: Mobil cihazların popülaritesinin artmasıyla birlikte, mobil uyumlu web sitelerine olan ihtiyaç fazlasıyla arttı. Bootstrap mobil uyumlu web siteler oluşturma konusunda gayet başarılıdır. Sayfanızı Böldüğünüz sütunların kaç kare kaplayacağına ve sütunlarınızın mobil cihazlarda nasıl görüntüleneceğine karar vermeniz yeterlidir.
- Izgara sistemi: Bootstrap sunmuş olduğu ızgara sistemi ile sitenizin düzenini rahatlıkla ayarlayabilirsiniz. Bootstrap kullandığınızda web siteniz her zaman 12 adet sütuna bölünür ve bu sütunların her sistemde aynı şekilde işlemesini sağlar. Bootstrap platforma özel içeriklerin gizlenmesini de sağlamaktadır. Bazı öğelerin yalnızca masaüstü sistemlerde görünür hale gelmesini sağlayabilirsiniz. Gizlediğiniz öğeler mobil sistemlerde görüntülenmeyecektir.
Ayrıca HTML, JavaScript ve CSS Sıkıştırma yöntemleri ile ilgili detaylı bilgilere de blog yazımızdan ulaşabilirsiniz.