Konular

Bootstrap 4 Grid Sistemi

Bootstrap 4 Grid Sistemi, elastik düzenler için kullanılır. Elastik bir düzen, öğelerin sayfada farklı çözünürlüklerde hizalanma şeklini temsil eder. Diğer Bootstrap 4 bileşenlerini öğrenmeden önce ızgarayı nasıl kullanacağınızı anlamanız önemlidir, çünkü hangi öğeyi kullanırsanız kullanın, onu ekranda bir yere yerleştirmeniz gerekecektir.
 
Bootstrap 4 Grid Sistemi

 

İçindekiler

Bootstrap 4 ızgarası kaplar, satırlar ve sütunlardan oluşur. Bunları tek tek ele alıp açıklayacağız.

Bootstrap 4 Konteyner

Bootstrap 4 kapsayıcısı, sınıfına sahip bir öğedir .container. Kap, Bootstrap 4 ızgara sisteminin köküdür ve yerleşimin genişliğini kontrol etmek için kullanılır.

Bootstrap 4 kapsayıcısı, bir sayfadaki tüm öğeleri içerir. Bu, sayfanızın şu yapıya sahip olması gerektiği anlamına gelir: önce HTML sayfasının gövdesi, içine kapsayıcıyı ve kap içindeki diğer tüm öğeleri eklemelisiniz.

<body>
   <div class="container">
    ...
   </div>
</body>

Basit .containersınıf, ekranın genişliğine bağlı olarak mizanpajın genişliğini ayarlar. İçeriği yatay olarak hizalayarak sayfanın ortasına yerleştirir. Bootstrap 4 kabı ile sayfanın sol ve sağ kenarı arasında eşit boşluk vardır.

.containerÖlçekler daraldıkça genişliği ekran olarak genişlik olarak aşağı ve mobil üzerinde tam genişlik olur. Kapsayıcının genişliği, her ekran boyutu için Bootstrap 4 kitaplığı içinde tanımlanır. Tam boyutları burada görebilirsiniz .

Tam genişlikte bir kap, ekran genişliğinden bağımsız olarak ekran boyutunun %100'ünü alır. Kullanmak için sınıfı eklemeniz gerekir. container-fluid.

Bootstrap 4 Grid Sistemi
<div class="container">
  Hello! I am in a simple container.
</div>

<div class="container-fluid">
  Hello! I am in a full-width container.
</div>

CodePen'i buradan görüntüleyebilirsiniz .

İki kap türü arasındaki farkları görmek için kalemi konsolunuzda açıp ekran boyutları arasında geçiş yapabilirsiniz.

Önyükleme 4 Satır

Bootstrap 4 satırı ekranın yatay dilimleridir. Yalnızca sütunlar için sarmalayıcı olarak kullanılırlar. Bunları kullanmak için .rowsınıfa ihtiyacınız var .

<div class="row">
  ...
</div>

Bootstrap 4 satırları hakkında hatırlamanız gereken en önemli şeyler şunlardır:

  • Yalnızca sütunları içermek için kullanılırlar. Satırın içine sütunlarla birlikte başka öğeler de yerleştirirseniz, beklenen sonucu alamazsınız.
  • Konteynerlere yerleştirilmelidirler. Bunu yapmazsanız, sayfanızda yatay bir kaydırma göreceksiniz. Bunun nedeni, satırların 15'lik negatif sol ve sağ kenar boşluklarına sahip olmasıdır. Kap, 15 piksel dolguya sahiptir, bu nedenle kenar boşluklarını dengeler.
  • Sütunlar satırın çocukları olmalıdır. Aksi takdirde hizalanmazlar. Satırlar ve sütunlar, bu katı hiyerarşide birlikte çalışacak şekilde oluşturulur.

Önyükleme 4 Sütun

Artık bu öğreticinin güzel kısmına, Bootstrap 4 sütunlarına geçebiliriz. Sütunlar harika! Ekranı yatay olarak bölmenize yardımcı olurlar.

Satırınıza tek bir sütun yerleştirirseniz, tüm genişliği alacaktır. İki sütun eklerseniz, her biri genişlikten 1/2 alır. Ve böylece herhangi bir sayıda sütun için geçerli.

Bootstrap 4 Grid Sistemi
<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
</div>

Kodu CodePen'de canlı olarak görebilirsiniz .

Yan not: Sütunlar renkli değildir. Görsel olarak daha çekici bir açıklama için renkler ekledim/güzel görünmeleri için.

Sütunlar için Boyutları Ayarlama

.colSınıfı kullanmak, sütunun genişliğini dinamik olarak ayarlar. Bu, bir satırdaki sütun sayısına bağlı olarak, bir sütunun genişliğinin, kabın genişliğinin sütun sayısına bölünmesiyle elde edileceği anlamına gelir.

