Önyükleme Izgaraları
Önyükleme Izgara Sistemi
Bootstrap'in ızgara sistemi, sayfa boyunca 12 sütuna kadar izin verir.
12 sütunun tümünü tek tek kullanmak istemiyorsanız, daha geniş sütunlar oluşturmak için sütunları birlikte gruplayabilirsiniz:
| açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 | açıklık 1 |
| aralık 4 | aralık 4 | aralık 4 | |||||||||
| aralık 4 | açıklık 8 | ||||||||||
| açıklık 6 | açıklık 6 | ||||||||||
| açıklık 12 | |||||||||||
Bootstrap'in ızgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenir.
Izgara Sınıfları
Bootstrap ızgara sisteminin dört sınıfı vardır:
xs(telefonlar için - 768 pikselden küçük ekranlar)sm(tabletler için - 768 piksele eşit veya daha geniş ekranlar)md(küçük dizüstü bilgisayarlar için - 992 piksele eşit veya daha geniş ekranlar)lg(dizüstü ve masaüstü bilgisayarlar için - 1200 piksele eşit veya daha geniş ekranlar)
Yukarıdaki sınıflar, daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.
Bootstrap Izgarasının Temel Yapısı
Aşağıdaki, bir Bootstrap ızgarasının temel yapısıdır:
<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>
<div class="row">
...
</div>
Öncelikle; bir satır oluşturun ( <div
class="row">). Ardından, istediğiniz sayıda sütun ekleyin (uygun
.col-*-*sınıflara sahip etiketler). .col-*-*İçindeki sayıların her satır için her zaman 12'ye kadar eklenmesi gerektiğini unutmayın .
Aşağıda, temel Bootstrap ızgara düzenlerinin bazı örneklerini topladık.
Üç Eşit Sütun
Aşağıdaki örnek, tabletlerden başlayıp büyük masaüstlerine ölçeklendirerek eşit genişlikte üç sütunun nasıl alınacağını gösterir. Genişliği 768 pikselden az olan cep telefonlarında veya ekranlarda sütunlar otomatik olarak yığınlanır:
Örnek
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
İki Eşit Olmayan Sütun
Aşağıdaki örnek, tabletlerden başlayıp büyük masaüstlerine ölçeklendirerek çeşitli genişlikte iki sütunun nasıl alınacağını gösterir:
Örnek
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
İpucu: Bu öğreticide daha sonra Bootstrap ızgaraları hakkında daha fazla bilgi edineceksiniz.