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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AmeriiK_HD

    AmeriiK_HD

    16 AĞUSTOS 2012
  • Titan Lee Hai

    Titan Lee Ha

    14 Temmuz 2008
  • Top10Series

    Top10Series

    26 Kasım 2008