Bootstrap Grid Sistemi

Bootstrap Grid Sistemi

Bootstrap sayfayı sağdan sola 12 eş parçaya ayırır. Böylece sayfanın responsive görünümü daha güzel olacaktır ve iskeleti daha sağlam olacatır!

Bootstrap Grid Sistemi
Bootstrap Grid Sistemi

Bootstrap grid sistemi her cihaza uygun tasarım oluşturmamızı kolaylaştırır. Bunlar;

  • large(lg):  1200px’den büyük ve eşit cihazlar. ( Masaüstü)
  • medium(md): 992px’den büyük ve eşit cihazlar. (Masaüstü)
  • small(sm): 768px’den büyük ve eşit cihazlar. (Tablet)
  • extra small(xs): 768px’den küçük cihazlar. (Telefon)

Eğer grid sistemini sayfaya yaymak isterseniz;

<div class="container-fluid">COLMD KODLARI</div>

Yukarıdaki gibi kullanabilirsiniz. Ama sayfaya eşit ve ortalı bir şekilde durmasını isterseniz;

<div class="container">COL MD KODLARI</div>

Sayfayı 12’ye oranla ortalı şekilde oluşturabilirsiniz.

Col Md Nasıl Kullanılır ?

Bootstrap’ın sitesinden Bootstrap çalışma kodlarımızı alalım.

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Aliacar.net.tr</title>
  </head>
  <body>
    <h1>Grid Sistemi</h1>

<div class="row">

<div class="container">
<!--  BURAYA COL-MD KODLARIMIZI EKLEYECEĞİZ.-->
</div
</div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Col-MD’nin çalışması için row klası oluşturuyoruz.

Daha sonrasında kodlarımızı yazmaya başlıyoruz.

<div class="col-md4"> COL MD 4</div>
<div class="col-md4"> COL MD 4</div>
<div class="col-md4"> COL MD 4</div>
Bootstrap Grid Yapısı
Bootstrap Grid Yapısı

Yukarıdaki kodları bootstrap kodlarımızın arasına eklediğimiz zaman sayfayı 3 eş parçaya 4’er birim olarak böldüğünü göreceğiz.

Toplam 12 olduğu sürece isterseniz 1 birim olarak, isterseniz 5+5+2 olarak dilediğiniz gibi bölebilirsiniz.

Tüm Kodlar;

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Aliacar.net.tr</title>
  </head>
  <body>
    <h1>Grid Sistemi</h1>

<div class="row">

<div class="container">

<div class="col-md4"> COL MD 4</div>
<div class="col-md4"> COL MD 4</div>
<div class="col-md4"> COL MD 4</div>

</div
</div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

 

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir