"Enter"a basıp içeriğe geçin

Bootstrap Grid Kullanımı

borasahin borasahin
22 Ekim 2024
Yorumlar kapalı

Bootstrap grid sistemi nasıl kullanılır özellikleri nelerdir bu yazımda sizlere bunlardan bahsedeceğim.

Bootstrap Grid Sistemi Nedir?

Bootstrap grid sistemi web projelerinizdeki içeriklerin ızgaralar yardımı ile sayfamıza yan yana veya alt alta gibi farklı durumlarla yerleştirilmeye yarar.

Mobil Cihazlara uyumlu mu?

Evet mobil cihazlar ile de tam uyumluluk sağlar. Bilgisayarınızda yan yana duran öğeleri mobil cihazın ekran çözünürlüğüne göre yan yana alt alta veya görüntüle/gizle gibi özellikleri vardır.

Üstelik bunları sadece bir kaç satır kod ve bir iki tane css sınıfı ile yapıyoruz.

Haydi başlayalım!

<!doctype html>
<html lang="en">
  <head>
    <title>Merhaba Dünya!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/customize.css">
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-sm demo-grid">
        Birinci Sütun
      </div>
      <div class="col-sm demo-grid">
        İkinci Sütun
      </div>
      <div class="col-sm demo-grid">
        Üçüncü Sütun
      </div>
    </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

*demo-grid sınıfı sadece görünümü anlaşılır kılmak için eklenmiştir.

.demo-grid{
	margin-top: 20px;
	border: 1px solid;
	background: #ccc;
}

Sonuç:

Grid sistem 1’den 12’ye kadar olan aralıkla oluşur aşağıdaki örnek ile de sonucu daha iyi görebilirsiniz.

<!doctype html>
<html lang="en">
  <head>
    <title>Merhaba Dünya!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/customize.css">
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
    </div>
    <div class="row">
      <div class="col-2 demo-grid">
        col-2
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
    </div>
    <div class="row">
      <div class="col-3 demo-grid">
        col-3
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
    </div>
    <div class="row">
      <div class="col-4 demo-grid">
        col-4
      </div>
      <div class="col-4 demo-grid">
        col-4
      </div>
      <div class="col-4 demo-grid">
        col-4
      </div>
    </div>
    <div class="row">
      <div class="col-6 demo-grid">
        col-6
      </div>
      <div class="col-6 demo-grid">
        col-6
      </div>
    </div>
    <div class="row">
      <div class="col-12 demo-grid">
        col-12
      </div>
    </div>
    <div class="row">
      <div class="col-11 demo-grid">
        col-11
      </div>
      <div class="col-1 demo-grid">
        col-1
      </div>
    </div>
    <div class="row">
      <div class="col-10 demo-grid">
        col-10
      </div>
      <div class="col-2 demo-grid">
        col-2
      </div>
    </div>
    <div class="row">
      <div class="col-9 demo-grid">
        col-9
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
    </div>
    <div class="row">
      <div class="col-8 demo-grid">
        col-8
      </div>
      <div class="col-4 demo-grid">
        col-4
      </div>
    </div>
    <div class="row">
      <div class="col-7 demo-grid">
        col-7
      </div>
      <div class="col-5 demo-grid">
        col-5
      </div>
    </div>
    <div class="row">
      <div class="col-6 demo-grid">
        col-7
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
      <div class="col-3 demo-grid">
        col-3
      </div>
    </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Sonuç:

Özetle arkadaşlar ekran görüntüsü ve kodlarda da görebileceğiniz gibi grid sistemde bir satırdaki gridlerin sayısını 12’ye tamamlamak gerekir diyebiliriz.

Son zamanlarda çok fazla kullanılmasa da ek olarak belirtmem gerektiğini düşündüğüm bir konu var.

Web sayfamı bootstrap ile full-size tam sayfa yapabilir miyim? Sorusuna cevap olarak evet tek yapmanız gereken kodlarınızda css sınıfı eklerken aşağıdaki gibi küçük bir değişiklik yapmanız yeterli olacaktır.

<div class="container">
<div class="container-fluild">

Sonuç:

Kategoriler:Bootstrap

Bu yazı yorumlara kapalı.