Bootstrap Grid'i kullanmayı öğrenme

Önyükleme ızgara tabanlı bir yapıyı yönetir veya olarak da bilinir KafesÖğelerimizi düzenlememize yardımcı olan ekrandaki bir düzenden başka bir şey olmayan , ekranı satırlara ve sütunlara bölüp büyük bir tablo gibi ele almış gibiyiz.
Bu tür bir manipülasyon, tasarımları "benzersiz" bir şekilde düşünmemize ve kullanma deneyimimiz biraz daha fazla olduğu anda bizi yönlendirir. Önyükleme Her şeyi bu şekilde görmeye başlayacağız ve böylece çalışma şeklimizde tutarlılık ve hız kazanacağız.
Bilinmesi gereken ilk şey, bu tasarımın Kafes mobil görünümleri yerel olarak uygulayabileceğimiz bir şekilde çalışmamıza izin veriyor, bu elbette sürüm 3'ten Önyükleme, bu sürümün mobil tasarım düşünülerek oluşturulmuş olması sayesinde.
Çerçevenin önceki sürümlerinde, tasarımımızın mobil cihazların çözünürlüklerine uyum sağlama yeteneği olması için sınıfların doğrudan belirtilmesi gerekiyordu, şimdi farklı sınıflar. Kafes otomatik olarak yaparlar.
Bu özellikten yararlanmak için küçükten büyüğe doğru düşünmeliyiz yani uyguladığımız sınıflar her zaman en küçük olarak düşünülmeli ve daha sonra diğer çözünürlüklere ölçeklenecektir yani bir tanım yaparsak sm sınıfı (küçük veya küçük), otomatik olarak Önyükleme bunun minimum ifade olduğunu ve daha sonra ölçeklenebileceğini varsayar. md (ortanca) veya lg (büyük).
Daha pratik örneklere geçmeden önce, bir sütunun sütunlarında kullanabileceğimiz sınıfların neler olduğunu anlamalıyız. Kafes Ayrıca her birinin hangi durum için geçerli olduğunu da bilmemiz gerekiyor, bu şekilde sitemizi tasarlarken ulaşmak istediğimiz en küçük cihazı hesaba katabiliyoruz.
Bu yaklaşımla siteler oluşturabiliriz Mobil Dostu, bugün arama motorları ve sonuçları için ne kadar önemli hale geldiklerini, böylece iyi siteler yapmanın yanı sıra itibarımızda bazı puanlar kazanmamıza yardımcı oluyorlar. SEO, tabii ki aynı iş ile.
Telefon EkranlarıTelefonların çözünürlükleri kademeli olarak Full HD'ye dönüştürülmüş olsa da, teoride tasarımımızda gezinebilen en küçük cihazdır, bu genellikle en yüksek seviye içindir, orta menzil ve düşük menzil teoride çoğu çok daha düşük çözünürlükleri korur. Tür Kafes bu durumda geçerli olan: col-xs- ve genişlikten daha küçük çözümler için geçerlidir 768 piksel.
Tablet EkranlarıTeorik olarak en küçük ikinci cihazdırlar, daha büyük boyut oranı sayesinde tablet daha büyük bir gezinme yüzeyi sunar, bu nedenle bir telefon ekranından biraz daha fazla içerik kullanabiliriz, buna ek olarak genellikle tabletlerde gezinme yatay olarak yapılır. Bu cihaz için geçerli olan sınıf col-sm- ve daha büyük genişliklere sahip çözünürlükler için geçerlidir. 768 piksel ve altında 992 piksel.
Küçük ekran ekipmanlarıGenellikle masaüstü ve dizüstü bilgisayarların alt sınıflarına ait olan, ekranları 15 inçten küçük veya 10 yıldan fazla ömrü olan donanımlar olabilen, aynı zamanda öğrencilere ve sektöre yönelik dizüstü bilgisayarlardır. satın alma gücü, bu sektör çoğunlukta. Bu durum için geçerli olan sınıf col-md-'dir ve genişlik için sınır çözünürlükleri şundan büyüktür: 992 piksel ve daha az 1200 piksel.
Büyük ekran ekipmanlarıBurada en modern ekipmanların yanı sıra 15 inçten daha büyük ekranlara da göz atabiliriz, bu kategoride ultra taşınabilir, 4K çözünürlük veya QHD ayrıca daha büyük yüzeyleri gördüğümüz yerde 1080p. Burada ele alacağımız genişlikleri göz ardı ederek, 1200 piksel, bu bir sonraki sürümde Önyükleme muhtemelen.
Sistemin arkasındaki teoriyi bildiğimiz için Kafes nın-nin Önyükleme, Pratik uygulamasını yapmaya başlamak iyidir, ancak kodu görmeden önce birkaç kavramı daha anlamamız gerekir, her zaman kurala ve en iyi uygulamalara göre sınıfla bir öğe kullanmalıyız. konteyner, çünkü bu, farklı sütunlarımızı tutmak için adından da anlaşılacağı gibi kapsayıcıyı oluşturacaktır. Bilmemiz gereken diğer bir kavram ise her zaman 12 sütun olacağıdır, bu nedenle yaptığımız farklı kombinasyonlar bu sayıyı hesaba katmalıdır.
Aşağıdaki örnekte 3 büyük sütunlu bir düzen için bir kod oluşturacağız, sınıfı kullanacağız. col-md- ve 12'yi 3'e bölerken 3 eşit sütun istediğimiz için 4 sayısını elde ederiz, dolayısıyla bu sonuç sütunlarımızın her birinin boyutu olacaktır.
Lafı fazla uzatmadan koda bakalım:

 Önyükleme Izgarası
