En son web geliştirme öğreticiler
 

Bootstrap Grids


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 otomatik olarak yeniden düzenleyecektir.


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.


Bir Temel Yapısı Bootstrap Izgara

Aşağıdakiler bir temel yapısı Bootstrap ızgara:

<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>

İlk; 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.

Aşağıda temel bazı örnekler topladık Bootstrap ızgara düzenleri.


Üç Eşit Sütunlar

.col-sm-4
.col-sm-4
.col-sm-4

Aşağıdaki örnek, üç eşit genişlikte sütun tabletler başlayan ve büyük masaüstü ölçekleme için gösterilmiştir. cep telefonlarında, sütunları otomatik yığını olacak:

Ö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>
Kendin dene "

İki Eşit Olmayan Sütunlar

.col-sm-4
.col-sm-8

Aşağıdaki örnek, iki farklı genişlikte sütun tabletler başlayan ve büyük masaüstü ölçekleme için gösterilmiştir:

Örnek

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Kendin dene "

İpucu: hakkında daha fazla öğreneceksiniz Bootstrap daha sonra bu eğitimde ızgaraları.