Bootstrap Flex Playground

Tüm araçlar

Bootstrap 5.3 flex düzenlerini görsel olarak oluşturun ve tam yardımcı sınıfları kopyalayın — d-flex, justify-content, align-items, order, grow ve daha fazlası.

Önizleme Düzenlemek için bir öğeye tıklayın
Oluşturulan HTML
—

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

Belirlediğiniz sınıflar bu kesme noktasından itibaren yukarıya doğru uygulanır. Duyarlı düzenler oluşturmak için kesme noktalarını değiştirin.

Kapsayıcı
Öğeler
0
Seçili öğe

Bootstrap Flex Playground Hakkında

Bootstrap Flex Oyun Alanı, ham CSS yerine gerçek Bootstrap 5.3 yardımcı sınıflarıyla flexbox düzenleri oluşturmanızı sağlar. Kapsayıcıyı — yön, sarma, justify-content, align-items, boşluk — bölümlü kontrollerle yapılandırın, kendi align-self, order, büyüme ve küçülme yardımcılarını ayarlamak için herhangi bir öğeye tıklayın ve canlı önizlemenin anında yeniden düzenlenmesini izleyin.

Kırılma noktası değiştirici, bu aracı bir oyuncaktan fazlası yapan şeydir: sm, md, lg, xl veya xxl seçin ve o noktadan itibaren ayarladığınız sınıflar duyarlı ön eki kazanır — justify-content-md-between, flex-lg-row — tam olarak Bootstrap'in mobil öncelikli sisteminin bu kırılma noktasından itibaren uyguladığı gibi. Gerçekçi bir bileşeni simüle etmek için 12'ye kadar öğe ekleyin.

Düzen doğru göründüğünde, oluşturulan HTML'yi veya yalnızca kapsayıcı sınıflarını kopyalayıp doğrudan projenize yapıştırın. Her şey tarayıcınızda çalışır ve hiçbir şey yüklenmez.

Bootstrap Flex Playground Nasıl Kullanılır

  1. Bölümlü kontrollerle kapsayıcı yardımcılarını — yön, sarma, justify-content, align-items ve boşluk — ayarlayın.
  2. Gerçek bileşeninizle eşleştirmek için öğe ekleyin veya kaldırın (2 ila 12).
  3. Bir öğeye kendi align-self, order veya flex boyutlandırma yardımcılarını vermek için tıklayın.
  4. sm, md, lg, xl veya xxl'den yukarı doğru uygulanan duyarlı varyantlar eklemek için kırılma noktalarını değiştirin.
  5. Canlı önizlemeyi kontrol edin, ardından oluşturulan HTML'yi veya kapsayıcı sınıflarını kopyalayın.

Sıkça sorulan sorular

Bootstrap mobil önceliklidir: bir kırılma noktasında ayarlanan bir sınıf, o genişlikten itibaren uygulanır. md seçiliyken justify-content-between ayarlamak, 768 pikselde devreye giren ve daha büyük ekranlarda etkin kalan justify-content-md-between'i üretir.

Bu araç, bir Bootstrap projesi için hazır Bootstrap 5.3 yardımcı sınıflarını (d-flex, justify-content-center, order-2) çıktı olarak verir. Flexbox Oyun Alanı ise bunun yerine düz CSS özellikleri üretir — hangisi altyapınıza uyuyorsa onu seçin.

Evet. Seçmek için önizlemede herhangi bir öğeye tıklayın, ardından align-self, order, büyüme ve küçülme gibi öğe başına yardımcılar ayarlayın. Oluşturulan HTML, her öğeyi tam olarak atadığınız sınıflarla gösterir.

2 ile 12 arasında. Bu aralık, basit bir iki sütunlu başlıktan tam bir yardımcı çubuğa kadar her şeyi kapsar ve deneme yaparken önizlemeyi okunabilir tutar.

Evet, ücretsizdir ve tamamen tarayıcınızda çalışır — kayıt gerekmez ve oluşturduğunuz hiçbir şey herhangi bir yere yüklenmez.
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 flex playground bootstrap flexbox oluşturucu bootstrap 5 flex yardımcı sınıfları d-flex sınıf oluşturucu justify-content align-items bootstrap bootstrap flex sınıfları oluşturucu duyarlı flexbox bootstrap aracı
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.