Bootstrap 4 Dersleri


2. Taşıyıcılar/Kapsayıcılar

Bootstrap 4 ile İlk Web Sayfasını Oluşturma

1. HTML5 doctype eklenir

Bootstrap 4, HTML5 doctype gerektiren HTML öğelerini ve CSS özelliklerini kullanır.

Web sayfası kodlarının başına HTML5 belgesini, lang niteliği ve doğru karakter kümesiyle birlikte eklenir:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
</head>
</html>

2. Bootstrap 4 mobil cihaz önceliklidir

Bootstrap 4, mobil cihazlara duyarlı olacak şekilde tasarlanmıştır. Stiller, mobil cihaz öncelikli olarak Yazılım Çatısı Çekirdeğinin (core framework) bir parçasıdır.

Düzgün görüntü oluşturma ve dokunma yakınlaştırma için, <head> öğesinin içine aşağıdaki <meta> etiketini ekleyin:

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

width=device-width kısmı, cihazın ekran genişliğini (cihaza bağlı olarak değişecek şekilde) ayarlar.

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

3. Taşıyıcılar/Kapsayıcılar

Bootstrap 4 aynı zamanda site içeriklerini sarmak için bir içeren taşıyıcı/kapsayıcı eleman gerektirir.

Seçilebilecek iki çeşit taşıyıcı/kapsayıcı sınıfı vardır:

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

.container

.container-fluid

İki Adet Temel Bootstrap 4 Sayfası

Aşağıdaki örnek, temel bir Bootstrap 4 sayfasının kodunu içerir (duyarlı/responsive sabit genişlikli bir taşıyıcı ile):


.container Sınıfı ile Temel Bootstrap 4 Sayfa Kodları

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
</body>

<div class="container">
  <h1>İlk Bootstrap sayfası</h1>
  <p>Birkaç kelimelik yazı örneği.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

.container-fluid Sınıfı ile Temel Bootstrap 4 Sayfa Kodları

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
</body>

<div class="container-fluid">
  <h1>İlk Bootstrap sayfası</h1>
  <p>Birkaç kelimelik yazı örneği.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 4 Şablonu