Bootstrap Izgara Sistemi
Bootstrap's ızgara sistemi sayfa boyunca 12 sütununa kadar izin verir.
tek tek her 12 sütun kullanmak istemiyorsanız, grup birlikte sütunlar geniş sütunlar oluşturmak için edebilirsiniz:
| yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 | yayılma 1 |
| yayılma 4 | yayılma 4 | yayılma 4 | |||||||||
| yayılma 4 | açıklık 8 | ||||||||||
| açıklık 6 | açıklık 6 | ||||||||||
| yayılma 12 | |||||||||||
Bootstrap's ızgara sistemi duyarlı ve sütunlar ekran boyutuna bağlı olarak yeniden düzenleyecektir: üç sütunlar halinde düzenlenmiş içerikle daha iyi görünebilir büyük bir ekranda, ancak içerik öğeleri yığılmış olsaydı küçük bir ekranda daha iyi olurdu birbirinin üstüne.
İpucu: Bir satır için on iki kadar ekleyin gerektiğini ızgara sütunları unutmayın. Bundan da öte, sütunlar olursa olsun yığını olacak viewport .
Izgara Sınıflar
Bootstrap ızgara sistemi dört sınıfı vardır:
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
sınıfları üzerinde daha dinamik ve esnek düzenleri oluşturmak için birleştirilebilir.
İpucu: Her sınıf yukarı ölçekler, bu nedenle aynı genişliklerini ayarlamak istiyorsanız xs ve sm , sadece belirtmeniz gerekir xs .
Izgara Sistemi Kuralları
Bazı Bootstrap ızgara sistemi kuralları:
- Sıralar bir mesafede yerleştirilmelidir
.container(fixed-width) veya.container-fluid(full-width) düzgün bir şekilde hizalanmasını ve doldurma için - Sütunların yatay grupları oluşturmak için satır kullanın
- İçerik sütunlar içinde yer almalıdır ve sadece sütunlar satırların hemen çocukları olabilir
- Gibi önceden tanımlanmış sınıfları
.rowve.col-sm-4hızlı bir şekilde ızgara düzenleri yapmak için kullanılabilir - Sütunlar olukları oluşturmak (gaps between column content) takviyesi yoluyla. Bu, doldurma negatif kenarda ile ilk ve son sütun satır ofset
.rows - Izgara sütunları yayılan isteyen 12 mevcut sütun sayısını belirterek tarafından oluşturulur. Örneğin, üç eşit sütun kullanmak üç
.col-sm-4
Bir Temel Yapısı Bootstrap Izgara
Aşağıdakiler bir temel yapısı Bootstrap ızgara:
<div class="container">
<div
class="row">
<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> Yani, istediğiniz düzeni oluşturmak için, bir kap (oluşturmak <div class="container"> ). Daha sonra, bir satır (oluşturmak <div class="row"> ). Ardından, (uygun olan etiketlerin sütunlar istenen sayıda eklemek .col-*-* sınıflar). Sayılar unutmayın .col-*-* daima her satır için 12 eşit olmalıdır.
Izgara Seçenekler
Nasıl Aşağıdaki tabloda özetlenmektedir Bootstrap ızgara sistemi birden fazla cihaz üzerinden çalışır:
| Ekstra küçük cihazlar Telefonlar (<768px) | Küçük cihazlar Tabletler (>=768px) | Orta cihazlar Masaüstü (>=992px) | Büyük cihazlar Masaüstü (>=1200px) | |
|---|---|---|---|---|
| Izgara davranış | her zaman yatay | Yatay yukarıdaki kesme noktaları başlatmak için daraltılmış | Yatay yukarıdaki kesme noktaları başlatmak için daraltılmış | Yatay yukarıdaki kesme noktaları başlatmak için daraltılmış |
| Konteyner genişliği | Yok (auto) | 750px | 970 pikseldir | 1170px |
| Sınıf öneki | .col-xs- | .col-SM- | .col-md- | .col-LG- |
| Sütun sayısı | 12 | 12 | 12 | 12 |
| Sütun genişliği | Oto | ~ 62px | ~ 81px | ~ 97px |
| Oluk genişliği | 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 | Evet | Evet | Evet | Evet |
| Kaydırmaları | Evet | Evet | Evet | Evet |
| Kolon sipariş | Evet | Evet | Evet | Evet |
Örnekler
Sonraki bölümler farklı cihazlar için ızgara sistemlerinin örnekleri göstermektedir: