Bootstrap Grid Sistemi Nedir?

Bootstrap Grid sistemi, web sayfalarında responsive ve esnek düzenler oluşturmak için kullanılan 12 sütundan oluşan bir yapıdır. Bu sistem, sayfa içeriğini farklı ekran boyutlarına göre düzenlemeye olanak tanır. XS, SM, MD, LG, XL ve XXL gibi sınıflar kullanarak içeriklerin ekran boyutlarına göre nasıl davranacağını belirleyebilirsiniz.

1. Grid Sistemi ve Ekran Boyutları

Bootstrap grid sistemi, ekran boyutlarını altı kategoriye ayırır:

• XS (Extra Small): 0px ve üzeri (Mobil)
• SM (Small): 576px ve üzeri (Küçük tabletler)
• MD (Medium): 768px ve üzeri (Tabletler)
• LG (Large): 992px ve üzeri (Dizüstü bilgisayarlar)
• XL (Extra Large): 1200px ve üzeri (Büyük ekranlar)
• XXL (Extra Extra Large): 1400px ve üzeri (Daha büyük ekranlar)

Her bir boyut için farklı sınıflar kullanılarak sayfa düzeni kontrol edilebilir. Örneğin, .col-sm-4 sınıfı, küçük ekranlarda (576px ve üzeri) 12 sütunun 4'ünü kaplar.

2. Grid Sistemi Yapısı

Grid sistemi, container, row ve col yapılarından oluşur:

• Container: İçeriği merkezler ve kenarlardan boşluk bırakır.
• Row: Sütunları yatayda hizalar ve satır oluşturur.
• Col: İçeriğin ekranda ne kadar yer kaplayacağını belirler.

Örnek Kod:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">Sütun 1</div>
        <div class="col-12 col-sm-6 col-md-4">Sütun 2</div>
        <div class="col-12 col-md-4">Sütun 3</div>
    </div>
</div>

Yukarıdaki kod, mobil cihazlarda her sütunun tam genişlik kapladığı, küçük ekranlarda iki sütunun yan yana olduğu ve orta ekranlarda üç sütunun eşit şekilde yan yana olduğu bir düzen oluşturur.

3. Responsive Sütunlar

Responsive tasarım için farklı sütun sınıflarını kullanabilirsiniz. Örneğin, .col-lg-3 sınıfı, büyük ekranlarda (992px ve üzeri) sütunun genişliğini belirler.

Örnek Kod:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-6">Sütun 1</div>
        <div class="col-lg-3 col-md-6">Sütun 2</div>
        <div class="col-lg-3 col-md-6">Sütun 3</div>
        <div class="col-lg-3 col-md-6">Sütun 4</div>
    </div>
</div>

Bu örnekte, büyük ekranlarda dört sütunun yan yana olduğu, orta ekranlarda ise iki sütunun yan yana dizildiği bir yapı elde edilir.

4. Bootstrap Grid Sistemi ile Özel Kırılma Noktaları

Grid sisteminde, belirli ekran boyutlarına göre farklı düzenler yaratmak için çeşitli sınıflar kullanılır. Örneğin, .col-md-4 sınıfı, orta boyutlu ekranlarda sütunun 12 sütundan 4'ünü kaplamasını sağlar.

Örnek Kod:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-lg-6">Büyük Sütun</div>
        <div class="col-12 col-sm-4 col-lg-6">Küçük Sütun</div>
    </div>
</div>

Bu örnekte, küçük ekranlarda bir sütun 8, diğer sütun 4 sütun genişliğinde olacak şekilde düzenlenmiştir. Daha büyük ekranlarda ise her iki sütun da eşit olarak dizilir.

5. Offset ve Order Kullanımı

Grid sisteminde offset ve order sınıfları, sütunların konumlarını değiştirmek için kullanılır:

• Offset: Sütunun sol tarafında boşluk bırakır.
• Order: Sütunların sırasını değiştirir.

Örnek Kod:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-md-4 order-md-2">İkinci Sütun</div>
        <div class="col-md-4 order-md-1">Birinci Sütun</div>
        <div class="col-md-4 order-md-3">Üçüncü Sütun</div>
    </div>
</div>

Bu örnekte, orta boyutlu ekranlarda sütunların sırası değiştirilmiştir.order-md sınıfı, belirli ekran boyutlarında sütun sırasını kontrol etmenizi sağlar.

6. Nesting (İç İçe Sütunlar)

Bootstrap ile iç içe sütunlar oluşturmak, sütunlar içinde yeni satırlar ve sütunlar tanımlamak anlamına gelir. Bu, daha karmaşık düzenler oluşturmak için idealdir.

Örnek Kod:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-6">İç Sütun 1</div>
                <div class="col-6">İç Sütun 2</div>
            </div>
        </div>
        <div class="col-md-6">Ana Sütun 2</div>
    </div>
</div>

Yukarıdaki kodda, col-md-6 sütunu içinde iki yeni sütun oluşturulmuştur. İç sütunlar, ana sütunların genişliklerine bağlı olarak ekranı doldurur.

7. Sütun Genişliklerinin Birlikte Kullanımı

Birden fazla sütun sınıfını kullanarak, ekran boyutlarına göre sütunların nasıl görüneceğini belirleyebilirsiniz.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-lg-4">1. Sütun</div>
        <div class="col-12 col-sm-6 col-lg-4">2. Sütun</div>
        <div class="col-12 col-sm-6 col-lg-4">3. Sütun</div>
    </div>
</div>

Bu örnekte, sütunlar mobilde tam genişlikte, küçük ekranlarda iki sütun yan yana, büyük ekranlarda ise üç sütun eşit genişlikte gösterilir.

8. Tüm Özelliklerin Bir Arada Kullanımı

Bootstrap Grid sisteminin tüm özelliklerini kullanarak, farklı ekran boyutlarında düzenlerin nasıl değiştiğini göstermek için komple bir örnek oluşturabiliriz.

Tüm Özelliklerin Örnek Kodu:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 col-lg-6 offset-lg-1">Sol İçerik</div>
        <div class="col-12 col-md-4 col-lg-3">Sağ İçerik</div>
        <div class="col-12 col-lg-2 order-lg-last">Ekstra İçerik</div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Sütun 1</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Sütun 2</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Sütun 3</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">Sütun 4</div>
    </div>
</div>

Bu örnek, Bootstrap Grid sistemi kullanılarak farklı ekran boyutlarında nasıl esnek ve duyarlı tasarımlar yapılacağını kapsamlı bir şekilde gösterir.

Kapanış

Bootstrap Grid sistemi sayesinde, XS, SM, MD, LG, XL ve XXL sınıflarını kullanarak farklı cihaz boyutlarına uygun, esnek ve duyarlı web sayfaları tasarlayabilirsiniz. Bu rehberde anlatılan örneklerle, web sitenizi ziyaret eden kullanıcıların cihazlarına göre ideal görünümü sağlamayı öğrendiniz.

Eğer web geliştirme dünyasında kendinizi daha da ileriye taşımak ve Bootstrap, HTML, CSS, JavaScript gibi konularda uzmanlaşmak istiyorsanız, Kodlasak.com'da birçok güncel eğitim içeriği ve zengin kod örnekleri bulabilirsiniz.