web-gelistirme-sc.com

Bootstrap Açıklıkları

Kısa bir süre önce Twitter Bootstrap'ı kullanmaya başladım ve yayılmaların ne yaptığını ve neden span4, span12 gibi farklı numaralandırılmış açıklıklar olduğunu anlamadım. Ve ofset nedir ve ne zaman kullanılır? (Bazen yayılanlarla kullanılır) İnternette aramaya çalıştım, ancak yalnızca bootstraps'la ilgili özel sorular buldum.

13
Grigor

Bootstrap "span" sınıfları bootstrap grid system içinde kullanılır.

Belgeler, sayılarla etiketlenmiş sütunları gösterir, her sayı, bu kap için kullanılan span sınıfını temsil eder. Ofset, bir sonraki bölümde sağda gösterilir, yayılma alanının solunda kaç boş sütun olması gerektiğini tanımlar.

span4 offset2 dosyasını "bu bloğu 4 sütuna genişlet, iki sütunu sola boş bırak" olarak okuyabilirsiniz.
Varsayılan olarak 12 sütun vardır. Eğer bir span12 'ya sahipseniz, container kadar geniş olacaktır (ki bu sıvı olabilir).

Bu, artık desteklenmeyen v3.2.2 ile ilgilidir. Bootstrap'in güncel sürümü here 'da bulunabilir. 

Eğer v4'te Bootstrap'da 'span' sınıfını (ızgara sistemi yerine rozetleri ve etiketleri ifade eder) arıyorsanız, bu here olarak bulunabilir.

15
kapex

Her şeyden önce, bunlar <span> etiketleri değildir. (Bunu söylüyorum çünkü birkaç kez <span> yazmaya başladım!) Bir satır içindeki sütun genişlikleridir.

http://Twitter.github.com/bootstrap/scaffolding.html#gridSystem adresinden:

<div class="row">
 <div class="span4">...</div>
 <div class="span8">...</div>
</div>

Dokümanlar ayrıca ofsetleri tartışıyor.

8
DaveP

22Bildiğim kadarıyla, duyarlı bir sayfa düzenini stillendirmek istiyorsanız, bir div işaretlemesi yazarken, aynı zamanda col-lg-2 veya bunun gibi bazı sınıfları kullanabilirsiniz.

<div class="col-lg-2 col-sm-3 col-xs-6"> some content </div>

bu, büyük, küçük ve ekstra küçük ekranlar için bazı içeriğin ekranda kaç tane sütun kaplayacağını tanımlar. Demek istediğim, bir satırda maksimum 12 sütununuz var, bu yüzden bir satırdaki tüm içeriğiniz buna saygı duymalı. Sahip olamazsın 

<row>
<div class="col-lg-5">content1 </div>
<div class="col-lg-6">content2 </div>
<div class="col-lg-3">content3 </div>
</row>

çünkü burada 14 büyük sütun var. Ancak, yalnızca xs sınıfları 24'e eklenir

Öyleyse, span aynı şeyi mi yapıyor?

1
marko