Šajā rakstā tiks parādīta metode, kā lietot pārtraukumpunktus un multivides vaicājumus Tailwind CSS rindu režģī.
Kā lietot pārtraukuma punktus un multivides vaicājumus rindu režģī programmā Tailwind?
Lai lietotu pārtraukuma punktus un multivides vaicājumus rindu režģī programmā Tailwind, izveidojiet HTML programmu. Pēc tam definējiet rindu skaitu dažādiem ekrāna izmēriem, izmantojot ' sm ”, “ md ” vai “ lg ' pārtraukuma punkti ar ' grid-rows-
Izpētīsim praktisko ieviešanu:
1. darbība. Izmantojiet pārtraukuma punktus un multivides vaicājumus ar rindu režģi HTML programmā
Izveidojiet HTML programmu un definējiet rindu skaitu dažādiem ekrāna izmēriem ar ' grid-rows-
< ķermeni >
< div klasē = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klasē = 'bg-teal-500 p-5' > 1 < / div >
< div klasē = 'bg-teal-500 p-5' > 2 < / div >
< div klasē = 'bg-teal-500 p-5' > 3 < / div >
< div klasē = 'bg-teal-500 p-5' > 4 < / div >
< div klasē = 'bg-teal-500 p-5' > 5 < / div >
< div klasē = 'bg-teal-500 p-5' > 6 < / div >
< div klasē = 'bg-teal-500 p-5' > 7 < / div >
< div klasē = 'bg-teal-500 p-5' > 8 < / div >
< div klasē = 'bg-teal-500 p-5' > 9 < / div >
< div klasē = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / ķermeni >
Šeit:
- ' režģis ” klase tiek izmantota, lai izveidotu režģa izkārtojumu.
- ' režģis-rindas-2 ” klase norāda, ka režģī jābūt 2 vienāda izmēra rindām.
- ' md:grid-rows-3 ” klase maina režģi 3 vienāda lieluma rindās uz vidēja ekrāna.
- ' lg:grid-rows-5 ” klase maina režģi 5 vienāda izmēra rindās lielajā ekrānā.
- ' grid-flow-col ” klase ievieto režģa elementus horizontāli kolonnās.
- ' sprauga-3 ” klase nosaka 3 vienību atstarpi starp katru režģa vienumu.
- ' m-3 ” klase piemēro 3 vienību rezervi ap režģa konteineru.
- ' teksta centrs ” klase iestata katra režģa vienuma tekstu centrā.
- ' bg-teal-500 ” klase iestata zilganzaļo krāsu uz režģa elementu fona.
- ' p-5 ” klase pievieno 5 vienību pildījumu saturam bērna iekšienē
preces.
2. darbība: pārbaudiet izvadi
Lai nodrošinātu, ka pārtraukuma punkti un multivides vaicājumi ir lietoti rindu režģī, skatiet HTML tīmekļa lapu, mainot ekrāna izmēru:
Iepriekš redzamajā izvadē var redzēt, ka rindu skaits mainās atkarībā no ekrāna izmēra. Tas norāda, ka pārtraukuma punkti un multivides vaicājumi ir veiksmīgi lietoti rindu režģī.
Secinājums
Lai lietotu pārtraukuma punktus un multivides vaicājumus rindu režģī programmā Tailwind, definējiet rindu skaitu dažādiem ekrāna izmēriem, izmantojot “ sm ”, “ md ” vai “ lg ' pārtraukuma punkti ar ' grid-rows-
” komunālie pakalpojumi. Pēc tam nodrošiniet izmaiņas tīmekļa lapā, mainot ekrāna izmēru. Šajā rakstā ir parādīta metode, kā lietot pārtraukumpunktus un multivides vaicājumus rindu režģī programmā Tailwind CSS.