Bootstrap Örnek Uygulama 4
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!
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Örnek Uygulama 4 dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!