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.
Bootstrap’in avantajları
- Hızlı Geliştirme: Bootstrap, önceden oluşturulmuş bileşenler ve stillemeler sunar, bu da web geliştiricilerinin projelerini hızlı bir şekilde başlatmalarına yardımcı olur.
- Duyarlı Tasarım: Bootstrap, mobil cihazlar ve farklı ekran boyutları için otomatik olarak duyarlı tasarım sunar, böylece web siteleri her tür cihazda iyi görüntülenir.
- Kapsamlı Belgeasyon: Bootstrap’in ayrıntılı dökümantasyonu, geliştiricilere nasıl kullanılacağına dair açık ve anlaşılır bilgiler sunar.
- Özelleştirme Yeteneği: Bootstrap, temayı özelleştirmenizi ve kendi tasarımınızı eklemenizi sağlar. Renk şemalarını, yazı tiplerini ve stil özelliklerini kolayca değiştirebilirsiniz.
- Topluluk Desteği: Bootstrap, büyük ve aktif bir geliştirici topluluğuna sahiptir. Bu topluluk, soruları yanıtlar, önerilerde bulunur ve yeni özellikler ekler.
- Tarayıcı Uyumluluğu: Bootstrap, tarayıcı uyumluluğu konusunda önemli ölçüde iyileştirilmiştir ve farklı tarayıcılarda sorunsuz bir şekilde çalışır.
- Popülerlik: Bootstrap, çok sayıda web sitesi ve uygulama tarafından kullanıldığı için geniş bir kullanıcı tabanına sahiptir. Bu, çeşitli kaynaklara ve yardım kaynaklarına erişim sağlar.
Bootstrap’in dezavantajları
- Görünümün Standartlaşması: Bootstrap kullanımı, web sitelerinin ve uygulamaların görünümünün birbirine benzer olmasına yol açabilir. Bu, bazı projeler için benzersiz bir tasarım oluşturmak isteyenler için bir sınırlama olabilir.
- Dosya Boyutu: Bootstrap, projenize eklenen CSS ve JavaScript dosyalarının boyutunu artırabilir. Bu, web sayfalarının yavaş yüklenmesine neden olabilir.
- Projeye Uyumsuzluk: Bazı özel projeler, Bootstrap’in standart yapılarına veya sınırlamalarına uymayabilir. Bu durumda özelleştirmeler zor olabilir.
- İhtiyaç Fazlası Özellikler: Projeniz için gerekli olmayan bazı Bootstrap bileşenleri ve özellikleri, gereksiz yükleme süresine neden olabilir.
Basit bir hazır Bootstrap örneği:
–Kodu görmek için tıklayınız.–
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this page to see the responsive effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
ith more than 12 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>Çıktı:
