SORU
12 HAZİRAN 2014, PERŞEMBE


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
12 HAZİRAN 2014, PERŞEMBE


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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • bcbauer

    bcbauer

    7 ŞUBAT 2007
  • efaustus9

    efaustus9

    16 HAZİRAN 2006
  • Photoshop Tutorials

    Photoshop Tu

    22 HAZİRAN 2011

İLGİLİ SORU / CEVAPLAR