Önyüklemede sütunların nasıl kullanılacağına ilişkin örnek


Sütun a
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.
B sütunu
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.
C sütunu
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.

Yapısı çok basit, class ile bir div oluşturduk. konteynerve sınıfla birlikte bir div içinde sıra sonunda ikincisinde sınıfla birlikte 3 div oluşturduk col-md-4 Bu, taşınabilir olmayan bilgisayarlar için küçük ekranlar sınıfıdır ve bunların her bir div'inin ekranın 4 sütununa eşdeğer olduğunu gösteren 4 sayısını nasıl paraya çevirdiğimizi görüyoruz. Kafes. Tarayıcımızda çalıştırdığımızda neye benzediğini görelim:

BÜYÜT

Dikkat edersek, o zaman 3 büyük sütunumuz var, ancak boyutu, uygulanan sınıfın minimumundan daha düşük bir çözünürlüğe indirdiğimizde ne olur, çünkü sütunlar, gördüğümüz gibi birbiri üzerine yığılacaktır. aşağıdaki görüntü:

BÜYÜT

Bu kötü bir şey olmasa da, bazen tasarımımızın almasını istediğimiz davranış değildir, bunun için farklı çözünürlükler için davranışları doğrudan sınıflara dahil edebiliriz, aşağıdaki kodda sınıfları nasıl değiştirdiğimizi görelim. farklı bir sonuç elde etmek için farklı sütunlar:

 Önyükleme Izgarası
Önyüklemede sütunların nasıl kullanılacağına ilişkin örnek

Sütun a
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.
B sütunu
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.
C sütunu
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama.

Şimdi kodumuzda fark edersek, A ve B sütunları için sınıfı eklediğimiz sınıflarımız dışında her şey aynı kalır. col-sm-6 ve C sütunu için sınıf col-sm-12, bu, çözünürlük düşürüldüğünde, aşağıdaki resimde gördüğümüz gibi, sm sınıflarının yöneteceği anlamına gelir:

BÜYÜT

İlk örnekte aynı boyutta, yığılmak yerine A ve B sütunlarının aynı bölgede olduğunu ve C sütununun kendisine tek bir satır aldığını görüyoruz. Burada büyük faydasını görüyoruz Kafes özellikle duyarlı ve mobil olmaya odaklanan tasarımlarla.
Bununla, sistemin nasıl çalıştığını öğrendiğimiz bu öğreticiyi bitiriyoruz. Kafes nın-nin ÖnyüklemeTabii ki bu sadece buzdağının görünen kısmı, diğer eğitimlerde keşfedebileceğimiz çok daha fazla içerik var, ancak bu temel bilgi ile tasarımlarımızı daha mantıklı bir şekilde ve daha az çabayla nasıl birleştireceğimizi görmeye başlayabiliriz. çerçeve.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.