Ancak sütunları tanımlamanın başka bir yolu daha var. Sütunlar için sınıfları kullanabilir ve boyutlarını tanımlayabilirsiniz.

Varsayılan olarak, Bootstrap 4 ızgarası 12 sütundan oluşur. Sütununuz için 1'den 12'ye kadar herhangi bir boyut seçebilirsiniz. 3 eşit sütun istiyorsanız, .col-4her biri için kullanabilirsiniz (çünkü her biri 3*4 sütun = 12). Veya onlar için farklı boyutlar ayarlayabilirsiniz. İşte bazı örnekler:

Bootstrap 4 Grid Sistemi
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-6">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-5">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-3">
    ...
  </div>
  <div class="col-4">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>

Kodu CodePen'de canlı olarak görebilirsiniz .

Satırınızdaki sütunların toplamı 12'ye ulaşmazsa, tüm satırı doldurmazlar. Sütunların toplamı 12'yi geçerse bir sonraki satıra geçecektir. İlk satır, yalnızca toplamı 12 veya daha düşük olan ilk öğeleri görüntüler.

Sütunlar için Kesme Noktaları Ayarlama

Yukarıdaki örneği alıp mobilde görüntülemek isterseniz bazı sorunlarla karşılaşabilirsiniz. Mobilde beş sütun görüntülemek, içeriği okunamaz hale getirecektir.

İşte bu noktada en güçlü Bootstrap 4 bileşenlerinden biri devreye giriyor. Farklı ekranlarda farklı düzenlere sahip olmak için medya sorguları yazmanız gerekmez, bunun yerine sütun kesme noktalarını kullanabilirsiniz.

Kesme noktası, ekran çözünürlüğü anlamına gelen bir Bootstrap 4 değişkenidir. Bir sınıf için bir kesme noktası belirtirken, sınıfa yalnızca en az kesme noktasının sahip olduğu sayı kadar büyük çözünürlükler için aktif olmasını söylüyorsunuz.

Öğreneceğimiz en basit sınıf .col-[breakpoint]sınıftır. Bu sınıfı kullandığınızda, yalnızca en azından tanımlanmış kesme noktası çözünürlüğüne sahip cihazlarda görüntülendiğinde sütunların davranışını tanımlarsınız. Belirtilen kesme noktasına kadar sütunlarınız varsayılan olarak dikey olarak hizalanır. Ve kesme noktanızdan sonra, sınıf nedeniyle yatay olarak hizalanacaklar.

Bootstrap, kullanabileceğiniz 4 kesme noktasına sahiptir:

  • .col-sm daha büyük cep telefonları için (çözünürlüğü ≥ 576 piksel olan cihazlar);
  • .col-md tabletler için (≥768 piksel);
  • .col-lg dizüstü bilgisayarlar için (≥992px);
  • .col-xl masaüstü bilgisayarlar için (≥1200 piksel)

Diyelim ki iki sütunu arka arkaya küçük ekranlarda dikey, büyük ekranlarda ise aynı satırda görüntülemek istiyorsunuz. Sütunların aynı satırda gittiği kesme noktasını belirtmeniz gerekecektir.

Örneğimizde .col-lgkesme noktasını kullanacağız ve sütunların farklı ekranlarda nasıl göründüğünü göreceğiz. Verilen kesme noktasından (<992px) daha düşük çözünürlükler için sütunlar dikey olarak görüntülenecektir. Bu, mobil cihazlarda ve tabletlerde sütunların şöyle görüneceği anlamına gelir:

Bootstrap 4 Grid Sistemi
< 992px (mobil cihazlar) çözünürlükleri için ekran.

Kesme noktasına (≥992px) eşit veya daha yüksek çözünürlüğe sahip cihazlar için sütunlar aynı satırda ilerleyecektir. Bu, dizüstü ve masaüstü bilgisayarlarda şu sonucu alacağınız anlamına gelir:

Bootstrap 4 Grid Sistemi
Çözünürlükler için ekran >= 992px (dizüstü bilgisayarlar ve daha büyük ekranlar).
<div class="row">
 <div class="col-lg">
   ...
 </div>
 <div class="col-lg">
    ...   
 </div>
</div>

Kodu CodePen'de canlı olarak görebilirsiniz . Codepen'i başka bir pencerede açarsanız ve sayfayı farklı çözünürlüklerde görürseniz, sütunların konumlarının değiştiğini göreceksiniz.

2 sütunun aynı satırda gitmesini istiyorsanız .col-sm, tabletler .col-mdve ekstra büyük ekranlar için kullanacağınız daha büyük cep telefonlarından başlayarak .col-xl.

Sütunlar için Boyutları ve Kesme Noktalarını Ayarlama

Boyutları ve kesme noktalarını birleştirebilir ve format ile tek bir sınıf kullanabilirsiniz .col-[breakpoint]-[size].

