Twitter Bootstrap - sınırları

SORU

9 Ocak 2012, PAZARTESİ

Twitter Bootstrap - sınırları

Ben Sadece Twitter Bootstrap kullanmaya başladı, ve iyi bir üst öğeye kenarlık ekleme hakkında bir sorum var?

eğer varsa örneğin,

 <div class="main-area span12">
    <div class="row">
       <div class="span9">
            //Maybe some description text
       </div>
       <div class="span3">
            //Maybe a button or something
       </div>
    </div>
 </div>

Eğer böyle bir sınır uygulayın:

.main-area {
    border: 1px solid #ccc;
}

Kılavuz sistemi kırmak ve bir sonraki satıra aşağı span3 tekme sınırın ekledi genişliği yüzünden olacak......İyi bir şekilde sınırları gibi şeyler eklemek ya da üst dolgu edebilmek için bu gibi <div>ler var mı?

CEVAP

9 Ocak 2012, PAZARTESİ

Eğer GitHub Twitter container-app.html kendi demo bakarsanız, kendi ızgara ile sınırları kullanmak için bazı fikirler elde edersiniz.

Örneğin, burada 940 piksel 16 sütunlu geniş ızgara sistemi yapı taşlarından çıkarılan kısmı:

.row {
    zoom: 1;
    margin-left: -20px;
}

.row > [class*="span"] {
    display: inline;
    float: left;
    margin-left: 20px;
}

.span4 {
    width: 220px;
}

Belirli unsurları üzerinde sınırları için izin vermek için, eşleşen sınıflar azaltır sayfasına CSS sınırı için hesap için yeterli miktarda(ler) tarafından gömülü eklediler.

Screenshot of Example Page

Örneğin, Kenar Çubuğu sol kenarlık için izin vermek için <head> Bu CSS sonra eklediler ana <link href="../bootstrap.css" rel="stylesheet">.

.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}

1px padding-left yeni sol eklenmesi için izin vermek için sınır düşürdüler göreceksiniz. Bu kural daha sonra kaynak sırada görünüyor bu yana, herhangi bir önceki veya harici bildirimleri geçersiz kılar.

Bu tam olarak en sağlam olmadığını iddia ediyorumyazarif bir yaklaşım, ama en temel örnek göstermektedir.

Bunu Paylaş: