BOOTSTRAP – Birlikte Öğrenelim

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 araçlarından biridir.

Tercih edilmesini sağlayan etkenlere bakalım.

Responsive bir yapı sağlar.
Responsive resimler sağlar.
Javascript desteği sağlar.
Tema desteği sağlar.
Güçlü bir dokümantasyon sağlar.

Bu özelliklere detaylı bakarsak; responsive yapının 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 img-circle ve img-round sınıflarının eklenmesiyle resimlerin şekilleri de değiştirilebilir. JavaScript desteği sayesinde birçok eklentiden yararlanmaya olanak tanır. Web sayfasında gezinirken gezinme çubuğu otomatik olarak güncellenir.

Bootstrap Kodlama

Küçük, orta, büyük her türlü ekrana uyarlanmış bir tasarım için halihazırdaki Bootstrap kodları kullanılabilir. Örneğin bir tane butonu ortalayalım.

<div class=”d-flex justify-content-center”>

<button class=”btn btn-default”>Ortalanmış button</button> </div>

Burada div etiketinin içerisine bootstrap classını ekliyoruz. button class dediğimiz yer de butonun rengini vs değiştirebiliriz.

İki farklı containeri alt alta kullanabilmek için;

<div class=”collapse navbar-collapse flex-column” id=”Menu”>

<div class=”container”>

<div class=”row”>

</div>

<div class=”container”>

<div class=”row”>

</div>

</div> şeklinde yapılabilir.

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-

Basit bir HTML sayfasında Bootstrap kullanmak için sayfanın <head></head> tag’inin arasına kütüphaneleri eklememiz gerekir.

<link rel=”stylesheet” href=”docs/assets/css/bootstrap.css”>
<link rel=”stylesheet/less” href=”less/ bootstrap.less”> kodları eklenmelidir.

Bootstrap’in en önemli özelliklerinden biri grid sistemi olarak bilinir. Grid sistemi, sayfayı satırlara ve sütunlara böler ve içeriği bu sütunlara yerleştirir. Bu, responsive (duyarlı) tasarım yapmanıza yardımcı olur ve farklı ekran boyutlarında düzgün görünmesini sağlar.

Grid sistemi kullanarak, aşağıdaki gibi bir sütun yapısı oluşturabilirsiniz:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      İçerik 1
    </div>
    <div class="col-sm-6">
      İçerik 2
    </div>
  </div>
</div>
Bu, iki sütunlu bir düzen oluşturur. Sütunların toplam genişliği 12 birimdir ve col-sm-6 sınıfı her sütunun yarısını kapladığını belirtir.

Bootstrap, bir dizi hazır bileşen sunar. Örneğin, menüler, düğmeler, form elemanları, kartlar ve daha fazlasını içerir. Bu bileşenler, sitenizin görünümünü ve işlevselliğini artırmak için kullanılabilir.

Grid Sistemi

Grid sistemi kullanarak, aşağıdaki gibi bir sütun yapısı oluşturabilirsiniz:

<div class=”container”>
<div class=”row”>
<div class=”col-sm-6″>
İçerik 1
</div>
<div class=”col-sm-6″>
İçerik 2
</div>
</div>
</div>

Bu, iki sütunlu bir düzen oluşturur. Sütunların toplam genişliği 12 birimdir ve col-sm-6 sınıfı her sütunun yarısını kapladığını belirtir. Grid sistemi hakkında daha fazla bilgi edinmek için Bootstrap’in resmi dökümantasyonunu inceleyebilirsiniz.

Bileşenler

<div class="container"> <div class="alert alert-primary" role="alert"> Bu bir bildirimdir. </div> <button class="btn btn-primary">Tıkla</button> <input class="form-control" type="text" placeholder="Adınız"> <div class="card" style="width: 18rem;"> <img src="resim.jpg" class="card-img-top" alt="Resim"> <div class="card-body"> <h5 class="card-title">Kart Başlığı</h5> <p class="card-text">Kart içeriği.</p> </div> </div> </div>

Bu örnek, bir bildirim, bir düğme, bir giriş alanı ve bir kart bileşeni kullanır.

Bootstrap, form tasarımını kolaylaştırmak için çeşitli öğeler ve stiller sunar. Örneğin, aşağıdaki gibi bir form oluşturabilirsiniz:

<form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email adresi</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">Email adresinizi asla başkalarıyla paylaşmayacağız.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Şifre</label> <input

Bootstap Örnekleri

