Bootstrap Flex Playground

Semua alat

Bina susun atur flex Bootstrap 5.3 secara visual dan salin kelas utiliti yang tepat — d-flex, justify-content, align-items, order, grow dan banyak lagi.

Pratonton Klik satu item untuk menyuntingnya
HTML yang Dihasilkan
—

Semuanya berjalan dalam pelayar anda — tiada apa-apa yang dimuat naik.

Kelas yang anda tetapkan terpakai bermula dari breakpoint ini ke atas. Tukar breakpoint untuk membina susun atur responsif.

Bekas
Item
0
Item yang dipilih

Mengenai Bootstrap Flex Playground

Ruang Uji Bootstrap Flex membolehkan anda membina susun atur flexbox dengan kelas utiliti Bootstrap 5.3 sebenar berbanding CSS mentah. Konfigurasikan bekas — arah, pembungkusan, justify-content, align-items, gap — dengan kawalan bersegmen, klik mana-mana item untuk menetapkan align-self, order, grow dan shrink sendiri, dan lihat pratonton langsung tersusun semula serta-merta.

Suis titik putus adalah yang menjadikannya lebih daripada sekadar mainan: pilih sm, md, lg, xl atau xxl dan kelas yang anda tetapkan dari titik itu akan mendapat awalan responsif — justify-content-md-between, flex-lg-row — tepat sepertimana sistem mudah alih-dahulu Bootstrap menerapkannya dari titik putus itu ke atas. Tambah sehingga 12 item untuk mensimulasikan komponen yang realistik.

Apabila susun atur kelihatan betul, salin HTML yang dijana atau hanya kelas bekas dan tampalkannya terus ke dalam projek anda. Semuanya berjalan dalam pelayar anda dan tiada apa-apa dimuat naik.

Cara menggunakan Bootstrap Flex Playground

  1. Tetapkan utiliti bekas — arah, wrap, justify-content, align-items dan gap — dengan kawalan bersegmen.
  2. Tambah atau buang item (2 hingga 12) untuk memadankan komponen sebenar anda.
  3. Klik satu item untuk memberinya utiliti align-self, order atau saiz flex tersendiri.
  4. Tukar titik putus untuk menambah varian responsif yang terpakai dari sm, md, lg, xl atau xxl ke atas.
  5. Semak pratonton langsung, kemudian salin HTML yang dijana atau kelas bekas.

Soalan lazim

Bootstrap adalah mudah alih-dahulu: kelas yang ditetapkan pada titik putus terpakai dari lebar itu ke atas. Menetapkan justify-content-between semasa md dipilih menghasilkan justify-content-md-between, yang mula berkuat kuasa pada 768 px dan kekal aktif pada skrin lebih besar.

Alat ini menghasilkan kelas utiliti Bootstrap 5.3 (d-flex, justify-content-center, order-2) yang sedia untuk projek Bootstrap. Ruang Uji Flexbox pula menjana sifat CSS biasa — pilih yang sesuai dengan timbunan teknologi anda.

Ya. Klik mana-mana item dalam pratonton untuk memilihnya, kemudian tetapkan utiliti setiap item seperti align-self, order, grow dan shrink. HTML yang dijana menunjukkan setiap item dengan kelas yang tepat anda tetapkan.

Antara 2 hingga 12. Julat itu meliputi segalanya daripada pengepala dua lajur mudah hingga bar utiliti penuh, dan mengekalkan pratonton mudah dibaca semasa anda bereksperimen.

Ya, ia percuma dan berjalan sepenuhnya dalam pelayar anda — tiada pendaftaran, dan tiada apa yang anda bina dimuat naik ke mana-mana.
Kongsi ini
Alat Berkaitan
Pembina Tandatangan E-mel Reka bentuk tandatangan e-mel HTML yang profesional daripada 30 templat, sesuaikan dan simpan. Percuma
Ikon ke PNG Tukar Bootstrap Icons, Font Awesome dan lain-lain kepada imej PNG tersuai — percuma, dalam pelayar anda. Percuma
Penjana Ikon Aplikasi Jana set ikon aplikasi yang lengkap dan sedia untuk kedai bagi App Store dan Google Play — latar belakang gradien, mesh dan corak premium, dijana daripada logo anda. Percuma
Penjana Favicon Bina pakej favicon lengkap daripada logo, ikon fon atau monogram — favicon.ico, PNG moden, ikon Apple touch, ikon PWA, manifes web dan petikan HTML. Percuma
Penjana Bayang Kotak CSS Cipta bayang-kotak CSS berlapis dengan gelangsar langsung untuk ofset, blur, sebaran, warna, kelegapan dan inset — pratonton pada elemen sebenar dan salin CSS yang sedia tampal serta-merta. Percuma
Penjana Jejari Sempadan CSS Cipta border-radius CSS secara visual dengan pratonton langsung dan salin kod sedia pengeluaran. Percuma
Carian popular
bootstrap flex playground penjana flexbox bootstrap utiliti flex bootstrap 5 penjana kelas d-flex justify-content align-items bootstrap pembina kelas flex bootstrap alat flexbox responsif bootstrap
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.