Önyükleme Izgara Sistemi
Ö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 yeniden düzenlenir: Büyük ekranda içerik üç sütun halinde organize edildiğinde daha iyi görünebilir, ancak küçük bir ekranda içerik öğelerinin yığılması daha iyi olur Birbirinin üstünde.
İpucu: Izgara sütunlarının bir satır için en fazla on iki olması gerektiğini unutmayın. Bundan daha fazlası, görünüm ne olursa olsun sütunlar yığılır.
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.
İpucu: Her sınıf ölçeklenir, bu nedenle xs ve sm için aynı genişlikleri ayarlamak istiyorsanız, yalnızca xs belirtmeniz gerekir.
Izgara Sistem Kuralları
Bazı Bootstrap ızgara sistemi kuralları:
.containerDoğru hizalama ve dolgu için satırlar (sabit genişlik) veya.container-fluid(tam genişlik) içine yerleştirilmelidir .- Yatay sütun grupları oluşturmak için satırları kullanın
- İçerik sütunlara yerleştirilmelidir ve yalnızca sütunlar satırların hemen alt öğeleri olabilir
.rowIzgara düzenlerini hızlı bir şekilde yapmak için ve gibi önceden tanımlanmış sınıflar.col-sm-4mevcuttur- Sütunlar, dolgu yoluyla oluklar (sütun içeriği arasındaki boşluklar) oluşturur. Bu dolgu, ilk ve son sütun için satırlarda negatif kenar boşluğu ile dengelenir.
.rows - Izgara sütunları, yaymak istediğiniz 12 kullanılabilir sütun sayısı belirtilerek oluşturulur. Örneğin, üç eşit sütun, üç
.col-sm-4 - Sütun genişlikleri yüzde cinsindendir, bu nedenle her zaman akışkandır ve üst öğelerine göre boyutlandırılmıştır
Bootstrap Izgarasının Temel Yapısı
Aşağıdaki, bir Bootstrap ızgarasının temel yapısıdır:
<div class="container">
<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>
</div>
Bu nedenle, istediğiniz düzeni oluşturmak için bir kap ( <div
class="container">) oluşturun. Ardından, 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 .
Izgara Seçenekleri
Aşağıdaki tablo, Bootstrap ızgara sisteminin birden çok aygıtta nasıl çalıştığını özetler:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Örnekler
Sonraki bölümlerde farklı cihazlar için şebeke sistemleri örnekleri gösterilmektedir: