Bootstrap Kütüphanesi ile Hızlı Arayüz Geliştirme

Stajımın üçüncü haftasında, modern web tasarımın en popüler araçlarından biri olan Bootstrap ile tanıştım. Eğitmenim Bootstrap’in CSS ve JavaScript temelli açık kaynak bir kütüphane olduğunu ve hızlı arayüz geliştirme sürecinde çokça kullanıldığını anlattı.

Bootstrap Nedir?

Bootstrap, web projeleri için önceden tanımlanmış CSS sınıfları ve JavaScript bileşenleri barındıran bir framework’tür. Mobil uyumlu ve duyarlı (responsive) tasarımlar yapmak için oldukça idealdir.

Bootstrap'i Projeye Dahil Etme

Sayfama Bootstrap'i CDN yoluyla ekledim:


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

İlk Bootstrap Sayfam

İlk olarak bir başlık, buton ve uyarı kutusu oluşturdum:


<h1 class="text-center text-primary">Merhaba Bootstrap!</h1>
<button class="btn btn-success">Tıkla</button>
<div class="alert alert-warning">Bu bir uyarıdır.</div>

Bu sınıflar sayesinde görselliği CSS yazmadan hızlıca sağlayabildim.

Grid Sistemi ile Sayfa Düzeni

Bootstrap’in en güçlü yönlerinden biri grid (ızgara) sistemidir. 12 kolonlu bu yapı ile sayfayı bölümlere ayırabildim.


<div class="container">
  <div class="row">
    <div class="col-md-6">Sol Kısım</div>
    <div class="col-md-6">Sağ Kısım</div>
  </div>
</div>

Bu yapı sayesinde sayfam her ekranda düzgün görünmeye başladı.

Kullandığım Bootstrap Bileşenleri

Navbar: Navigasyon menüsü
Card: Kutulu içerik sunumu
Carousel: Slayt gösterisi
Modal: Açılır pencere
Form: Giriş kutuları ve butonlar

Uygulama: Bootstrap ile Hakkımızda Sayfası

Stajımda “Hakkımızda” başlıklı bir sayfa tasarlamam istendi. Bootstrap’in hazır sınıflarını kullanarak, responsive ve profesyonel görünümlü bir sayfa hazırladım. Özellikle card yapısı çok işimi gördü.

Karşılaştığım Zorluklar

İlk başta sınıf isimlerini hatırlamakta zorlandım
Grid sisteminde hizalamalarda bozulmalar oldu
Mobilde görünümler tam oturmayınca media query destekli ayar yaptım

Genel Değerlendirme

Bootstrap sayesinde sıfırdan CSS yazmak zorunda kalmadan hızlı ve etkili arayüzler oluşturabildim. Öğrendiğim bu kütüphane sayesinde profesyonel web sitelerine bir adım daha yaklaştım. Artık kullanıcı dostu, mobil uyumlu web arayüzleri tasarlayabiliyorum.