Makale Başlıkları
Bootstrap tasarlanacak web sitelerinin tablet, telefon, bilgisayar gibi her türlü ekran çözünürlüğüne duyarlı olacak şekilde ayarlamaya yarayan açık kaynak kodlu bir framework olarak tanımlanabilir. Bir web sitesi tasarımında, ihtiyaç duyulan tüm faktörlerin düşünüldüğü ve hazır hale getirildiği bir yapıdır. İçerisinde hazır tablo, etiket, buton, açılan menü ve navigasyon bulunur ve bu sayede kolayca responsive yapılabilir.
Bootstrap içerisinde CSS kodları bulunur ve böylece hazır element ve objelere istenildiği gibi müdahale edilebilir. Diğer frameworklerden farkı ise grid sistemini bulundurmasıdır. Grid, ızgara sistemi anlamına gelen ve responsive web sitesi yapmak için kolaylık sağlayan bir sistemdir. Yani web sayfanızı eşit ölçülerde ızgaralara bölebilir ve böylece ekran çözünürlüğü düştükçe sayfanızın konumlanmasını istediğiniz şekilde tasarlayabilirsiniz.
Bootstrap Nedir?
Bootstrap eskiden Twitter’da çalışan Mark Otto ve Jacob Thornton tarafından oluşturulmuş bir web uygulaması geliştirme araç takımıdır. İyi görünümlü bir web sitesi oluşturmaya imkan tanıyan araç, ilginç temalar oluşturmak için de kullanılabilir. Özellikle responsive web tasarımı için kullanıldığı söylenebilir. Responsive web tasarımı, bir web sitesinin tüm cihazlarda yüksek ekran çözünürlüğünde iyi görünmesini sağlar.
Cihazdan bağımsız şekilde sezgisel deneyim sunmak için telefon ve tablet gibi küçük ekran boyutlarına uyum sağlayan web siteleri, Bootstrap sayesinde esnek bir düzene sahip olur ve ziyaretçiler için daha iyi bir kullanıcı deneyimi sunar. Arama motoru optimizasyonu değerini arttırmaya da yardımcı olan web geliştirme aracı, aynı zamanda faydalı bileşenler içerir. Web sitesine kolayca yapıştırılabilen bileşenler;
- Navigation bars,
- Dropdowns,
- Progress bars,
- Thumbnails olarak sayılabilir.
Web sitesine ilgi çekici tasarım ögeleri bu araç sayesinde eklenebilir ve bunları görüntülerken her cihazla uyum sağlanır. Görüntüleri geçerli ekran boyutuna göre otomatik şekilde boyutlandıran araç, önceden tanımlanmış CSS kuralları sayesinde çalışır.
Ücretsiz bir CSS framework olan Bootstrap, açık kaynak kodlu tasarım araçlarından biridir. Cihaz boyutuyla orantılı olarak istenilen temaya uygun tasarımlar yapılmasına olanak tanıyan araç, içerisinde hazır unsurlar bulundurur. Bu sayede rahat bir kullanım sunar. Tasarım süreçlerinin karmaşık yapısından kurtulmak ve özel tasarım projelerini hayata geçirebilmek için bu araç en iyi yol olabilir.
Tasarım stilleri, Javascript ve tasarımla ilgili diğer unsurlar da bu aracın içerisinde yer alıyor. Güncellenen bir tasarım aracı olması sayesinde de yenilikleri ve son moda trendleri kullanarak tasarım yapmaya olanak tanıyor. Chrome, Opera, Mozilla Firefox ve Safari gibi tüm internet tarayıcılarında kullanılabilir özelliği de bulunuyor.
Bootstrap Kullanımı
Hazır kodların bulunduğu Bootstrap bu özelliğiyle kopyala yapıştır şeklinde tasarımlar oluşturmayı sağlar. Sürekli güncellenen bir tasarım aracı olduğundan web sayfanız HTML5 olmalıdır. Ayrıca sayfanın kullanıma hazır hale getirilmesi için Jquery Script ve CSS dosyaları internet sayfasına eklenmelidir. Bu işlemler yapıldıktan sonra referans adresi de getbootstrap.com olarak belirlenmelidir.
Siteye giriş yapıldıktan sonra anasayfanın üst bölümünde yer alan menüden “Getting Started” butonuna tıklanır ve sonrasında tasarıma başlanabilir. 1 satırı 12 sütuna bölen Bootstrap her sütunu farklı cihazlara göre şekillendirir. Örneğin geniş ekranlı cihazlar için üç sütundan oluşan bir tasarım yapmak için 12 ayrı satırı dörderli sütun haline getirebilir ve üçlü sütun yapıları oluşturabilirsiniz.
Bootstrap kullanımı için bir örnek verecek olursak; masaüstü bilgisayar için web sayfası tasarlamayı ele alabiliriz. Bu web sayfası hem masaüstü bilgisayar hem de cep telefonu boyutuna uygun olabilir. Bunu yapmak için .col-md-3 class kullanmalı ve satırları dörde bölmelisiniz. Daha sonra satırların cep telefonlarında ikili sütun şeklinde görünmesi için class etiketini kullanmalısınız. Bu sayede tüm cihazlara uyumlu bir web sitesi oluşturulabilir.
Bootstrap Özellikleri
Bootstrap uyarlanabilir esnek bir düzen sağlaması ve arama motoru optimizasyonu değerini arttırmaya yardımcı olması gibi özellikleri sayesinde çok fazla tercih edilen bir web geliştirme aracıdır. Aracın tercih edilmesini sağlayan diğer özellikleri sıralanacak olursa;
- Responsive yapı sağlar.
- Responsive resimler sağlar.
- Faydalı komponentler içerir.
- JavaScript desteği sağlar.
- Güçlü dokümantasyon desteği sunar.
- Geniş bir topluluğu vardır.
- Tema desteği sağlar.
Bu özelliklere detaylıca bakmak gerekirse; responsive yapı sağlamasının en önemli tercih nedenlerinden biri olduğu söylenebilir. Kendine ait kullanışlı grid sistemiyle gelen araç, zamandan tasarruf ettirerek içeriğinize odaklanmanızı sağlar. Böylece yüksek verim elde edilebilir. Responsive resimler ise, ekran boyutlarına göre görüntülerin yeniden boyutlandırılması için kodla birlikte gelmesini sağlar. Önceden tanımlanan CSS kuralları ve img-circle ve img-round sınıflarının eklenmesiyle resimlerin şekilleri de değiştirilebilir.
Web sitesine kullanıcıların ilgisini çekecek tasarım ögelerinin eklenmesi ve bunların ekran boyutlarına uyumlu olacak şekilde görüntülenmesi de araç içerisindeki faydalı komponentler sayesinde mümkün oluyor. Aynı zamanda JavaScript desteği sayesinde birçok eklentiden yararlanmaya olanak tanır. Web sayfasında gezinirken gezinme çubuğu otomatik olarak güncellenir.
Bir diğer önemli özelliği olan dokümantasyon desteği ise her kod parçasının web sitelerinde açıkça tanımlanmış ve açıklanmış olması anlamına gelir. Temel uygulamalar için örnek kodlara da ulaşılabilir. Bu aracı kullanmaya yeni başlayanlar için bu özellik oldukça fazla kolaylık sağlıyor.
Bootsrap’in Üç Ana Dosyası
Farklı fonksiyonlar gerçekleştiren Bootstrap, üç ana dosyaya sahiptir. Web sitesinin arayüzünü ve fonksiyonelliğini yöneten üç ana dosyası
- Bootstrap.css
- Bootstrap.js
- Glyphicons olarak sayılabilir.
İlk olarak Bootstrap.css dosyası, web sitesinin düzenini yöneten CSS framework olarak tanımlanabilir. Sayfa içeriğini ve yapısını yöneten dosya, web sayfasında istenildiği kadar aynı görünümü oluşturmayı sağlar.
Bir kenarın genişliğini ayarlamak için saatlerce düzenleme yapmanıza gerek kalmaz. Yalnızca metin stilleri değil, tablo ve görsel düzenler gibi diğer açılar da bu dosya sayesinde biçimlendirilebilir.
Bootstrap’in çekirdek dosyası olan Bootstrap.js, JavaScript dosyalarını içerisinde bulundurur. Zaman tasarrufu yapmanıza ve web sitesine farklı fonksiyonellikler kazandırmanızı sağlayan dosya sayesinde web sitesinin içeriğine dinamizm eklemeye de olanak tanır.
Web sitelerinin ayrılmaz parçaları olan ikonlar için ise Glyphicons kullanılır. Ücretsiz olarak kullanılabilen Glyphicon Halfling setini içerir ve standart görünümler sağlamanın yanında temel fonksiyonlar için de kullanılabilir. Daha farklı ikonlar kullanmak için de premium setler satın alabilirsiniz.
BootStrap Kodları
Küçük, orta, büyük her türlü ekrana uyarlanmış bir tasarım için halihazırdaki BootStrap kodları kullanılabilir. Aynı zamanda kullanımında yardımcı olacak kodlara da ulaşabilirsiniz.
- Butonu ortalamak için;
<div class=”d-flex justify-content-center”> <button class=”btn btn-default”>Centered button</button> </div>
- İki farklı containeri alt alta kullanabilmek için;
<div class=”collapse navbar-collapse flex-column” id=”MenuNormal”> <div class=”container”> <div class=”row”> </div> </div> <div class=”container”> <div class=”row”> </div> </div> </div>
- Sütunların genişlik ölçülerinin cihazlara göre otomatik olarak değişmesi için 12 tane sütun 3’e bölünmelidir. Bunun için yazılacak kod ise şu şekilde olmalıdır;
<div class=”row”>
<div class=”col-md-3”></div>
<div class=”col-md-3”></div>
<div class=”col-md-3”></div>
</div>
Web sayfalarının masaüstü bilgisayar veya tablete duyarlı olması için kullanılabilecek kodlar;
- Masaüstü bilgisayarlar için: .col-md-
- Tablet için: .col-sm-
- Akıllı telefonlar için: .col-xs-
Son olarak basit bir HTML sayfası oluşturmak için sayfanın <head></head> tag’inin arasına;
- <link rel=”stylesheet” href=”docs/assets/css/bootstrap.css”>
- <link rel=”stylesheet/less” href=”less/ bootstrap.less”> kodları eklenmelidir.
Alastyr Teknoloji, domain (alan adı), web hosting, bulut sunucu (cloud server) ve veri merkezi hizmetleri ile siz de projelerinizi hayata geçirebilirsiniz. Hızlı, güvenli ve ekonomik web çözümlerimiz ile ihtiyacınız olan performansa sahip olun. Türkiye’nin en çok tavsiye edilen domain ve hosting firması Alastyr, güçlü teknoloji alt yapısı, en güncel yazılımları, 7/24 Türkçe Destek hizmeti ve 15 gün koşulsuz iade garantisi ile hizmet vermektedir.
Web projeleriniz için en uygun fiyatlarla domain kaydet. Bireysel ve kurumsal web projeleriniz için cloud server kirala. Web sitelerinizi hızlı, güvenli ve yüksek performans ile yayınlayabileceğiniz kaliteli hosting paketine sahip ol. Kurumsal mail paketlerimiz ile de işletmeleriniz için yüksek disk kapasitesine sahip sınırsız e-posta hesapları oluşturun.
