Bootstrap 5: Başlayın

İçindekiler

Bootstrap nedir?

Bootstrap, daha hızlı ve daha kolay web geliştirme için ücretsiz bir ön uç çerçevedir
Bootstrap, tipografi, formlar, düğmeler, tablolar, gezinme, modallar, görüntü karuselleri ve daha birçokları için HTML ve CSS tabanlı tasarım şablonlarının yanı sıra isteğe bağlı JavaScript eklentilerini içerir
Bootstrap ayrıca size kolayca duyarlı tasarımlar oluşturma olanağı da sağlar

Duyarlı Web Tasarımı Nedir?

Duyarlı web tasarımı, otomatik olarak ayarlanan web siteleri oluşturmakla ilgilidir. küçük telefonlardan büyük masaüstü bilgisayarlara kadar tüm cihazlarda iyi görünmelerini sağlar.

Bootstrap 5 Örneği

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Önyükleme Sürümleri

Bootstrap 5 (2021'de yayınlandı), Bootstrap'in en yeni sürümüdür (2013'te yayınlandı); yeni bileşenler, daha hızlı stil sayfası ve daha fazla yanıt verme hızıyla.

Bootstrap 5, tüm önemli tarayıcıların en son ve kararlı sürümlerini destekler ve platformlar. Ancak Internet Explorer 11 ve aşağısı desteklenmez.

Bootstrap 5 ile Bootstrap 3 ve 4 arasındaki temel farklar şudur: Bootstrap 5, jQuery yerine vanilya JavaScript'e geçti.

Not: Bootstrap 3 ve Bootstrap 4, kritik hata düzeltmeleri ve belge değişiklikleri için ekip tarafından hâlâ desteklenmektedir. ve bunları kullanmaya devam etmek tamamen güvenlidir. Ancak yeni özellikler EKLENMEYECEKTİR onlara.

Neden Bootstrap Kullanılmalı?

Bootstrap'in Avantajları:

Kullanımı kolay: Yalnızca temel HTML ve CSS bilgisine sahip olan herkes Bootstrap'i kullanmaya başlayabilir
Duyarlı özellikler: Bootstrap'in duyarlı CSS'si telefonlara, tabletlere ve masaüstü bilgisayarlara uyum sağlar
Mobil öncelikli yaklaşım: Bootstrap'te, mobil öncelikli stiller temel çerçevenin bir parçasıdır
Tarayıcı uyumluluğu: Bootstrap 5 tüm modern tarayıcılarla (Chrome, Firefox, Edge, Safari ve Opera) uyumludur. IE11 ve aşağısı için desteğe ihtiyacınız varsa şunu kullanmanız gerektiğini unutmayın: BS4 veya BS3.

Bootstrap 5'i nereden edinebilirim?

Bootstrap 5'i kendi web sitenizde kullanmaya başlamanın iki yolu vardır.

Yapabilirsiniz:

Bootstrap 5'i bir CDN'den dahil edin
Bootstrap 5'i getbootstrap.com adresinden indirin

Bootstrap 5 CDN

Bootstrap 5'i kendiniz indirip barındırmak istemiyorsanız, bunu bir CDN'den (İçerik Dağıtım Ağı) ekleyebilirsiniz.

jsDelivr, Bootstrap'in CSS'si ve JavaScript'i için CDN desteği sağlar:

MaksimumCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 CDN'yi kullanmanın bir avantajı:
Birçok kullanıcı zaten indirdi Ziyaret ederken jsDelivr'den Bootstrap 5 başka bir site. Sonuç olarak, sitenizi ziyaret ettiklerinde önbellekten yüklenecek ve bu da yükleme süresinin daha hızlı olmasını sağlayacaktır. Ayrıca çoğu CDN, kullanıcı bir dosya istediğinde bu dosyanın sunulmasını sağlar kendilerine en yakın sunucudan alırlar; bu da yükleme süresinin daha hızlı olmasını sağlar.

JavaScript mi?
Bootstrap 5, JavaScript'i farklı amaçlar için kullanır bileşenler (modeller, araç ipuçları, popover'lar vb. gibi). Ancak, yalnızca Bootstrap'in CSS parçası, onlara ihtiyacınız yok.

Bootstrap 5'i indirme

Bootstrap 5'i kendiniz indirip barındırmak istiyorsanız şu adrese gidin: https://getbootstrap.com/, ve oradaki talimatları izleyin.

Bootstrap 5 ile İlk Web Sayfanızı Oluşturun

1. HTML5 doküman tipini ekleyin

Bootstrap 5, aşağıdakileri gerektiren HTML öğelerini ve CSS özelliklerini kullanır: HTML5 doktipi.

HTML5 doktipini her zaman başına ekleyin lang özelliği ve doğru başlık ve karakter kümesiyle birlikte sayfa:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap 5 mobil önceliklidir

Bootstrap 5, mobil cihazlara duyarlı olacak şekilde tasarlanmıştır. Mobil öncelikli stiller temel çerçevenin bir parçasıdır.

Düzgün oluşturma ve dokunarak yakınlaştırmayı sağlamak için aşağıdaki etiketini dosyanın içine ekleyin. <head> öğesi:

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

width=device-width kısmı sayfanın genişliğini ekran genişliğini takip edecek şekilde ayarlar (cihaza bağlı olarak değişiklik gösterir).

initial-scale=1 kısmı, sayfa ilk yüklendiğinde başlangıç yakınlaştırma düzeyini ayarlar tarayıcı tarafından.

3. Kapsayıcılar

Bootstrap 5 ayrıca site içeriğini sarmak için bir kapsayıcı öğe gerektirir.

Aralarından seçim yapabileceğiniz iki konteyner sınıfı vardır:

.container sınıfı, duyarlı bir sabit genişlikte kapsayıcı sağlar
.container-fluid sınıfı, görünümün tüm genişliğini kapsayan tam genişlikte bir kapsayıcı sağlar

.container

.container-fluid

İki Temel Bootstrap 5 Sayfa

Aşağıdaki örnek, temel bir Bootstrap 5 sayfasının kodunu gösterir (duyarlı sabit genişlikli bir kapsayıcı ile):

Kapsayıcı Örneği

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

Aşağıdaki örnek, temel bir Bootstrap 5 sayfasının kodunu gösterir (tam genişlikte bir kapsayıcıyla):

Kap Sıvı Örneği

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>