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.
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.
- <div sınıfı = "satır" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
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 .row
ve bir dizi sütun eklemeniz yeterlidir..span*
.span*
İç içe satırlar, üst öğesinin sütun sayısına ekleyen bir dizi sütun içermelidir. Örneğin, iç içe iki .span3
sütun bir .span6
.
- <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>
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.
olarak değiştirerek herhangi bir satırı akıcı .row
hale 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.
- <div sınıfı = "satır-akışkan" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div sınıfı = "satır-akışkan" >
- <div sınıfı = "span12" >
- Sütunun 1. Seviyesi
- <div sınıfı = "satır-akışkan" >
- <div class = "span6" > 2. Düzey </div>
- <div class = "span6" > 2. Düzey </div>
- </div>
- </div>
- </div>
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 |
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.
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.
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.
Tek bir <div class="container">
.
- <body>
- <div sınıfı = "konteyner" >
- ...
- </div>
- </body>
<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>
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 | |
Dikey tabletler | 480 piksel ila 768 piksel | Değişken sütunlar, sabit genişlik yok | |
Manzara tabletleri | 768 piksel ila 979 piksel | 42 piksel | 20 piksel |
Varsayılan | 980 piksel ve üstü | 60 piksel | 20 piksel |
Büyük ekran | 1210 piksel ve üstü | 70 piksel | 30 piksel |
Cihazların duyarlı sayfaları düzgün bir şekilde görüntülemesini sağlamak için görünüm meta etiketini ekleyin.
- <meta adı = "görünüm alanı" içerik = "genişlik=cihaz genişliği, başlangıç ölçeği=1.0" >
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-width
ve etrafında odaklanır max-width
.
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:
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 : 980 piksel ) { ... }
- // Büyük masaüstü
- @media ( min - genişlik : 1200 piksel ) { .. }