Uwanja wa Gridi ya Bootstrap

Zana zote

Tengeneza miundo ya gridi inayobadilika ya Bootstrap 5.3 kwa njia ya kuona na nakili madarasa kamili — row, col, vipindi, mpangilio, nafasi na upangaji.

Onyesho la awali Bofya safu wima ili kuihariri
HTML iliyotengenezwa
—

Kila kitu kinaendeshwa kwenye kivinjari chako — hakuna kinachopakiwa.

Madarasa unayoweka yanatumika kuanzia kipindi hiki na kuendelea. Badilisha vipindi ili kujenga miundo inayobadilika.

Safu .row
Safu wima
0
Safu wima iliyochaguliwa

Kuhusu Uwanja wa Gridi ya Bootstrap

Bootstrap Grid Playground inajenga miundo ya safu-na-safu-wima inayoitikia ukitumia mfumo halisi wa gridi ya Bootstrap 5.3. Ongeza hadi safu-wima 12 kwenye safu mlalo, bofya safu-wima yoyote kuweka upana wake, offset na order, na rekebisha nafasi na upatanishi kwenye safu mlalo — muonekano na alama zilizotengenezwa zinasasishwa papo hapo kwa kila mabadiliko.

Kwa sababu gridi za Bootstrap ni mobile-first, kigeuzi cha breakpoint ndicho kikuu: weka safu-wima kuwa col-6 kwenye msingi na col-md-4 kwenye md, na utakuwa umejenga muundo wa kawaida wa kupangwa-juu-ya-simu, tatu-kwa-tatu-kwenye-desktop bila kuandika mstari wowote wa msimbo. Offsets, order na madarasa ya gutter yote yanachukua viambishi vile vile vya kuitikia.

Matokeo ni HTML safi ya kunakili-na-kubandika — div ya safu mlalo pamoja na watoto wake wa safu-wima na madarasa uliyoyasanidi hasa. Nakili kipande chote au madarasa ya safu mlalo pekee; kila kitu kinafanyika kwa ndani kwenye kivinjari chako.

Jinsi ya kutumia Uwanja wa Gridi ya Bootstrap

  1. Ongeza safu-wima kwenye safu mlalo — hadi 12 — na bofya moja kuichagua.
  2. Weka span, offset na order za safu-wima iliyochaguliwa kwa breakpoint ya sasa.
  3. Badilisha breakpoints (sm hadi xxl) kufafanua jinsi muundo unavyopangwa upya kwenye skrini kubwa zaidi.
  4. Rekebisha nafasi za safu mlalo na madarasa yake ya upatanishi.
  5. Kagua muonekano wa moja kwa moja, kisha nakili HTML iliyotengenezwa au madarasa ya safu mlalo.

Maswali yanayoulizwa mara kwa mara

Gridi ya Bootstrap ina upana wa vitengo 12. Safu-wima ambazo jumla ya span zake inazidi 12 zinafunga kwenye mstari mpya ndani ya safu mlalo ile ile — hilo ni tabia inayotarajiwa na mara nyingi hutumiwa kimakusudi kuunda gridi za mistari mingi.

Ipe safu-wima msingi wa upana kamili (col-12) na span nyembamba zaidi kwenye breakpoint, kama col-md-4. Chini ya 768 px safu-wima zinapangwa juu; kutoka md kuendelea juu zinapangana tatu kwa tatu. Kigeuzi cha breakpoint kinajenga hasa hivi.

Offset inasukuma safu-wima kulia kwa idadi ya vitengo vya gridi (offset-md-2 inaruka viwili). Tumia offsets kuweka katikati safu-wima moja au kuunda nafasi tupu ya kimakusudi bila kuweka safu-wima tupu za kujaza.

Ndiyo — madarasa ya gutter kwenye safu mlalo yanadhibiti nafasi za mlalo na wima kati ya safu-wima. Playground inayaonyesha pamoja na chaguo za upatanishi wa safu mlalo, na yanakubali viambishi vya kuitikia kama darasa lolote lingine la gridi.

Ndiyo, ni bure kabisa. Kiundaji hiki kinafanya kazi ndani ya kivinjari chako pekee, hivyo miundo yako kamwe haipakiwi au kuhifadhiwa upande wa seva.
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
uwanja wa gridi ya bootstrap kitengeneza gridi ya bootstrap mfumo wa gridi ya bootstrap 5 kitengeneza madarasa ya row col zana ya kipindi cha safu wima bootstrap kijenzi cha gridi inayobadilika ya bootstrap kitengeneza nafasi na upangaji 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.