Col-md-4 , Sayı anlamı col-x'ler-1 , col-lg-2 önyükleme
Yeni bootstrap ızgara sistemi, özellikle bu sınıflar ile karıştı:
col-lg-*
col-md-*
col-xs-*
* bir sayıyı temsil eder)
herkes nasıl açıklamak lütfensayı ızgaralar hizalıyorvenasıl bu numaraları kullanınveaslında neyi temsil
CEVAP
Burada basit bir açıklama denemesi:
Harfleri ile kıyaslarsak, sm, md, lg) görmezdenşimdilik,Sadece numaraları ile başlayacağım.
- numaraları (1-12) herhangi bir elemanın toplam genişliği bir kısmını temsil eder
- tüm divs 12 sütun ayrılmıştır
- yani,
col-*-6
yayılan 6 12 sütun (yarım genişlik),col-*-12
yayılan 12 sütun 12 (tüm genişliği), vb
Eğer isterseniziki eşit sütunspan için bir div, yazma
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Eğer istediğinizeşit olmayan üç sütunspan için aynı genişlik, 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ütunlar her zaman 12'ye kadar ekleyin. göreceksiniz # On iki yıldan daha az olabilir, ama suç senin divs 12, daha fazla dikkat etsin bir sonraki satıra aşağı (tamamen başka bir hikaye .row
) vurur.
Ayrıcasütun içinde yuva sütunlar(best etraflarında .row
sarıcı ile): gibi
<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>
İç içe divs her biri de kendi üst dıv tp 12 sütun yayılma.NOT:.col
her sınıf iki tarafında 15px doldurma yana, genellikle iç içe geçmiş sütun kaydırma-15px boşlukları olan .row
,. Bu dolgu çoğaltma önler ve içeriği iç içe ve iç içe olmayan col sınıflar arasında dizilmiş duruyor.
Özellikle xs, sm, md, lg
kullanımı hakkında sormadın ama ama yardım dokunamam yani el-ele gidin...
Kısacası, bu sınıf uygulamak gerekir hangi tanımlamak için kullanılır:
- = ekstra küçük ekranlar (cep telefonları) x'ler
- = küçük ekranlar (tablet) sm
- md = orta ekranlar (bazı masaüstü)
- = büyük ekranlar (masaüstü) kalan lg
Gerekirgenelliklebir div ekran boyutu (bu bootstrap duyarlı kılan kalbidir) bağlı olarak farklı şekilde davranır yani birden fazla sütun sınıfları kullanarak sınıflandırır. örneğin: col-xs-6
col-sm-4
cep telefonu (X) ve tabletlerde ekranın 1/3(sm) yarım ekran span bütün sınıflar ile bir div.
<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ğıda yorum başı olarak, belirli bir ekran için kılavuz sınıflar, bu ekran boyutu için geçerli boyutuve daha büyükbaşka bir beyanı geçersiz kılar sürece (*20.* yani col-xs-6 col-md-4
yayılan 6 sütun ^em>ve sm
ve md
4 sütun23**sm
lg
asla açıkça ilan) olsa bile
NOT:yoksa define xs
varsayılan col-xs-12
(yani col-sm-6
yarı genişlik sm
, md
lg
ekranlar, ama tam genişliği xs
ekranlar).
NOT:aslında .row
içerir 12'den fazla renk, tepki gösterirler ne kadar farkında olduğunuz sürece sorun değil. --Bu tartışmalı bir konudur, ve herkes aynı fikirde değil.
Daha fazla ve daha tavşan dibe vururuz -- notlar ve açıklama ile delik, ama bu ilk anlayış için iyi bir astar umarım