Grid Sistem 1

Grid Sistem 1

• 1. Grid Sistem Grid Sistem On iki sütun sistemi, beş responsive katmanı, Sass değişkenleri ve mixins ayrıca önceden tanımlanmış düzinelerce sınıf sayesinde, tüm şekil ve boyutlardaki yerleşimleri oluşturmak için güçlü mobil-first flexbox grid’leri kullanın.
• 2. Nasıl Çalışır? Nasıl Çalışır? Bootstrap’ın Grid sistemi, içeriği düzenlemek ve hizalamak için bir dizi kapsayıcı, satır ve sütun kullanır. Flexbox ile inşa edilmiş ve tamamen responsive.
• 3. İşte Nasıl Çalışır? İşte Nasıl Çalışır? •Kapsayıcılar, sitenizin içeriğini ortalamak ve yatay olarak doldurmak için bir araç sağlar. Responsive bir piksel genişliği için .container veya %100 genişlik için .container-fluid kullanın . •Satırlar sütunları kapsayan yapıdadır. Her sütun, aralarındaki boşluğu kontrol etmek için yatay padding’e sahiptir. Bu padding, daha sonra negatif kenar boşlukları ile satırlarda etkisiz hale getirilir. Bu şekilde, sütunlarınızdaki tüm içerik görsel olarak sol tarafa hizalanır.
• 4. İşte Nasıl Çalışır? İşte Nasıl Çalışır? •Bir Grid düzeninde, içerik sütunlar içine yerleştirilmeli ve yalnızca sütunlar hemen satırların çocukları olabilir. •Flexbox sayesinde, belirli bir genişliğe sahip olmayan grid sütunları eşit genişlik sütunları olarak otomatik düzenlenir. Örneğin, dört adet .col-sm, küçük kesme noktasından ve yukarıdan otomatik olarak% 25 genişlikte olacaktır.
• 5. İşte Nasıl Çalışır? İşte Nasıl Çalışır? •Sütun sınıfları, satırlar 12 sütundan oluşur. Yani, eşit genişlikte üç sütun istiyorsanız, .col- 4 kullanabilirsiniz. •Sütun genişlikleri yüzde olarak ayarlanır, bu nedenle her zaman ana öğelerine boyutlandırılır. •Sütunlar, sütunlar arasındaki olukları oluşturmak için yatay padding’e sahiptir, ancak satırlardan margin’I kaldırabilir ve .no-gutters ile sütunlara padding ekleyebilirsiniz
• 6. İşte Nasıl Çalışır? İşte Nasıl Çalışır? •Grid’i responsive yapabilmek için, her bir kesme noktası için beş grid breakpoint vardır: çok küçük , küçük, orta, büyük ve çok büyük. •Grid breakpoint’leri, en küçük genişlikli medya sorgularına dayanır, yani bir breakpoint ve bunların üzerindeki tüm değerler için geçerlidir (örneğin .col-sm-4, küçük, orta, büyük ve çok büyük ekranlar için geçerlidir, ancak ilk xs kesme noktası değildir) •Daha fazla semantik işaretleme için önceden tanımlanmış Grid sınıfları (.col-4 gibi) veya Sass mixins’i kullanabilirsiniz.
• 7. Grid Seçenekleri Grid Seçenekleri Bootstrap, çoğu boyutu tanımlamak için em veya rem kullanırken, px'ler Grid breakpoint’ler ve konteyner genişlikleri için kullanılır. Bunun nedeni, görünüm genişliğinin piksel cinsinden olması ve yazı tipi boyutu ile değişmemesidir.
• 8. Otomatik Düzen Sütunları Otomatik Düzen Sütunları .Col-sm-6 gibi açık bir numaralı sınıf olmadan, kolay sütun boyutlandırma için aralığa özel sütun sınıflarını kullanın.
• 9. Eşit Genişlikli Eşit Genişlikli Örneğin, her cihaz ve görünüm için xs'den xl'ye uygulanan iki grid düzenidir. İhtiyacınız olan her kesme noktası için herhangi bir birimsiz sınıf sayısı ekleyin ve her sütun aynı genişlikte olacaktır.
• 10. Eşit Genişlikli Eşit Genişlikli Eşit genişlikli sütunlar birden çok satıra bölünebilir, ancak açık bir esnek temel veya kenarlık olmadan çalışmasını engelleyen bir Safari flexbox hatası vardı. Eski tarayıcı sürümleri için geçici çözümler vardır, ancak güncel olmanız durumunda bunlar gerekli olmamalıdır.
• 11. Bir Sütun Genişliği Ayarlama Bir Sütun Genişliği Ayarlama Eşit genişlikli sütunlar birden çok satıra bölünebilir, ancak açık bir esnek temel veya kenarlık olmadan çalışmasını engelleyen bir Safari flexbox hatası vardı. Eski tarayıcı sürümleri için geçici çözümler vardır, ancak güncel olmanız durumunda bunlar gerekli olmamalıdır.
• 12. Değişken Genişlik İçeriği Değişken Genişlik İçeriği İçeriğinin doğal genişliğine göre sütunları boyutlandırmak için col- {breakpoint} - auto sınıflarını kullanın.
• 13. Eşit Genişlikli Çok Satırlı Eşit Genişlikli Çok Satırlı Sütunun yeni bir satıra bölünmesini istediğiniz yere .w-100 ekleyerek birden fazla satırı kapsayan eşit genişlikte sütunlar oluşturun.
• 14. Responsive Sınıflar Responsive Sınıflar Bootstrap’ın grid’i, karmaşık yanıt veren düzenleri oluşturmak için önceden tanımlanmış beş katman sınıfı içerir
• 15. Tüm Breakpoint’ler Tüm Breakpoint’ler En küçük cihazlardan en büyüğüne kadar olan grid’ler için .col ve .col-* sınıflarını kullanın
• 16. Karıştır Ve Eşleştir Karıştır Ve Eşleştir Sütunlarınızın yalnızca bazı grid katmanlarına yığılmasını istemiyor musunuz? Gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanın.
• 17. Karıştır Ve Eşleştir Karıştır Ve Eşleştir Sütunlarınızın yalnızca bazı grid katmanlarına yığılmasını istemiyor musunuz? Gerektiğinde her katman için farklı sınıfların bir kombinasyonunu kullanın.