İskele

HTML5 doküman türü gerektirir

Bootstrap, HTML5 doktipinin kullanılmasını gerektiren belirli HTML öğelerini ve CSS özelliklerini kullanır. Tüm projelerinizin başına ekleyin.

<!DOCTYPE html>
<html lang = "tr" > 
  ...
</html>

Tipografi ve bağlantılar

Bootstrap, temel genel görüntüleme, tipografi ve bağlantı stillerini ayarlar. Özellikle, biz:

marginvücuttan çıkarın
background-color: white;üzerine ayarlabody
Tipografik tabanımız olarak @baseFontFamily, @baseFontSizeve niteliklerini kullanın@baseLineHeight
Genel bağlantı rengini şununla ayarlayın @linkColorve bağlantı alt çizgilerini yalnızca:hover

Bu stiller scaffolding.less içinde bulunabilir .

Normalize ile Sıfırla

Bootstrap 2 ile, eski sıfırlama bloğu, Nicolas Gallagher ve Jonathan Neal'ın HTML5 Boilerplate'i de destekleyen bir projesi olan Normalize.css lehine düşürüldü . Normalize'ın çoğunu reset.less içinde kullanırken , özellikle Bootstrap için bazı öğeleri kaldırdık.

Canlı ızgara örneği

Varsayılan Bootstrap ızgara sistemi , yanıt veren özellikler etkinleştirilmeden 940 piksel genişliğinde bir kap oluşturan 12 sütun kullanır. Duyarlı CSS dosyası eklendiğinde, ızgara, görünüm alanınıza bağlı olarak 724 piksel ve 1170 piksel genişliğe uyum sağlar. 767px görünüm alanlarının altında, sütunlar akıcı hale gelir ve dikey olarak yığılır.

Temel ızgara HTML

Basit bir iki sütun düzeni için bir oluşturun .rowve uygun sayıda .span*sütun ekleyin. Bu 12 sütunlu bir ızgara olduğundan, her .span*biri bu 12 sütunun bir sayısını kapsar ve her satır (veya üst öğedeki sütun sayısı) için her zaman 12'ye kadar eklenmelidir.

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

Bu örnekte, toplam 12 sütun ve tam bir satır oluşturan ve .span4var ..span8

Sütunları dengeleme

.offset*Sınıfları kullanarak sütunları sağa taşıyın . Her sınıf, bir sütunun sol kenar boşluğunu bir bütün sütun kadar artırır. Örneğin, dört sütun üzerinde .offset4hareket eder ..span4

3 ofset 2

3 ofset 1

3 ofset 2

6 ofset 3

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

İç içe sütunlar

İçeriğinizi varsayılan ızgarayla iç içe yerleştirmek için mevcut bir sütuna yeni .rowve bir dizi sütun ekleyin . İç içe satırlar, üst öğesinin sütun sayısına ekleyen bir dizi sütun içermelidir..span*.span*

1. düzey sütun

Seviye 2

<div sınıfı = "satır" > 
  <div sınıfı = "span9" > 
    1. düzey sütun
    <div sınıfı = "satır" > 
      <div class = "span6" > 2. Düzey </div> 
      <div class = "span3" > 2. Düzey </div> 
    </div>
  </div>
</div>

Canlı sıvı ızgarası örneği

Akışkan ızgara sistemi, sütun genişlikleri için pikseller yerine yüzdeler kullanır. Sabit ızgara sistemimizle aynı duyarlı yeteneklere sahiptir ve önemli ekran çözünürlükleri ve cihazlar için uygun oranlar sağlar.

Temel akışkan ızgara HTML

olarak değiştirerek herhangi bir satırı "akışkan" .rowyapın .row-fluid. Sütun sınıfları tamamen aynı kalır ve sabit ve akışkan ızgaralar arasında geçiş yapmayı kolaylaştırır.

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

Akışkan dengeleme

Sabit ızgara sistemi ofsetiyle aynı şekilde çalışır: .offset*herhangi bir sütuna ekleyin ve o kadar çok sütunla dengeleyin.

4 ofset 4

3 ofset 3

6 ofset 6

<div sınıfı = "satır-akışkan" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

sıvı yuvalama

Akışkan ızgaralar, iç içe yerleştirmeyi farklı şekilde kullanır: iç içe geçmiş her sütun düzeyi en fazla 12 sütun eklemelidir. Bunun nedeni, değişken ızgaranın genişlikleri ayarlamak için pikselleri değil yüzdeleri kullanmasıdır.

sıvı 12

sıvı 6

