Bootstrap Düzen Sıralama

Bootstrap'te düzen sıralama (ordering), içeriklerinizi grid sisteminde belirli bir sıraya göre düzenlemenizi sağlar. Bu, sütunların görsel sırasını değiştirmek için kullanılır, böylece HTML yapınızı değiştirmeden görünümü istediğiniz gibi özelleştirebilirsiniz. İşte Bootstrap'te düzen sıralaması hakkında bilmeniz gerekenler:

1. Sıralama Sınıfları

Bootstrap, sütunların sıralamasını değiştirmek için order-* sınıflarını kullanır. Bu sınıflar, ekran boyutuna göre sütunların sırasını tanımlamanıza olanak tanır. İşte temel kullanımlar:

• .order-1 : İlk sıradaki sütun.
• .order-2 : İkinci sıradaki sütun.
• .order-3: Üçüncü sıradaki sütun.
• .order-last : En son sıradaki sütun.
• .order-first : En baştaki sütun.

2. Örnek Kullanım

Aşağıdaki örnekte, üç sütunun sırası değiştirilmiştir:

<div class="container">
    <div class="row">
        <div class="col order-2">Sütun 1</div>
        <div class="col order-1">Sütun 2</div>
        <div class="col order-3">Sütun 3</div>
    </div>
</div>

Bu örnekte, "Sütun 2" görsel olarak ilk sırada, "Sütun 1" ikinci sırada ve "Sütun 3" üçüncü sırada görünür.

3. Responsive Sıralama

Bootstrap, sıralama sınıflarını ekran boyutuna göre ayarlamanıza olanak tanır. Örneğin:

• .order-sm-* (küçük ekranlar için)
• .order-md-* (orta ekranlar için)
• .order-lg-* (büyük ekranlar için)

Örnek:

<div class="container">
    <div class="row">
        <div class="col order-3 order-md-1">Sütun 1</div>
        <div class="col order-1 order-md-2">Sütun 2</div>
        <div class="col order-2 order-md-3">Sütun 3</div>
    </div>
</div>

Bu örnekte, sütunların sıralaması küçük ekranlarda (sm) farklı, orta ekranlarda (md) farklıdır.

4. Özel Sıralama

Eğer belirli bir duruma göre sütunları sıralamak isterseniz, order sınıflarını kullanarak istediğiniz sıralamayı oluşturabilirsiniz. Örneğin:

<div class="container">
    <div class="row">
        <div class="col order-1">Birinci Sütun</div>
        <div class="col order-3">Üçüncü Sütun</div>
        <div class="col order-2">İkinci Sütun</div>
    </div>
</div>

5. Sıralama ile Diğer Özellikler

Sıralama sınıflarını kullanırken, diğer Bootstrap özellikleriyle (örneğin, hizalama, boyutlandırma) birlikte kullanmak mümkündür. Bu, daha esnek ve dinamik düzenler oluşturmanıza yardımcı olur.

Sonuç

Bootstrap'teki düzen sıralama sınıfları, içeriklerinizi görsel olarak yeniden düzenlemek için güçlü bir araçtır. HTML yapısını değiştirmeden, sütunların sıralamasını ve görünümünü istediğiniz gibi ayarlamanıza olanak tanır. Bu, responsive tasarımlarda oldukça faydalıdır ve kullanıcı deneyimini iyileştirir.