1- HTML Dosyasını Oluşturalım

İlk önce bir HTML dosyası oluşturun ve ona “index.html” adını verin. Dosyayı Bootstrap ile bağlantılandırın (CDN kullanarak daha hızlı olur).

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<title>Bootstrap Projesi</title>
</head>
<body>
<!– İçerik buraya gelecek –>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>

2- Navigasyon Çubuğu Ekleyelim

Sayfanın üst kısmına bir navigasyon çubuğu ekleyelim. Bu, kullanıcıların site içinde gezinmesine yardımcı olacak.

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Bootstrap Projesi</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Anasayfa <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Hakkımızda</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>İletişim</a>
</li>
</ul>
</div>
</nav>

Hero Bölümü Ekleyelim

Bir “hero” bölümü ekleyelim. Bu bölüm, genellikle büyük bir görsel ve başlıkla birlikte gelir ve siteyi anlatır.

<header class=”hero bg-primary text-white text-center”>
<div class=”container p-5″>
<h1 class=”display-4″>Hoş geldiniz!</h1>
<p class=”lead”>Bu bir Bootstrap örneği anasayfadır.</p>
</div>
</header>

İçerik Bölümü Ekleyelim

Bazı içerik ekleyelim. Bu örnekte, 3 kart kullanacağız.

<section class=”container my-5″>
<div class=”row”>
<div class=”col-lg-4 mb-4″>
<div class=”card”>
<img src=”image1.jpg” class=”card-img-top” alt=”Image 1″>
<div class=”card-body”>
<h5 class=”card-title”>Card title 1</h5>
<p class=”card-text”>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href=”#” class=”btn btn-primary”>Go somewhere</a>
</div>
</div>
</div>
<!– 2 more cards… –>
</div>
</section>

Footer Ekleyelim..

En sonunda, bir footer (alt bilgi) ekliyoruz

Başka bir örnek yapalım.

İlk olarak, aşağıdaki temel HTML dosyasını oluşturun ve Bootstrap’ı ekleyelim.

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<title>Kübra Demetgül’ün Blogu</title>
</head>
<body>
<!– İçerik buraya gelecek –>

2. Navigasyon Bar

Navigasyon çubuğuna eklenen her bir nav-item bir blog kategorisi olacak.

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Ayhan Bozkurt</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#hakkimda”>Hakkımda</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#yayinlar”>Yayınlar</a>
</li>
<!– Diğer kategorileri buraya ekleyin… –>
</ul>
</div>
</nav>

3. Hakkımda Bölümü

Hakkımda bölümünde, bir resim ve bir hakkımda metni olacak.

<section id=”hakkimda” class=”container my-5″>
<div class=”row”>
<div class=”col-lg-4″>
<img src=”ayhan.jpg” alt=”Ayhan Bozkurt” class=”img-fluid”>
</div>
<div class=”col-lg-8″>
<h2>Hakkımda</h2>
<p>Ben Ayhan Bozkurt, bir Python, Yapay Zeka ve Veri Bilimi uzmanıyım…</p>
</div>
</div>
</section>

4. Yayınlar Bölümü

Yayınlar bölümünde, Kübra ‘nın blog yazıları listelenecek. Burada birkaç kart kullanacağız.

<section id=”yayinlar” class=”container my-5″>
<h2>Yayınlar</h2>
<div class=”row”>
<div class=”col-md-4 mb-4″>
<div class=”card”>
<img src=”yazı1.jpg” class=”card-img-top” alt=”Yazı 1″>
<div class=”card-body”>
<h5 class=”card-title”>Yazı Başlığı 1</h5>
<p class=”card-text”>Bu bir örnek blog yazısıdır…</p>
<a href=”#” class=”btn btn-primary”>Devamını Oku</a>
</div>
</div>
</div>
<!– Diğer yazılar… –>
</div>
</section>

5. İletişim Bölümü

İletişim bölümünde bir form olacak.

<section id=”iletisim” class=”container my-5″>
<h2>İletişim</h2>
<form>
<div class=”form-group”>
<label for=”name”>İsim</label>
<input type=”text” class=”form-control” id=”name”>
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” class=”form-control” id=”email”>
</div>
<div class=”form-group”>
<label for=”message”>Mesajınız</label>
<textarea class=”form-control” id=”message” rows=”3″></textarea>
</div>
<button type=”submit” class=”btn btn-primary”>Gönder</button>
</form>
</section>