Bootstrap ile örnek bir uygulama oluşturmak için basit bir yapıyı inceleyelim. Aşağıda, temel bir HTML yapısı ve Bootstrap kütüphanesi kullanarak yapılmış bir uygulama örneği bulabilirsiniz. Bu örnek, bir sayfa başlığı, bir navigasyon menüsü ve bir içerik bölümü içermektedir.
1. HTML Yapısı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Örnek Uygulama</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigasyon Menüsü -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Uygulama Başlığı</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="#">Ana Sayfa <span class="sr-only">(şu anki sayfa)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkında</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</nav>
<!-- İçerik Bölümü -->
<div class="container mt-4">
<h1>Hoşgeldiniz!</h1>
<p>Bu, Bootstrap ile yapılmış basit bir uygulama örneğidir. Bootstrap'in sunduğu özellikler sayesinde hızlı ve şık bir tasarım oluşturabilirsiniz.</p>
<button class="btn btn-primary">Daha Fazla Bilgi</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
2. Açıklama
- Navigasyon Menüsü:
navbarsınıfı kullanılarak oluşturulmuş bir menüdür.navbar-expand-lgile büyük ekranlarda genişler. - İçerik Bölümü: Bootstrap’in
containersınıfı ile içerik hizalanmıştır.mt-4sınıfı, üstte bir boşluk oluşturur. - Buton:
btnvebtn-primarysınıfları ile mavi bir buton oluşturulmuştur. - JavaScript Bağlantıları: Bootstrap bileşenlerini çalıştırmak için gerekli olan jQuery ve Bootstrap JS dosyaları eklenmiştir.
Bu örneği bir HTML dosyası olarak kaydedip tarayıcıda açarak Bootstrap’in temel özelliklerini görebilirsiniz. Daha fazla özellik ve stil için Bootstrap dokümantasyonuna göz atabilirsiniz!