Bootstrap’e Giriş: Temel Kurulum ve Yapı
Bootstrap, mobil öncelikli ve duyarlı (responsive) web tasarımları için popüler bir CSS kütüphanesidir. Bu ders, Bootstrap’in temel özelliklerini kullanarak hızlı ve modern bir web sayfası oluşturmayı hedeflemektedir.
1. Bootstrap’i Kurmak
Bootstrap’i iki ana yolla projeye dahil edebilirsiniz: CDN (Content Delivery Network) veya yerel olarak dosyaları indirerek.
1.1. CDN ile Bootstrap Kurulumu
En hızlı ve en kolay kurulum yöntemi, Bootstrap’in CDN bağlantısını HTML dosyanıza eklemektir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Örneği</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center text-primary">Merhaba, Bootstrap!</h1>
<!-- Bootstrap JS (Opsiyonel) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
1.2. Yerel Bootstrap Kurulumu
Bootstrap dosyalarını Bootstrap’in resmi sitesinden indirip proje dizinine ekleyebilirsiniz. Bu yöntem, internet bağlantısı gerektirmeden çalışmak isteyenler için uygun bir seçenektir.
2. Bootstrap’in Temel Yapısı
Bootstrap, genellikle üç ana yapı taşına dayanır:
- Izgara Sistemi (Grid System): Sayfa düzenini oluşturmada kullanılır.
- Bileşenler (Components): Düğmeler, kartlar, formlar gibi tekrar kullanılabilir arayüz elemanları sağlar.
- Yardımcı Sınıflar (Utilities): Elemanlara hızlıca stil vermek için kullanılır (margin, padding, renk vb.).
3. Bootstrap Izgara Sistemi
Bootstrap’in ızgara sistemi, 12 sütunlu bir yapıya dayanır. İçerik, cihaz boyutuna göre otomatik olarak hizalanır. İşte temel bir ızgara örneği:
<div class="container">
<div class="row">
<div class="col-md-4">Sol Sütun</div>
<div class="col-md-4">Orta Sütun</div>
<div class="col-md-4">Sağ Sütun</div>
</div>
</div>Açıklama:
-
.container: Sayfa içeriğini sınırlı genişlikte tutar. -
.row: Satır oluşturur. İçinde sütunları barındırır. -
.col-md-4: Cihaz boyutuna göre 4 sütun genişliğinde bir yapı oluşturur (12 sütun sisteminde).
3.1. Responsive (Duyarlı) Izgara Yapısı
Bootstrap, mobil cihazlar için tasarlandığından farklı ekran boyutlarına göre sınıflar sunar:
| Sınıf | Açıklama |
| .col-xs- | Ekstra küçük cihazlar (telefonlar) |
| .col-sm- | Küçük cihazlar (tabletler) |
| .col-md- | Orta boyutlu cihazlar (dizüstü bilgisayarlar) |
| .col-lg- | Büyük cihazlar (masaüstü bilgisayarlar) |
Örnek: Duyarlı Bir Sayfa Düzeni
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-6">Bölüm 1</div>
<div class="col-sm-12 col-md-4 col-lg-6">Bölüm 2</div>
</div>
</div>Bu yapıda, col-sm-12 ile küçük ekranlarda her iki sütun tam genişlikte gösterilir. Ancak orta ve büyük ekranlarda sütun genişlikleri farklı ayarlanır.
4. Bootstrap Bileşenleri: Düğmeler, Kartlar ve Daha Fazlası
Bootstrap, birçok kullanışlı bileşen sunar. Şimdi bazı temel bileşenleri örneklerle görelim.
4.1. Düğmeler (Buttons)
Bootstrap’te düğme oluşturmak oldukça kolaydır. Farklı stillerde düğme örnekleri:
<button type="button" class="btn btn-primary">Birincil</button> <button type="button" class="btn btn-secondary">İkincil</button> <button type="button" class="btn btn-success">Başarılı</button> <button type="button" class="btn btn-danger">Tehlike</button> <button type="button" class="btn btn-warning">Uyarı</button> <button type="button" class="btn btn-info">Bilgi</button>
4.2. Kartlar (Cards)
Kartlar, içerik bloklarını düzenlemek için kullanılır. Bir kart örneği:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Resim">
<div class="card-body">
<h5 class="card-title">Kart Başlığı</h5>
<p class="card-text">Bu, bir Bootstrap kartının örnek açıklama metnidir.</p>
<a href="#" class="btn btn-primary">Git</a>
</div>
</div>4.3. Uyarılar (Alerts)
Kullanıcıya bilgi vermek için uyarılar oldukça kullanışlıdır:
<div class="alert alert-success" role="alert">Başarılı işlem mesajı!</div> <div class="alert alert-danger" role="alert">Hata mesajı!</div> <div class="alert alert-warning" role="alert">Uyarı mesajı!</div> <div class="alert alert-info" role="alert">Bilgi mesajı!</div>
5. Bootstrap ile Formlar
Formlar, kullanıcıdan bilgi toplamak için kullanılan web bileşenleridir. Bootstrap, form elemanlarına stil ve yapı kazandırmak için çeşitli bileşenler sunar.
5.1. Basit Bir Form Oluşturma
Aşağıda Bootstrap kullanarak basit bir form yapısının nasıl oluşturulacağını görebilirsiniz:
<form>
<div class="mb-3">
<label for="email" class="form-label">Email adresi</label>
<input type="email" class="form-control" id="email" placeholder="ornek@site.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Şifre</label>
<input type="password" class="form-control" id="password" placeholder="Şifrenizi girin">
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>Açıklama:
-
.form-control: Form elemanlarını biçimlendirir. -
.form-label: Etiketlerin (label) stilini düzenler. -
mb-3: Alt kenar boşluğu ekler, elemanların arasında mesafe sağlar.
5.2. Form Düzenleme: 2 Kolonlu Yapı
Bir formu iki sütunlu bir yapıya dönüştürebilirsiniz. Bootstrap’in ızgara sistemi ile form elemanlarını düzenlemek mümkündür:
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Ad</label>
<input type="text" class="form-control" id="firstName" placeholder="Adınız">
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Soyad</label>
<input type="text" class="form-control" id="lastName" placeholder="Soyadınız">
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email adresi</label>
<input type="email" class="form-control" id="email" placeholder="ornek@site.com">
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>Bu örnekte, col-md-6 sınıfı ile form iki eşit sütuna bölünmüştür. Böylece, büyük ekranlarda iki kolon halinde görünür.
5.3. Formlarda Seçim Kutuları ve Onay Kutuları (Checkboxes ve Radio Buttons)
Bootstrap, onay ve seçim kutularını da biçimlendirmek için hazır sınıflar sunar.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="onayKutusu">
<label class="form-check-label" for="onayKutusu">
Şartları kabul ediyorum
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="secenek" id="secenek1" value="1">
<label class="form-check-label" for="secenek1">
Seçenek 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="secenek" id="secenek2" value="2">
<label class="form-check-label" for="secenek2">
Seçenek 2
</label>
</div>Açıklama:
-
.form-check: Onay veya seçim kutularını barındıran kapsayıcıdır. -
.form-check-input: Onay kutusunun stilini belirler. -
.form-check-label: Onay kutusuna ait etiketi belirtir.
5.4. Formlarda Satır İçi Düzen (Inline Forms)
Form elemanlarını yatay olarak yerleştirmek için form-inline sınıfı kullanılabilir.
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Ara" aria-label="Ara">
<button class="btn btn-outline-success" type="submit">Ara</button>
</form>Açıklama:
-
d-flex: Flexbox özellikleri ile elemanları yan yana yerleştirir. -
me-2: Sağ kenar boşluğu ekleyerek arama kutusu ve düğme arasında mesafe bırakır.
6. Bootstrap ile Gelişmiş Izgara Düzeni
Bootstrap’in ızgara sistemi, daha karmaşık düzenler oluşturmak için çeşitli seçenekler sunar. Özellikle gömülü ızgaralar ve kolon ofsetleri gibi özellikler düzenlemelerde esneklik sağlar.
6.1. Gömülü (Nested) Izgaralar
Bir sütun içinde başka bir ızgara yerleştirmek mümkündür:
<div class="container">
<div class="row">
<div class="col-6">
Ana Kolon
<div class="row">
<div class="col-6">Gömülü Kolon 1</div>
<div class="col-6">Gömülü Kolon 2</div>
</div>
</div>
<div class="col-6">Ana Kolon 2</div>
</div>
</div>6.2. Kolon Ofsetleri (Offsets)
Bazı durumlarda, sütunları hizalamanız gerekebilir. Bootstrap offset sınıflarını kullanarak boşluk bırakabilirsiniz:
<div class="row">
<div class="col-md-4 offset-md-4">Orta Kolon</div>
</div>Bu örnekte, offset-md-4 sınıfı ile soldan 4 sütun boşluk bırakılmıştır, böylece içerik ortalanmıştır.
6.3. Ekran Boyutlarına Göre Görünürlüğü Kontrol Etme
Bazı içeriklerin belirli ekran boyutlarında gizlenmesi veya gösterilmesi gerektiğinde d- sınıflarını kullanabilirsiniz.
<div class="d-none d-md-block">
Bu içerik sadece orta ve daha büyük ekranlarda görünür.
</div>
<div class="d-sm-block d-md-none">
Bu içerik sadece küçük ekranlarda görünür.
</div>-
d-none: Elemanı gizler. -
d-md-block: Orta ve daha büyük ekranlarda elemanı görünür yapar. -
d-sm-block d-md-none: Elemanı küçük ekranlarda görünür, orta ekranlarda gizli yapar.
7. Bootstrap ile Responsive (Duyarlı) Görsel ve İçerik Yönetimi
Görseller ve içeriklerin ekran boyutlarına göre ölçeklenmesi, web tasarımında önemli bir yere sahiptir. Bootstrap ile duyarlı görseller ve medya içerikleri ekleyebilirsiniz.
7.1. Duyarlı Görseller
Bootstrap, görselleri ekran boyutuna göre ölçeklemek için .img-fluid sınıfını sunar:
<img src="https://via.placeholder.com/500x300" class="img-fluid" alt="Responsive Resim">
Açıklama:
-
.img-fluid: Görselin %100 genişliğe ve otomatik yüksekliğe sahip olmasını sağlar.
7.2. Duyarlı Video Yerleştirme
Duyarlı bir video çerçevesi oluşturmak için .embed-responsive sınıfını kullanabilirsiniz:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/your_video_id" allowfullscreen></iframe>
</div>Açıklama:
-
.ratio-16x9: Videoyu 16:9 oranında gösterir. -
Ratio sınıfları:
1x1,4x3, ve21x9gibi diğer oranları da destekler.
8. Bootstrap Modallar (Modals)
Modallar, sayfa içindeki bir düğme veya bağlantı üzerinden açılabilen açılır pencerelerdir. Kullanıcılar bu pencerelerde form doldurabilir, bilgi görüntüleyebilir veya bir işlem yapabilir.
8.1. Basit Bir Modal Oluşturma
Aşağıda, bir düğmeye tıklanarak açılan basit bir modal örneği yer almaktadır:
<!-- Modal'i açan düğme -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ornekModal">
Modal Aç
</button>
<!-- Modal Yapısı -->
<div class="modal fade" id="ornekModal" tabindex="-1" aria-labelledby="modalBaslik" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalBaslik">Modal Başlığı</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
</div>
<div class="modal-body">
Bu, bir modal örneğidir.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
<button type="button" class="btn btn-primary">Değişiklikleri Kaydet</button>
</div>
</div>
</div>
</div>Açıklama:
-
data-bs-toggle="modal"vedata-bs-target="#ornekModal": Modalın açılmasını sağlar. -
modal fade:fadesınıfı modalın açılış/kapanış geçiş animasyonlarını ekler. -
.modal-dialogve.modal-content: Modalın boyutunu ve içeriğini belirler.
8.2. Farklı Boyutlarda Modal Kullanımı
Bootstrap, modal boyutlarını modal-lg (büyük) ve modal-sm (küçük) sınıfları ile destekler.
<div class="modal-dialog modal-lg"> <!-- Büyük modal için -->
...
</div>
<div class="modal-dialog modal-sm"> <!-- Küçük modal için -->
...
</div>9. Bootstrap Navbar (Navigasyon Menüsü)
Navigasyon menüleri (navbar), kullanıcıların site sayfalarına kolayca erişimini sağlar. Bootstrap ile duyarlı ve şık bir navbar oluşturabilirsiniz.
9.1. Basit Bir Navbar Yapısı
Aşağıda bir navbar örneği verilmiştir:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Ana Sayfa</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="#">Hizmetler</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">İletişim</a>
</li>
</ul>
</div>
</div>
</nav>Açıklama:
-
navbar-expand-lg: Navbar, büyük ekranlarda genişler ve küçük ekranlarda çökerektoggledüğmesine dönüşür. -
navbar-light bg-light: Navbarı açık arka plan rengiyle ayarlar. -
navbar-toggler: Küçük ekranlarda navbarı açmak/kapatmak için kullanılır.
9.2. Navbar’a Dropdown (Açılır Menü) Ekleme
Bir dropdown menü eklemek, daha fazla sayfa bağlantısını düzenli bir şekilde göstermek için kullanışlıdır.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Hizmetler
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Web Tasarımı</a></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
<li><a class="dropdown-item" href="#">Dijital Pazarlama</a></li>
</ul>
</li>Bu yapıda, dropdown-menu sınıfı açılır menüleri düzenler.
10. Bootstrap Sekmeler (Tabs)
Bootstrap ile sekmeli içerik (tabs) oluşturmak oldukça kolaydır. Sekmeler, sayfa içerisinde farklı içerikleri tek bir alanda yönetmek için kullanılır.
10.1. Basit Bir Sekme Yapısı
Sekmeler Bootstrap’in nav-tabs sınıfıyla oluşturulabilir:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Ana Sayfa</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profil</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">İletişim</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Ana Sayfa İçeriği</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profil İçeriği</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">İletişim İçeriği</div>
</div>Açıklama:
-
nav nav-tabs: Sekmeleri oluşturur. -
tab-contentvetab-pane: Sekme içeriklerini düzenler. -
data-bs-toggle="tab": Sekme düğmesinin hangi içeriği açacağını belirler.
11. Bootstrap Çeşitli Yardımcı Sınıflar (Utilities)
Bootstrap, sayfa elemanlarının görünümünü hızlıca değiştirmek için çeşitli yardımcı sınıflar sunar.
11.1. Kenar Boşlukları (Margins) ve Dolgu (Padding)
Kenar boşlukları için m-, dolgu için ise p- sınıflarını kullanabilirsiniz.
<div class="mt-3 mb-3">Üstten ve alttan 3 birim boşluk eklenmiş</div> <div class="p-4">Dört bir yanından 4 birim dolgu eklenmiş</div>
-
m-1ilem-5: 1’den 5’e kadar olan değerlerle kenar boşluğu ayarlayabilirsiniz. -
p-1ilep-5: Dolgu için kullanılır.
11.2. Metin Hizalama (Text Alignment)
Metni hizalamak için text-start, text-center veya text-end sınıflarını kullanabilirsiniz.
<p class="text-center">Bu metin ortalanmıştır.</p> <p class="text-end">Bu metin sağa hizalanmıştır.</p>
11.3. Görünürlük Sınıfları
Ekran boyutlarına göre elemanları göstermek veya gizlemek için d- sınıflarını kullanabilirsiniz.
<div class="d-none d-md-block">Bu içerik sadece orta ve büyük ekranlarda görünür.</div> <div class="d-sm-none d-lg-block">Bu içerik küçük ekranlarda gizlenir, büyük ekranlarda görünür.</div>
12. Bootstrap Özelleştirme (Customization)
Bootstrap’in varsayılan stil ve renklerini kendi projeleriniz için değiştirmek isteyebilirsiniz. Bootstrap, çeşitli özelleştirme seçenekleri sunar, özellikle de SCSS/SASS dosyalarıyla çalışırken çok daha esnek hale gelir.
12.1. Renkleri Özelleştirme
Bootstrap’in varsayılan renklerini CSS veya SCSS ile kolayca değiştirebilirsiniz. Örneğin, sayfanın genel birincil rengini değiştirmek için özel bir CSS sınıfı ekleyebilirsiniz.
:root {
--bs-primary: #007bff;
--bs-secondary: #6c757d;
--bs-success: #28a745;
--bs-danger: #dc3545;
--bs-warning: #ffc107;
--bs-info: #17a2b8;
--bs-light: #f8f9fa;
--bs-dark: #343a40;
}Yukarıdaki örnekte --bs-primary sınıfının değeri #007bff olarak güncellenmiştir. Bu şekilde özelleştirilmiş bir tema rengine sahip olursunuz. SCSS kullanıyorsanız, bootstrap.scss dosyasındaki renk değişkenlerini doğrudan düzenleyerek de özelleştirme yapabilirsiniz.
12.2. Bootstrap SCSS ile Özelleştirme
Bootstrap, SCSS tabanlı olduğu için değişkenlerini kolayca özelleştirebilirsiniz. Bootstrap SCSS dosyalarını projeye dahil ettikten sonra, değişkenleri yeniden tanımlayarak kendi stilinizi oluşturabilirsiniz:
$primary: #1e7e34; $secondary: #4e5d6c; $body-bg: #f0f0f0; @import "bootstrap"; // Bootstrap’in SCSS dosyasını içe aktarın
Bu şekilde, primary rengini ve diğer Bootstrap renklerini değiştirmiş olursunuz. SCSS ile çalışmak, özellikle temayı genişletmek veya tamamen özelleştirmek istediğiniz durumlarda oldukça esneklik sağlar.
12.3. Özel CSS Dosyası Ekleme
Bootstrap ile birlikte kendi özel CSS dosyanızı ekleyerek, bazı bileşenlerin görünümünü değiştirebilirsiniz.
<link rel="stylesheet" href="path/to/bootstrap.min.css"> <link rel="stylesheet" href="path/to/custom-styles.css">
Bu yaklaşımda, özel CSS dosyanızda Bootstrap sınıflarını geçersiz kılabilir veya yeni sınıflar tanımlayabilirsiniz. Örneğin:
.navbar {
background-color: #333;
}
.navbar-brand {
color: #fff !important;
}Önemli Not: Özel CSS dosyanızı her zaman Bootstrap dosyasının ardından eklemelisiniz, böylece CSS dosyanızdaki stil kuralları Bootstrap’in varsayılan stillerini geçersiz kılar.
13. Bootstrap Tema Kullanımı ve Temalarla Çalışma
Bootstrap, varsayılan teması dışında birçok tema ve stil seçeneği sunar. Özellikle dış kaynaklardan indirilen Bootstrap temaları ile projelerinizin görünümünü daha profesyonel hale getirebilirsiniz.
13.1. Bootstrap Temalarını Nerede Bulabilirsiniz?
Bootstrap temalarını aşağıdaki gibi çeşitli kaynaklardan edinebilirsiniz:
- Bootstrap resmi sitesi
- Bootstrap Themes: Ücretli temalar sağlar.
- Start Bootstrap: Ücretsiz ve premium temalar sunar.
- Bootswatch: Ücretsiz Bootstrap temaları sunan bir başka popüler site.
Bu kaynaklardan indirilen temalar genellikle hazır CSS dosyaları içerir. Bu dosyaları CSS dosyanızın yerine ekleyerek temayı sitenize kolayca entegre edebilirsiniz.
13.2. Bootswatch Teması Entegrasyonu
Bootswatch temaları, Bootstrap’in varsayılan yapısını bozmadan renk düzeni ve bazı stilleri değiştirir. Bootswatch’ten bir tema indirdikten sonra, temanın CSS dosyasını projenize dahil edebilirsiniz.
<link href="https://bootswatch.com/5/litera/bootstrap.min.css" rel="stylesheet">
Yukarıdaki kodda, Bootswatch sitesindeki “Litera” temasını projenize dahil etmiş oluyorsunuz. Bu tür temalar, varsayılan Bootstrap yapısını koruyarak farklı renk ve düzen seçenekleri sunar.
14. Bootstrap İleri Düzey Bileşenler ve Kullanımları
Bootstrap’in daha gelişmiş bileşenlerini kullanarak sitenize dinamik ve şık özellikler ekleyebilirsiniz. Aşağıda bazı ileri düzey bileşenleri bulabilirsiniz.
14.1. Tooltip (Bilgilendirme Balonları)
Tooltip, bir bileşenin üzerine gelindiğinde görünen açıklamalardır. Tooltip’leri aktif hale getirmek için JavaScript eklemeli veya Tooltip bileşenini başlatmalısınız.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip örneği">
Üzerine gelin
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>Açıklama:
-
data-bs-toggle="tooltip": Tooltip’i açmak için kullanılır. -
data-bs-placement="top": Tooltip’in konumunu belirler.
14.2. Popover (Açılır Kartlar)
Tooltip’e benzer şekilde, popover’lar daha fazla bilgi içeren açılır kartlardır. Popover’ları da JavaScript ile başlatmanız gerekir.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover başlık" data-bs-content="Bu bir popover örneğidir.">
Popover’ı Aç
</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>15. Bootstrap’te Performans Optimizasyonu
Bootstrap kullanırken sayfa yüklenme süresini artıran gereksiz CSS ve JavaScript kodlarından kaçınmak önemlidir. Özellikle büyük projelerde performansı optimize etmek için aşağıdaki yöntemleri kullanabilirsiniz.
15.1. Sadece Gerekli Bileşenleri Dahil Etme
Bootstrap kütüphanesinin tüm CSS ve JavaScript kodunu kullanmak yerine, yalnızca ihtiyacınız olan bileşenleri içe aktarabilirsiniz. Örneğin, SCSS dosyalarını kendi dosyanıza dahil ederek belirli modülleri çıkartabilirsiniz.
// Gerekli bileşenlerin dahil edilmesi @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/grid"; @import "node_modules/bootstrap/scss/forms"; // İhtiyaç duyulan bileşenleri ekleyin, diğerlerini eklemeyin
15.2. JavaScript Modüllerini Optimize Etme
Bootstrap’in JavaScript bileşenlerinin her biri ayrı bir modül olarak kullanılabilir. Örneğin, yalnızca Tooltip ve Modal gibi belirli modülleri kullanabilirsiniz:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Bu şekilde, sadece Tooltip ve Modal gibi modüllerin çalışmasını sağlayan minimal JavaScript dosyasını kullanmış olursunuz.
16. Bootstrap Kullanımında İpuçları
Son olarak, Bootstrap’i kullanırken daha iyi sonuçlar alabilmek için bazı ipuçları:
-
Mobil Öncelikli Tasarım Yapın: Sayfalarınızı mobil ekranlarda test edin ve Bootstrap’in
responsiveyapısına uygun şekilde kod yazın. - Özel CSS’i Fazla Kullanmayın: Bootstrap bileşenleri üzerinde gereğinden fazla değişiklik yapmamaya çalışın; temel Bootstrap yapısını kullanarak daha uyumlu bir tasarım elde edebilirsiniz.
- Performansa Dikkat Edin: Sadece ihtiyaç duyduğunuz Bootstrap bileşenlerini yükleyerek sayfanızın performansını artırın.
- Tarayıcı Uyumluluğunu Göz Ardı Etmeyin: Farklı tarayıcılarda sayfanızı test ederek tüm kullanıcıların aynı deneyimi yaşamasını sağlayın.
Bir yanıt yazın