Bootstrap 5 Başlangıç

Bootstrap nedir?

  • Bootstrap, web geliştirmeyi daha hızlı ve daha kolay hale getiren ücretsiz bir ön uç çerçevesidir
  • Bootstrap, yerleşim, formlar, düğmeler, tablolar, navigasyon, modül, görsel slayt gibi birçok alanda kullanılmak üzere HTML ve CSS tabanlı tasarım şablonları içerir
  • Bootstrap, zengin JavaScript eklentileri sunar
  • Bootstrap, yansıtıcı tasarımı kolayca oluşturmanıza olanak tanır

Yansıtıcı web tasarımı nedir?

Yansıtıcı web tasarımı, telefonlar veya büyük masaüstü bilgisayarlar gibi tüm cihazlarda kullanım deneyimini artırmak için otomatik olarak ayarlanabilen web siteleri oluşturmayı amaçlar.

Bootstrap 5 Örneği

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>İlk Bootstrap sayfam</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>1. Sütun: Bahar</h3>
      <p>Özel bir gün, Sishui kıyısında güzellik ararım, sonsuz manzara bir anda yeni başlar.</p>
      <p>Yanında rüzgarın yüzünü kolayca tanırım, binlerce renk her zaman bahar gibidir.</p>
    </div>
    <div class="col-sm-4">
      <h3>2. Sütun: İlk Yaz Dönemi</h3>
      <p>Yıpranmış kırmızı ve morlar toz haline gelmiştir, kuş cıvıltısında yaz mevsimi yeni başlamıştır.</p>
      <p>Yolda bitki yürüyüşü bitmez, başta太平人 bilir.</p>
    </div>
    <div class="col-sm-4">
      <h3>3. Sütun: Dağ Yürüyüşü</h3>
      <p>Uzakta soğuk dağların taş yolları eğri, bulutların doğduğu yerde evler vardır.</p>
      <p>Uzakta yürürken meyve ağaçlarının gece yarısı, donduran yapraklar Şubat çiçeklerinden daha kırmızıdır.</p>
    </div>
  </div>
</div>

Kendi kendine deneyin

Bootstrap Sürümü

Bootstrap 5 (2021 yılında yayınlanmıştır) Bootstrap'un en yeni sürümüdür (2013 yılında yayınlanmıştır); yeni bileşenler, daha hızlı stiller ve daha hızlı yanıt yeteneği sunar.

Bootstrap 5, tüm ana tarayıcılar ve platformların en yeni istikrarlı sürümlerini destekler. Ancak, Internet Explorer 11 ve daha eski sürümleri desteklememektedir.

Bootstrap 5 ve Bootstrap 3 & 4 arasındaki ana fark, Bootstrap 5'nin Vanilla JavaScript yerine jQuery'ye geçiş yapmış olmasıdır.

Açıklama:Takımı Bootstrap 3 ve Bootstrap 4'in kritik hata düzeltmeleri ve belge değişikliklerini hala desteklemektedir, bu nedenle bunları kullanmak tamamen güvenlidir. Ancak, bunlara yeni özellikler eklenmeyecektir.

Neden Bootstrap kullanmalıyım?

Bootstrap'un Avantajları:

  • Kullanımı Kolay:HTML ve CSS hakkında temel bilgi sahibi olan herkes Bootstrap'u hemen kullanmaya başlayabilir.
  • Duyarlı Özellikler:Bootstrap'un duyarlı CSS, telefonlar, tabletler ve masaüstü bilgisayarlar için ayarlanabilir.
  • Mobil öncelikli yöntem:Bootstrap'te, mobil öncelikli stiller, temel çerçevesinin bir parçasıdır.
  • Tarayıcı Uyumluluğu:Bootstrap 5, Chrome, Firefox, Edge, Safari ve Opera gibi tüm modern tarayıcılarla uyumludur.

Dikkat:IE11 ve daha eski sürümleri desteklemeniz gerekiyorsa, BS4 veya BS3 kullanmanız zorunludur.

