Önyükleme

İskele

Bootstrap, duyarlı 12 sütunlu bir ızgara üzerine inşa edilmiştir. Ayrıca, bu sisteme dayalı sabit ve değişken genişlikli düzenleri de dahil ettik.

CSS sıfırlama, tipografi ve bağlantılar için genel stiller

HTML5 doküman türü gerektirir

Bootstrap, HTML5 doktipinin kullanılmasını gerektiren HTML öğelerini ve CSS özelliklerini kullanır. Projenizdeki her Bootstrapped sayfasının başına eklediğinizden emin olun.

  1. <!DOCTYPE html>
  2. <html lang = "tr" > 
  3.   ...
  4. </html>

Tipografi ve bağlantılar

scaffolding.less dosyasında temel genel görüntüleme, tipografi ve bağlantı stillerini belirledik . Özellikle, biz:

  • Gövde üzerindeki kenar boşluğunu kaldırı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

Normalize ile Sıfırla

Bootstrap 2'den itibaren, geleneksel CSS sıfırlama, Nicolas Gallagher'ın HTML5 Boilerplate'i de destekleyen bir projesi olan Normalize.css'deki öğeleri kullanmak için gelişti .

Yeni sıfırlama hala reset.less içinde bulunabilir , ancak kısalık ve doğruluk için birçok öğe kaldırılmıştır.

Duyarlı bir bükülme ile varsayılan ızgara sistemi 12 sütun

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

Bootstrap'te sağlanan varsayılan ızgara sistemi , 724 piksel, 940 piksel (varsayılan olarak duyarlı CSS dahil değildir) ve 1170 piksel genişliklerinde görüntülenen 12 sütun kullanır. 767px görünüm alanlarının altında, sütunlar akıcı hale gelir ve dikey olarak yığılır.

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

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


Sütunları dengeleme

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

İç içe satırlar, üst öğesinin sütun sayısına ekleyen bir dizi sütun içermelidir. Örneğin, iç içe iki .span3sütun bir .span6.

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

Akışkan ızgara sistemi 12 duyarlı, yüzde tabanlı sütun

Akışkan sütunları

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

Yüzdeler, piksel değil

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

Akışkan sıraları

olarak değiştirerek herhangi bir satırı akıcı .rowhale getirin .row-fluid. Sütunlar tamamen aynı kalır, bu da sabit ve akışkan düzenler arasında geçiş yapmayı çok kolaylaştırır.

İşaretleme

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

sıvı yuvalama

Değişken ızgaralarla iç içe geçme biraz farklıdır: iç içe geçmiş sütunların sayısının üst öğeyle eşleşmesi gerekmez. Bunun yerine, her satır üst sütunun %100'ünü kapladığı için sütunlarınız her düzeyde sıfırlanır.

sıvı 12
sıvı 6
sıvı 6 
  1. <div sınıfı = "satır-akışkan" > 
  2.   <div sınıfı = "span12" > 
  3.     Sütunun 1. Seviyesi
  4.     <div sınıfı = "satır-akışkan" > 
  5.       <div class = "span6" > 2. Düzey </div> 
  6.       <div class = "span6" > 2. Düzey </div> 
  7.     </div>
  8.   </div>
  9. </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

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.

Düzenler Web sayfaları oluşturmak için temel şablonlar

Sabit düzen

Tek bir <div class="container">.

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

  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>

Duyarlı tasarım Çeşitli cihazlar ve çözünürlükler için medya sorguları

Duyarlı cihazlar

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ı 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
Akıllı telefonlar 480 piksel ve altı Değişken sütunlar, sabit genişlik yok
Akıllı telefonlardan tabletlere 767px ve altı Değişken sütunlar, sabit genişlik yok
Dikey tabletler 768 piksel ve üzeri 42 piksel 20 piksel
Varsayılan 980 piksel ve üstü 60 piksel 20 piksel
Büyük ekran 1200 piksel ve üstü 70 piksel 30 piksel

Meta etiket gerektirir

Cihazların duyarlı sayfaları düzgün bir şekilde görüntülemesini sağlamak için görünüm meta etiketini ekleyin.

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

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:

  1. Derlenmiş duyarlı sürümü kullanın, bootstrap-responsive.css
  2. @import "responsive.less" ekleyin ve Bootstrap'i yeniden derleyin
  3. 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.

  1.   /* Yatay telefonlar ve aşağı */
  2.   @media ( maksimum genişlik : 480 piksel ) { ... }     
  3.  
  4.   /* Yatay telefondan dikey tablete */
  5.   @media ( maksimum genişlik : 767 piksel ) { ... }     
  6.  
  7.   /* Dikey tabletten yatay ve masaüstüne */
  8.   @media ( minimum genişlik : 768 piksel ) ve ( maksimum genişlik : 979 piksel ) { ... }        
  9.  
  10.   /* Büyük masaüstü */
  11.   @media ( min - genişlik : 1200 piksel ) { ... }

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

Onlar neler

Daha hızlı mobil uyumlu geliştirme için, içeriği cihaza göre göstermek ve gizlemek için bu temel yardımcı program sınıflarını kullanın.

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.

Örneğin, <select>mobil mizanpajlarda gezinme için bir öğe gösterebilirsiniz, ancak tabletlerde veya masaüstlerinde gösteremezsiniz.

Destek sınıfları

Burada, desteklediğimiz sınıfların ve bunların belirli bir medya sorgu düzeni üzerindeki etkilerinin (cihaza göre etiketlenmiş) bir tablosu gösterilmektedir. İçinde bulunabilirler responsive.less.

Sınıf telefonlar480 piksel ve altı tabletler767px ve altı masaüstü bilgisayarlar768 piksel ve üzeri
.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

Test durumu

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ü