<div sınıfı = "satır-akışkan" > 
  <div sınıfı = "span12" > 
    sıvı 12
    <div sınıfı = "satır-akışkan" > 
      <div sınıfı = "span6" > 
        sıvı 6
        <div sınıfı = "satır-akışkan" > 
          <div class = "span6" > Akışkan 6 </div> 
          <div class = "span6" > Akışkan 6 </div> 
        </div>
      </div>
      <div class = "span6" > Akışkan 6 </div> 
    </div>
  </div>
</div>

Sabit düzen

<div class="container">Yalnızca gerekli olan ortak bir sabit genişlikte (ve isteğe bağlı olarak duyarlı) bir düzen sağlar .

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

Akışkan düzeni

<div class="container-fluid">Uygulamalar ve belgeler için harika olan, akıcı, iki sütunlu bir sayfa oluşturun .

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

Duyarlı özellikleri etkinleştirme

<head>Belgenizin içine uygun meta etiketi ve ek stil sayfasını ekleyerek projenizde duyarlı CSS'yi açın . Bootstrap'i Özelleştir sayfasından derlediyseniz, yalnızca meta etiketi eklemeniz gerekir.

<meta adı = "görünüm alanı" içerik = "genişlik=cihaz genişliği, başlangıç ölçeği=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stil sayfası" >

Önüne bak!Bootstrap, her şeyin duyarlı olması gerekmediğinden şu anda varsayılan olarak duyarlı özellikler içermez. Geliştiricileri bu özelliği kaldırmaya teşvik etmek yerine, gerektiğinde etkinleştirmeyi en iyi şekilde düşünüyoruz.

Duyarlı Bootstrap hakkında

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ı sorumlu bir şekilde ve yalnızca mobil izleyicileriniz için bir başlangıç olarak kullanın. Daha büyük projeler için, medya sorgularının katmanlarını değil, özel kod tabanlarını göz önünde bulundurun.

Desteklenen cihazlar

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

Etiket	Düzen genişliği	Sütun genişliği	oluk genişliği
Büyük ekran	1200 piksel ve üstü	70 piksel	30 piksel
Varsayılan	980 piksel ve üstü	60 piksel	20 piksel
Dikey tabletler	768 piksel ve üzeri	42 piksel	20 piksel
Telefonlardan tabletlere	767px ve altı	Değişken sütunlar, sabit genişlik yok
telefonlar	480 piksel ve altı	Değişken sütunlar, sabit genişlik yok

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

Duyarlı yardımcı program sınıfları

Daha hızlı mobil uyumlu geliştirme için, içeriği cihaza göre göstermek ve gizlemek için bu yardımcı program sınıflarını kullanın. Aşağıda, mevcut sınıfların ve bunların belirli bir medya sorgu düzeni üzerindeki etkilerinin (cihaza göre etiketlenmiş) bir tablosu bulunmaktadır. İçinde bulunabilirler responsive.less.

Sınıf	telefonlar767px ve altı	tabletler979px ila 768px	masaüstü bilgisayarlarVarsayılan
`.visible-phone`	Gözle görülür	Gizlenmiş	Gizlenmiş
`.visible-tablet`	Gizlenmiş	Gözle görülür	Gizlenmiş
`.visible-desktop`	Gizlenmiş	Gizlenmiş	Gözle görülür
`.hidden-phone`	Gizlenmiş	Gözle görülür	Gözle görülür
`.hidden-tablet`	Gözle görülür	Gizlenmiş	Gözle görülür
`.hidden-desktop`	Gözle görülür	Gözle görülür	Gizlenmiş

Ne zaman kullanılır

Sınırlı olarak kullanın ve aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının. Bunun yerine, bunları her cihazın sunumunu tamamlamak için kullanın. Duyarlı yardımcı programlar tablolarla kullanılmamalıdır ve bu nedenle desteklenmez.

Duyarlı yardımcı programlar test senaryosu

Yukarıdaki sınıfları test etmek için tarayıcınızı yeniden boyutlandırın veya farklı cihazlara yükleyin.

Şu tarihte görünür...

Yeşil onay işaretleri, sınıfın mevcut görünümünüzde görünür olduğunu gösterir.

Telefon✔ Telefon
Tablet✔ Tablet
masaüstü✔ Masaüstü

Gizli...

Burada yeşil onay işaretleri, sınıfın mevcut görünümünüzde gizlendiğini gösterir.

Telefon✔ Telefon
Tablet✔ Tablet
masaüstü✔ Masaüstü

Genel Ayarlar