Bootstrap Başlangıç

Bu sayfayı ekleyen: #Netler

Bootstrap ile Başlarken

Bootstrap; güçlü, zengin özelliklere sahip bir ön yüz (frontend) araç kitidir. Prototipten üretime kadar her şeyi dakikalar içinde inşa edebilirsiniz.

---

Hızlı Başlangıç

Herhangi bir derleme (build) adımına ihtiyaç duymadan, Bootstrap'in üretime hazır CSS ve JavaScript dosyalarını CDN üzerinden ekleyerek hemen başlayabilirsiniz.

Projenizin kök dizininde yeni bir index.html dosyası oluşturun. Mobil cihazlarda doğru duyarlı (responsive) davranış için <meta name="viewport"> etiketini ekleyin.

HTML

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Demosu</title>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
</body>
</html>

Bootstrap CSS ve JS dosyalarını dahil edin. CSS için <link> etiketini <head> içine; JavaScript paketi (açılır menüler, popover'lar ve araç ipuçlarını konumlandırmak için Popper dahil) için <script> etiketini </body> kapatma etiketinden hemen önce yerleştirin.

HTML

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Demosu</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Dilerseniz Popper ve JS dosyalarımızı ayrı ayrı da ekleyebilirsiniz. Açılır menüler (dropdowns), popover'lar veya araç ipuçları (tooltips) kullanmayı planlamıyorsanız, Popper'ı dahil etmeyerek dosya boyutundan tasarruf edebilirsiniz.

HTML

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

---

JS Bileşenleri

Aşağıdaki bileşenler açıkça JavaScript ve Popper gerektirir:

Akordeonlar (Accordions): Collapse eklentimizi genişletmek için
Uyarılar (Alerts): Kapatma/gizleme işlevselliği için
Butonlar (Buttons): Durum geçişleri ve onay kutusu/radyo işlevselliği için
Atlıkarınca (Carousel): Tüm slayt davranışları, kontroller ve göstergeler için
Daraltma (Collapse): İçeriğin görünürlüğünü açıp kapatmak için
Açılır Menüler (Dropdowns): Görüntüleme ve konumlandırma için (Popper gerektirir)
Modallar (Modals): Görüntüleme, konumlandırma ve kaydırma davranışı için
Navigasyon Çubuğu (Navbar): Duyarlı davranışları uygulamak üzere Collapse ve Offcanvas eklentilerimizi genişletmek için
Sekmeli Navigasyonlar (Navs - Tab eklentisi): İçerik panelleri arasında geçiş yapmak için
Offcanvas: Görüntüleme, konumlandırma ve kaydırma davranışı için
Scrollspy: Kaydırma davranışı ve navigasyon güncellemeleri için
Bildirimler (Toasts): Görüntüleme ve kapatma için
Araç İpuçları ve Popover'lar (Tooltips & Popovers): Görüntüleme ve konumlandırma için (Popper gerektirir)

---

Önemli Global Ayarlar

Bootstrap, tarayıcılar arası stilleri standartlaştırmaya yönelik birkaç önemli global stil ve ayar kullanır.

HTML5 Doctype

Bootstrap, HTML5 doctype kullanımını gerektirir. Bu olmadan eksik veya hatalı stillerle karşılaşabilirsiniz.

HTML

<!doctype html>
<html lang="tr">
...
</html>

Viewport Meta

Bootstrap "önce mobil" (mobile-first) yaklaşımıyla geliştirilmiştir. Bu stratejide kod önce mobil cihazlar için optimize edilir, ardından CSS media query'leri kullanılarak bileşenler ölçeklendirilir. Tüm cihazlarda doğru işleme ve dokunmatik yakınlaştırma sağlamak için <head> bölümüne duyarlı viewport meta etiketini ekleyin:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

Box-sizing

CSS'te daha kolay boyutlandırma yapmak için global box-sizing değerini content-box yerine border-box olarak değiştiriyoruz. Bu, iç boşlukların (padding) bir öğenin hesaplanan nihai genişliğini etkilememesini sağlar.

Nadir durumlarda bunu geçersiz kılmanız gerekirse şu şekilde bir stil kullanabilirsiniz:

CSS

.selector-for-some-widget {
  box-sizing: content-box;
}

Reboot

Farklı tarayıcılar ve cihazlar arasındaki tutarsızlıkları düzeltmek ve yaygın HTML öğelerine daha tutarlı sıfırlamalar sağlamak için Reboot kullanılır.

Yorumlar (0)

En Beğenilen En Yeni

Henüz yorum yok. İlk yorumu siz yapın!

Yorum Yap

Yorum yapmak için giriş yapın veya kayıt olun.