Yalnızca Bootstrap 3 için geçerlidir.
Harfleri (x yok sayılması ler , sm , md , lg ) şimdilik , sadece sayılarla başlayacağız ...
- (1-12) sayıları herhangi bir bölmenin toplam genişliğinin bir bölümünü temsil eder
- tüm div'ler 12 sütuna ayrılmıştır
- yani,
col-*-612 sütunun 6'sını (genişliğinin yarısı), col-*-1212 sütunun 12'sini (tüm genişliği) kapsar, vb.
İki eşit sütunun bir div'a yayılmasını istiyorsanız , şunu yazın:
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Veya aynı genişliğe yayılmayan üç eşit olmayan sütunun olmasını istiyorsanız, şunu yazabilirsiniz:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Sütun sayısı her zaman 12'ye kadar eklenir. 12'den az olabilir, ancak 12'den fazla olursa dikkatli olun, çünkü rahatsız edici div'larınız bir sonraki satıra çarpacaktır (değil .row, tamamen başka bir hikaye).
Ayrıca , sütunları sütunların içine yerleştirebilirsiniz (en iyisi .rowetraflarında bir sarıcıyla):
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Her iç içe div seti, üst div öğelerinin 12 sütununa kadar uzanır. NOT: Her .colsınıfın her iki tarafında 15 piksel dolgu olduğundan, genellikle iç içe sütunları .row-15px kenar boşluklarına sahip bir a'ya sarmalısınız. Bu, dolguyu çoğaltmayı önler ve iç içe ve iç içe olmayan col sınıfları arasında sıralanan içeriği tutar.
- Özellikle xs, sm, md, lgkullanımı sormadınız , ancak el ele gidiyorlar, bu yüzden yardım edemiyorum ama dokunuyorum ...
Kısacası, sınıfın hangi ekran boyutunda uygulanması gerektiğini tanımlamak için kullanılırlar :
- xs = ekstra küçük ekranlar (cep telefonları)
- sm = küçük ekranlar (tabletler)
- md = orta ekranlar (bazı masaüstü bilgisayarlar)
- lg = büyük ekranlar (kalan masaüstü bilgisayarlar)
Daha fazla bilgi için resmi Bootstrap belgelerindeki " Izgara Seçenekleri " bölümünü okuyun .
Sen olmalıdır genellikle o farklı ekran boyutuna bağlı olarak (bu önyükleme duyarlı kılan kalbidir) davranır birden çok sütun sınıflarını kullanarak bir div sınıflandırır. örneğin: sınıfları olan bir div col-xs-6ve col-sm-4cep telefonunun (xs) ekranının yarısını ve tabletlerin (sm) ekranının 1 / 3'ünü kaplar.
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
NOT: Aşağıdaki açıklama gereği, belirli bir ekran boyutu için ızgara sınıfları bu ekran boyutuna uygulamak ve daha büyük başka bir deklarasyon geçersiz kılma olmadığı sürece (yanicol-xs-6 col-md-4 açıklıklı 6 sütun xs vesm ve üzerinde 4 sütun md velg , olsa bile smve lgaçıkça beyan hiçbir zaman)
NOT: Eğer tanımlamak yoksa xs, bu varsayılan değer olur col-xs-12(yani col-sm-6yarım genişliğine olduğunu sm, mdve lgekranları, ancak tam genişliğini xsekranlarından).
NOT: Eğer .rownasıl tepki vereceğinin farkında olduğunuz sürece, 12'den fazla kömür içeriyorsa aslında tamamen iyi . - Bu tartışmalı bir konudur ve herkes aynı fikirde değildir.
