Bootstrap Flex Playground

Zana zote

Jenga miundo ya flex ya Bootstrap 5.3 kwa njia ya kuona na unakili madarasa kamili ya utility — d-flex, justify-content, align-items, order, grow na mengineyo.

Onyesho la awali Bofya kipengele ili kukihariri
HTML Iliyozalishwa
—

Kila kitu kinaendeshwa kwenye kivinjari chako — hakuna chochote kinachopakiwa.

Madarasa unayoweka yanatumika kuanzia breakpoint hii na kuendelea. Badilisha breakpoint ili kujenga miundo inayobadilika.

Kontena
Vipengele
0
Kipengele kilichochaguliwa

Kuhusu Bootstrap Flex Playground

Bootstrap Flex Playground inakuwezesha kujenga miundo ya flexbox ukitumia madarasa halisi ya matumizi ya Bootstrap 5.3 badala ya CSS ghafi. Sanidi kontena — mwelekeo, ufungaji, justify-content, align-items, gap — kwa kutumia vidhibiti vilivyogawanywa, bofya kipengele chochote kuweka align-self, order, grow na shrink vyake, na uangalie muonekano wa moja kwa moja ukipangwa upya papo hapo.

Kigeuzi cha breakpoint ndicho kinachoifanya zaidi ya mchezo tu: chagua sm, md, lg, xl au xxl na madarasa unayoweka kuanzia hatua hiyo yanapata kiambishi cha kuitikia — justify-content-md-between, flex-lg-row — hasa jinsi mfumo wa Bootstrap wa mobile-first unavyoyatumia kuanzia breakpoint hiyo na kuendelea. Ongeza hadi vipengele 12 kuiga sehemu halisi.

Muundo ukionekana sahihi, nakili HTML iliyotengenezwa au madarasa ya kontena pekee na uyabandike moja kwa moja kwenye mradi wako. Kila kitu kinafanyika ndani ya kivinjari chako na hakuna kinachopakiwa.

Jinsi ya kutumia Bootstrap Flex Playground

  1. Weka matumizi ya kontena — mwelekeo, wrap, justify-content, align-items na gap — kwa vidhibiti vilivyogawanywa.
  2. Ongeza au ondoa vipengele (2 hadi 12) kulingana na sehemu yako halisi.
  3. Bofya kipengele kukipa align-self, order au madarasa ya ukubwa wa flex yake mwenyewe.
  4. Badilisha breakpoints kuongeza toleo la kuitikia linaloanza kutumika kuanzia sm, md, lg, xl au xxl kuendelea juu.
  5. Angalia muonekano wa moja kwa moja, kisha nakili HTML iliyotengenezwa au madarasa ya kontena.

Maswali yanayoulizwa mara kwa mara

Bootstrap ni mobile-first: darasa lililowekwa kwenye breakpoint linatumika kuanzia upana huo na kuendelea. Kuweka justify-content-between wakati md imechaguliwa kunazalisha justify-content-md-between, inayoanza kutumika kwenye 768 px na kubaki hai kwenye skrini kubwa zaidi.

Zana hii inatoa madarasa ya matumizi ya Bootstrap 5.3 (d-flex, justify-content-center, order-2) tayari kwa mradi wa Bootstrap. Flexbox Playground inazalisha sifa za CSS wazi badala yake — chagua inayolingana na mfumo wako.

Ndiyo. Bofya kipengele chochote kwenye muonekano kukichagua, kisha uweke matumizi ya kipengele-kimoja kama align-self, order, grow na shrink. HTML iliyotengenezwa inaonyesha kila kipengele na madarasa uliyoyapa hasa.

Kati ya 2 na 12. Kiwango hicho kinajumuisha kila kitu kutoka kichwa cha safu-mbili rahisi hadi upau kamili wa matumizi, na kuweka muonekano ukiwa rahisi kusomeka wakati unajaribu.

Ndiyo, ni bure na inafanya kazi kabisa ndani ya kivinjari chako — hakuna usajili, na hakuna unachounda kinachopakiwa popote.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
bootstrap flex playground kizalishaji flexbox bootstrap utilities za flex bootstrap 5 kizalishaji madarasa ya d-flex justify-content align-items bootstrap kijenzi madarasa ya flex bootstrap zana ya flexbox inayobadilika bootstrap
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.