Önyükleme

İskele

Bootstrap, duyarlı 12 sütunlu ızgaralar, düzenler ve bileşenler üzerine kurulmuştur.

Genel Ayarlar

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.

  1. <!DOCTYPE html>
  2. <html lang = "tr" > 
  3.   ...
  4. </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.

Varsayılan ızgara sistemi

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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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.

  1. <div sınıfı = "satır" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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

4
3 ofset 2
3 ofset 1
3 ofset 2
6 ofset 3 
  1. <div sınıfı = "satır" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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ını toplayan bir dizi sütun içermelidir..span*.span*

1. düzey sütun
Seviye 2
Seviye 2 
  1. <div sınıfı = "satır" > 
  2.   <div sınıfı = "span9" > 
  3.     1. düzey sütun
  4.     <div sınıfı = "satır" > 
  5.       <div class = "span6" > 2. Düzey </div> 
  6.       <div class = "span3" > 2. Düzey </div> 
  7.     </div>
  8.   </div>
  9. </div>

Akışkan ızgara sistemi

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.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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.

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

Akışkan dengeleme

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

4
4 ofset 4
3 ofset 3
3 ofset 3
6 ofset 6 
  1. <div sınıfı = "satır-akışkan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </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
sıvı 6
sıvı 6
sıvı 6 
  1. <div sınıfı = "satır-akışkan" > 
  2.   <div sınıfı = "span12" > 
  3.     sıvı 12
  4.     <div sınıfı = "satır-akışkan" > 
  5.       <div sınıfı = "span6" > 
  6.         sıvı 6
  7.         <div sınıfı = "satır-akışkan" > 
  8.           <div class = "span6" > Akışkan 6 </div> 
  9.           <div class = "span6" > Akışkan 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Akışkan 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Düzenler

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 .

  1. <body>
  2.   <div sınıfı = "konteyner" > 
  3.     ...
  4.   </div>
  5. </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 .

  1. <div sınıfı = "konteyner-akışkan" > 
  2.   <div sınıfı = "satır-akışkan" > 
  3.     <div sınıfı = "span2" > 
  4.       <!--Kenar çubuğu içeriği-->
  5.     </div>
  6.     <div sınıfı = "span10" > 
  7.       <!--Gövde içeriği-->
  8.     </div>
  9.   </div>
  10. </div>

Sorumlu tasarım

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.

  1. <meta adı = "görünüm alanı" içerik = "genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" >  
  2. <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

Duyarlı cihazlar

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 kitleleriniz 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 
  1. /* Büyük masaüstü */
  2. @media ( min - genişlik : 1200 piksel ) { ... }     
  3.  
  4. /* Dikey tabletten yatay ve masaüstüne */
  5. @media ( minimum genişlik : 768 piksel ) ve ( maksimum genişlik : 979 piksel ) { ... }        
  6.  
  7. /* Yatay telefondan dikey tablete */
  8. @media ( maksimum genişlik : 767 piksel ) { ... }     
  9.  
  10. /* Yatay telefonlar ve aşağı */
  11. @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
.visible-tablet Gözle görülür
.visible-desktop Gözle görülür
.hidden-phone Gözle görülür Gözle görülür
.hidden-tablet Gözle görülür Gözle görülür
.hidden-desktop Gözle görülür Gözle görülür

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ü