Bootstrap 5 nereden alınır?

Bootstrap 5'i kendi web sitenizde kullanmak için iki yöntem var.

Siz şu şekilde yapabilirsiniz:

  • CDN'den Bootstrap 5 içeren
  • getbootstrap.com'dan Bootstrap 5'i indirin

Bootstrap 5 CDN

Bootstrap 5'i kendiniz indirip barındırmak istemiyorsanız, CDN (içerik teslim ağı) üzerinden referans verebilirsiniz。

CodeW3C.com, Bootstrap'un CSS ve JavaScript için CDN desteği sağlar:

MaxCDN:

<!-- En yeni derlenen ve sıkıştırılmış CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- En yeni derlenen JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Bootstrap 5 CDN'nin avantajlarından biri:

Birçok kullanıcı Bootstrap 5'yi jsDelivr'dan zaten indirmiştir. Bu nedenle, sitenizi ziyaret ettiklerinde, hızlı bir şekilde önbellekten yüklenir, bu da yükleme süresini kısaltır. Ayrıca, çoğu CDN, kullanıcı dosyaları talep ettiğinde en yakın sunucudan hizmet sağlar, bu da daha hızlı bir yükleme süresine neden olur。

JavaScript mi?

Bootstrap 5, farklı bileşenler için JavaScript kullanır (örneğin, modül, ipucu, açılır pencere vb.). Ancak, Bootstrap'un sadece CSS kısmını kullandığınızda, bunlara ihtiyacınız yoktur。

Bootstrap 5 İndir

Bootstrap 5'yi kendiniz indirip barındırmak istiyorsanız, ziyaret edin: https://getbootstrap.com/ve ardından oradaki talimatlara göre işlem yapın。

Bootstrap 5 ile ilk web sayfanızı oluşturun

1. HTML5 Doküman Türünü Ekleyin

Bootstrap 5, HTML5 doctype'ye ihtiyaç duyan HTML öğeleri ve CSS özelliklerini kullanır。

Her zaman HTML5 doctype'yi ve lang özniteliğini, doğru başlık ve karakter seti içeren sayfa başlangıcına ekleyin:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Örneği</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 Mobil Öncelikli

Bootstrap 5'nin tasarım amacı mobil cihazlara uyumluluktur. Mobil öncelikli stiller, temel çerçeveye bir parçasıdır。

Düzgün render ve dokunmatik çarpma sağlamak için <head> Öğe içine aşağıdakileri ekleyin <meta> İşaretçi:

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

width=device-width Sayfanın genişliğini cihazın screen-width'ına (cihazdan cihaza değişir) izlemek için ayarlar。

initial-scale=1 Tarayıcı'nın sayfayı ilk yükleme anındaki başlangıç çarpma seviyesini ayarlar。

3. Konteyner

Bootstrap 5 hala站点内容包装的元素需要。

İki konteyner sınıfı seçilebilir:

  1. .container sınıfı duyarlı sabit genişlikli bir konteyner sağlar
  2. .container-fluid sınıfı tam genişlikli bir konteyner sağlar, ekran genişliğinin tamamını kaplar

İki temel Bootstrap 5 sayfası

Container Örneği

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap örneği</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>İlk Bootstrap sayfam</h1>
  <p>Bu bölüm .container sınıfında bulunur.</p>
  <p>.container sınıfı, duyarlı sabit genişlikli konteyner sağlar.</p>
</div>
</body>
</html>

Kendi kendine deneyin

Container Fluid Örneği

Aşağıdaki örnek, temel Bootstrap 5 sayfasının (tam genişlikli konteynerle) kodunu gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap örneği</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>İlk Bootstrap sayfam</h1>
  <p>Bu bölüm .container-fluid sınıfında bulunur.</p>
  <p>.container-fluid sınıfı tam genişlikli konteyner sağlar, ekran genişliğinin tamamını kaplar.</p>
</div>
</body>
</html>

Kendi kendine deneyin