Bootstrap Izgara Oyun Alanı

Tüm araçlar

Bootstrap 5.3 ızgarasıyla duyarlı düzenleri görsel olarak oluşturun ve tam sınıfları kopyalayın — row, col, kaydırmalar, sıralama, oluklar ve hizalama.

Önizleme Düzenlemek için bir sütuna tıklayın
Oluşturulan HTML
—

Her şey tarayıcınızda çalışır — hiçbir şey yüklenmez.

Ayarladığınız sınıflar bu kesme noktasından itibaren ve yukarısı için geçerlidir. Duyarlı düzenler oluşturmak için kesme noktalarını değiştirin.

Satır .row
Sütunlar
0
Seçili sütun

Bootstrap Izgara Oyun Alanı Hakkında

Bootstrap Izgara Oyun Alanı, gerçek Bootstrap 5.3 ızgara sistemiyle duyarlı satır-sütun düzenleri oluşturur. Bir satıra 12'ye kadar sütun ekleyin, genişliğini, ofsetini ve sırasını ayarlamak için herhangi bir sütuna tıklayın ve satırdaki oyuk aralıklarını ve hizalamayı ayarlayın — önizleme ve oluşturulan biçimlendirme her değişiklikle canlı olarak güncellenir.

Bootstrap ızgaraları mobil öncelikli olduğundan, kırılma noktası değiştirici merkezi bir öneme sahiptir: temel seviyede bir sütunu col-6 ve md'de col-md-4 olarak ayarlayın, böylece kod yazmadan mobilde alt alta, masaüstünde üçlü sıralı klasik deseni oluşturmuş olursunuz. Ofsetler, sıra ve oyuk sınıflarının hepsi aynı duyarlı ön ekleri alır.

Çıktı, temiz bir kopyala-yapıştır HTML'dir — sütun alt öğeleriyle ve tam olarak yapılandırdığınız sınıflarla bir satır div'i. Tüm parçacığı veya yalnızca satır sınıflarını kopyalayın; her şey yerel olarak tarayıcınızda çalışır.

Bootstrap Izgara Oyun Alanı Nasıl Kullanılır

  1. Satıra sütunlar ekleyin — 12'ye kadar — ve birini seçmek için tıklayın.
  2. Geçerli kırılma noktası için seçili sütunun genişliğini, ofsetini ve sırasını ayarlayın.
  3. Düzenin daha büyük ekranlarda nasıl yeniden akacağını tanımlamak için kırılma noktalarını (sm'den xxl'ye) değiştirin.
  4. Satırın oyuklarını ve hizalama yardımcılarını ayarlayın.
  5. Canlı önizlemeyi inceleyin, ardından oluşturulan HTML'yi veya satır sınıflarını kopyalayın.

Sıkça sorulan sorular

Bootstrap'in ızgarası 12 birim genişliğindedir. Toplam genişliği 12'yi aşan sütunlar aynı satır içinde yeni bir satıra geçer — bu beklenen bir davranıştır ve genellikle çok satırlı ızgaralar oluşturmak için kasıtlı olarak kullanılır.

Sütuna tam genişlikte bir temel (col-12) ve bir kırılma noktasında col-md-4 gibi daha dar bir genişlik verin. 768 pikselin altında sütunlar alt alta gelir; md'den itibaren üçlü sıralı dizilir. Kırılma noktası değiştirici tam olarak bunu oluşturur.

Bir ofset, bir sütunu bir dizi ızgara birimi kadar sağa iter (offset-md-2 ikisini atlar). Boş dolgu sütunları eklemeden tek bir sütunu ortalamak veya kasıtlı boşluk oluşturmak için ofsetleri kullanın.

Evet — satırdaki oyuk yardımcıları, sütunlar arasındaki yatay ve dikey boşluğu kontrol eder. Oyun alanı bunları satır hizalama seçenekleriyle birlikte sunar ve diğer ızgara sınıfları gibi duyarlı ön ekleri kabul ederler.

Evet, tamamen ücretsizdir. Oluşturucu yalnızca tarayıcınızda çalışır, bu yüzden düzenleriniz asla sunucu tarafında yüklenmez veya saklanmaz.
Paylaş
İlgili Araçlar
E-posta İmza Oluşturucu 30 şablon arasından profesyonel bir HTML e-posta imzası tasarlayın, özelleştirin ve kaydedin. Ücretsiz
Simgeden PNG'ye Bootstrap Icons, Font Awesome ve diğerlerini özel PNG görsellerine dönüştür — ücretsiz, tarayıcında. Ücretsiz
Uygulama Simgesi Oluşturucu App Store ve Google Play için eksiksiz, mağazaya hazır bir uygulama simgesi seti oluşturun — logonuzdan üretilen birinci sınıf gradyan, mesh ve desen arka planları. Ücretsiz
Favicon Oluşturucu Bir logodan, bir yazı tipi simgesinden veya bir monogramdan eksiksiz bir favicon paketi oluşturun — favicon.ico, modern PNG'ler, Apple touch simgesi, PWA simgeleri, bir web manifesti ve HTML parçacığı. Ücretsiz
CSS Box Shadow Oluşturucu Kaydırıcılarla offset, bulanıklık, yayılım, renk, opaklık ve iç gölge seçeneklerini ayarlayarak katmanlı CSS box-shadow'lar oluşturun — gerçek bir öğede önizleyin ve yapıştırmaya hazır CSS'yi anında kopyalayın. Ücretsiz
CSS Köşe Yarıçapı Oluşturucu CSS border-radius'u canlı önizlemeyle görsel olarak tasarlayın ve üretime hazır kodu kopyalayın. Ücretsiz
Popüler aramalar
bootstrap ızgara oyun alanı bootstrap ızgara oluşturucu bootstrap 5 ızgara sistemi row col sınıf oluşturucu bootstrap sütun kaydırma aracı duyarlı bootstrap ızgara oluşturucu bootstrap oluk hizalama oluşturucu
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.