İskele

Bootstrap, duyarlı 12 sütunlu bir ızgara üzerine inşa edilmiştir. Bu sisteme dayalı sabit ve değişken genişlikli düzenler de ekledik.

Varsayılan 940 piksel ızgara

Bootstrap'in bir parçası olarak sağlanan varsayılan ızgara sistemi, 940 piksel genişliğinde, 12 sütunlu bir ızgaradır .

Ayrıca çeşitli cihazlar ve çözünürlükler için dört duyarlı varyasyonu vardır: telefon, tablet portre, masa manzarası ve küçük masaüstleri ve büyük geniş ekran masaüstleri.

<div sınıfı = "satır" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Burada gösterildiği gibi, her biri ızgara sistemimizin bir parçası olarak tanımladığımız 12 temel sütunu kapsayan iki "sütun" ile temel bir düzen oluşturulabilir.

Sütunları dengeleme

4 ofset 4

3 ofset 3

8 ofset 4

<div sınıfı = "satır" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

İç içe sütunlar

Bootstrap'teki statik (akışkan olmayan) ızgara sistemi ile yuvalama kolaydır. İçeriğinizi iç içe yerleştirmek için mevcut bir sütuna yeni .rowve bir dizi sütun eklemeniz yeterlidir..span*.span*

Örnek

Sütunun 1. Seviyesi

Seviye 2

<div sınıfı = "satır" > 
  <div sınıfı = "span12" > 
    Sütunun 1. Seviyesi
    <div sınıfı = "satır" > 
      <div class = "span6" > 2. Düzey </div> 
      <div class = "span6" > 2. Düzey </div> 
    </div>
  </div>
</div>

Izgara özelleştirme

Değişken	Varsayılan değer	Tanım
`@gridColumns`	12	Sütun sayısı
`@gridColumnWidth`	60 piksel	Her sütunun genişliği
`@gridGutterWidth`	20 piksel	Sütunlar arasındaki negatif boşluk
`@siteWidth`	Tüm sütunların ve olukların hesaplanan toplamı	Karışımın genişliğini ayarlamak için sütun ve olukları `.container-fixed()`sayar

LESS'teki Değişkenler

Bootstrap'te yerleşik olarak, yukarıda belgelenen varsayılan 940px ızgara sistemini özelleştirmek için bir avuç değişken bulunur. Izgara için tüm değişkenler değişkenler.less içinde saklanır.

nasıl özelleştirilir

Izgarayı değiştirmek, üç @grid*değişkeni değiştirmek ve Bootstrap'i yeniden derlemek anlamına gelir. Değişkenler içindeki grid değişkenlerini değiştirin ve yeniden derlemek için belgelenen dört yoldan birini kullanın . Daha fazla sütun ekliyorsanız, grid.less'takiler için CSS'yi eklediğinizden emin olun.

Duyarlı kalmak

Izgaranın özelleştirilmesi yalnızca varsayılan düzeyde, 940 piksel ızgarada çalışır. Bootstrap'in duyarlı özelliklerini korumak için, ızgaraları da responsive.less'ta özelleştirmeniz gerekir.

Sabit düzen

Tek bir web sitesi tarafından sağlanan hemen hemen her web sitesi veya sayfa için varsayılan ve basit 940 piksel genişliğinde, ortalanmış <div class="container">düzen

<body>
  <div sınıfı = "konteyner" > 
    ...
  </div>
</body>

Akışkan düzeni

<div class="container-fluid">esnek sayfa yapısı, minimum ve maksimum genişlikler ve sol kenar çubuğu sağlar. Uygulamalar ve dokümanlar için harika.

<div sınıfı = "konteyner-akışkan" > 
  <div sınıfı = "satır-akışkan" > 
    <div sınıfı = "span2" > 
      <!--Kenar çubuğu içeriği-->
    </div>
    <div sınıfı = "span10" > 
      <!--Gövde içeriği-->
    </div>
  </div>
</div>

Desteklenen cihazlar

Bootstrap, projelerinizi farklı cihazlarda ve ekran çözünürlüklerinde daha uygun hale getirmeye yardımcı olmak için birkaç medya sorgusunu destekler. İşte dahil olanlar:

Etiket	Düzen genişliği	Sütun genişliği	oluk genişliği
Akıllı telefonlar	480 piksel ve altı	Değişken sütunlar, sabit genişlik yok
Dikey tabletler	480 piksel ila 768 piksel	Değişken sütunlar, sabit genişlik yok
Manzara tabletleri	768 piksel ila 940 piksel	44 piksel	20 piksel
Varsayılan	940 piksel ve üstü	60 piksel	20 piksel
Büyük ekran	1210 piksel ve üstü	70 piksel	30 piksel

Ne yaparlar

Medya sorguları, bir dizi koşula (oranlar, genişlikler, görüntüleme türü vb.) dayalı olarak özel CSS'ye izin verir, ancak genellikle min-widthve etrafında odaklanır max-width.

Kılavuzumuzdaki sütun genişliğini değiştirin
Elemanları gerektiği yerde yüzdürmek yerine istifleyin
Başlıkları ve metni cihazlara daha uygun olacak şekilde yeniden boyutlandırın

Medya sorgularını kullanma

Bootstrap bu medya sorgularını otomatik olarak içermez, ancak bunları anlamak ve eklemek çok kolaydır ve minimum kurulum gerektirir. Bootstrap'in duyarlı özelliklerini dahil etmek için birkaç seçeneğiniz vardır:

Derlenmiş duyarlı sürümü kullanın, bootstrap-responsive.css
@import "responsive.less" ekleyin ve Bootstrap'i yeniden derleyin
responsive.less dosyasını ayrı bir dosya olarak değiştirin ve yeniden derleyin

Neden sadece dahil etmiyorsun? Gerçeği söylemek gerekirse, her şeyin duyarlı olması gerekmez. Geliştiricileri bu özelliği kaldırmaya teşvik etmek yerine, en iyisinin onu etkinleştirmeyi düşünüyoruz.

  // Yatay telefonlar ve aşağı
  @media ( maksimum genişlik : 480 piksel ) { ... }     
 
  // Yatay telefondan dikey tablete
  @media ( maksimum genişlik : 768 piksel ) { ... }     
 
  // Dikey tabletten yatay ve masaüstüne
  @media ( min - genişlik : 768 piksel ) ve ( maksimum genişlik : 940 piksel ) { ... }        
 
  // Büyük masaüstü
  @media ( min - genişlik : 1200 piksel ) { .. }