Örneğin, dizüstü bilgisayar çözünürlüğünden başlayarak bir satırda farklı boyutlarda üç sütunun hizalanmasını istiyorsanız, şunu yapmanız gerekir:

<div class="row">
  <div class="col-lg-4">
    ...
  </div>
  <div class="col-lg-3">
    ...
  </div>
  <div class="col-lg-5">
    ...     
  </div>
</div>

Bu sonucu <992px çözünürlüklerde alacaksınız:

Bootstrap 4 Grid Sistemi

Ve ≥992px olan ekranlar için:

Bootstrap 4 Grid Sistemi

Yine, kodu CodePen'de canlı olarak görebilirsiniz .

Ancak, küçük mobil çözünürlüklerde satır başına bir sütun, tabletlerde satır başına iki sütun ve dizüstü bilgisayarlarda veya daha yüksek çözünürlüklü cihazlarda dört sütun görüntülemek isterseniz ne olur?

Ardından, her çözünürlükteki davranışı açıklamak üzere tek bir sütun için birden çok sınıf eklersiniz. Birden çok sınıf kullanarak, içeriğin tabletlerde altı, dizüstü bilgisayarlarda üç yuva alacağını belirtirsiniz.

<div class="row">
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
</div>

Sonuç tabletlerde şöyle görünecektir:

Bootstrap 4 Grid Sistemi

Ve dizüstü bilgisayarlarda ve daha yüksek çözünürlüklerde bunun gibi:

Bootstrap 4 Grid Sistemi

Bu örnek ayrıca CodePen'de yayındadır .

Bir alıştırma olarak, ekran boyutuna bağlı olarak farklı sayıda sütuna sahip satırlar oluşturmayı deneyebilir ve tarayıcı konsolunuzda davranışı doğrulayabilirsiniz.

Ofset Sütunları

Eğer kolonlar yanyana olmak istemiyorsanız, sınıfı kullanabilirsiniz .offset-[breakpoint]-[size]birlikte .col-[breakpoint]-[size].

Bu sınıfı kullanmak, sütununuzdan önce boş bir sütun eklemekle aynıdır. İşte basit bir örnek:

Bootstrap 4 Grid Sistemi
<div class="row">
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
  <div class="col-md-4">
     ...     
  </div>  
</div>

Kodu CodePen'de canlı olarak görebilirsiniz .

Sınıfı satırdaki herhangi bir sütunda kullanabilirsiniz. İşte birkaç örnek daha:

Bootstrap 4 Grid Sistemi
<div class="row">
  <div class="col-md-4">
     ...     
  </div>  
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-4 offset-md-2">
     ...    
  </div>  
  <div class="col-md-4 offset-md-2">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">
     ...
  </div>   
</div>

İç içe sütunlar

Bu şaşırtıcı gelebilir, ancak bir sütunun içine bir satır ekleyebilirsiniz!

Söz konusu satır (üst sütununun genişliğine sahip olacak) daha sonra .col-* sınıflar arasında referans verebileceğiniz 12 (daha küçük) sütuna bölünecektir .

Bir sütunun içine yeni bir satır eklediğimizde ne olduğuna bir göz atalım:

Bootstrap 4 Grid Sistemi
<div class="row">
    <div class="col-md-8">
        ...
        <div class="row">
            <div class="col-md-5">
               ...
            </div>
            <div class="col-md-7">
               ...   
            </div>
        </div>
      </div>     
    </div>
    <div class="col-md-4">
       ...
    </div>
</div>

Kodu CodePen'de canlı olarak görebilirsiniz .

Bunu bilerek, bilgilerinizi düzenlemek için birçok seviyeye inebilirsiniz. Sütunlar, alanınızı yönetmeniz için basit bir yol sağlayacaktır.

Bu, Bootstrap 4 Elastik ızgara sistemi ile ilgili temel bilgileri tamamlar. Sorularınız varsa, lütfen yorumlarda bana bildirin, cevaplamaktan memnuniyet duyarım.

Daha fazla zamanınız varsa, işte bazı yararlı kaynaklar:

Bu makale ilk olarak BootstrapBay Blog'da yayınlanmıştır . 14 Days of Bootstrap 4 adlı daha geniş bir Bootstrap 4 öğretici serisinin parçasıdır . Bootstrap 4 bileşenleri hakkında öğrenmeye devam etmek istiyorsanız, bu makaleler başlamak için iyi bir yerdir.

Ve geliştirmenize bir Bootstrap şablonuyla hızlı bir şekilde başlamak istiyorsanız, pazar yerimize göz atabilirsiniz .

 

Kaynak

Yorumunuzu Ekleyin

Bootstrap Takvim Seçtiricisi (Datetime Picker)
Bootstrap 4 Class Referansı
Bootstrap 4 Yardımcı Kısa Kodlar
Yükleniyor...