See artikkel tutvustab meetodit hõljutusefekti rakendamiseks Tailwind CSS-i veeruruudustikus.
Kuidas rakendada hõljukit veeruruudustikul Tailwindis?
Hõljutusefekti rakendamiseks Tailwindis veeruruudustikus looge HTML-fail ja kasutage hõljuma ' klass koos ' grid-cols-
Praktiliseks rakendamiseks järgige esitatud samme:
1. samm: kasutage hõljukatribuuti HTML-programmi veeruruudustikuga
Looge HTML-programm ja kasutage ' hõljuma ' kinnisvara koos ' grid-cols-
< keha >
< div klass = 'grid grid-cols-3 hover: grid-cols-5 gap-3 m-3 text-center' >
< div klass = 'bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'bg-teal-500 p-5' > 6 < / div >
< div klass = 'bg-teal-500 p-5' > 7 < / div >
< div klass = 'bg-teal-500 p-5' > 8 < / div >
< div klass = 'bg-teal-500 p-5' > 9 < / div >
< div klass = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / keha >
Siin, emaelemendis
- “ võre ” klassi kasutatakse ruudustiku paigutuse loomiseks.
- “ grid-cols-3 ” klass määrab, et ruudustikus peaks olema 3 võrdse suurusega veergu.
- “ hover:grid-cols-5 ” klass määrab, et ruudustik tuleks muuta 5 võrdse suurusega veeruks, kui hiir selle kohal hõljub.
- “ vahe-3 ” klass määrab iga ruudustiku elemendi vahele 3 ühikut.
- “ m-3 ” klass rakendab võrgukonteineri ümber 3 ühiku suurust varu.
- “ tekstikeskus ” klass seab iga ruudustiku elemendi teksti keskele.
Alamelementides
- “ ” tähistab ruudustiku üksuste arvu.
- “ bg-teal-500 ” klass määrab sinakaspruuni värvi ruudustikuelementide taustale.
- “ p-5 ” klass lisab alamüksuste
sisule 5-ühikulise täidise.2. samm: kontrollige väljundit
Veerude ruudustikule hõljutusefekti rakendamise tagamiseks vaadake veebilehte ja liigutage kursorit ruudustiku üksuste kohal.
On näha, et kui hiir liigub ruudustiku elemendi kohal, muutub veergude arv. See näitab, et hõljutusefekt on veeruruudustikus edukalt rakendatud.
Järeldus
Hõljutusefekti rakendamiseks Tailwindis veeruruudustikule kasutage hõljuma ' klass koos ' grid-cols-
” utiliit HTML-programmis. See muudab kursorit veergude arvu. Muudatuste tagamiseks vaadake veebi HTML-lehte ja hõljutage kursorit ruudustiku üksustel. See artikkel on näidanud meetodit hõljutusefekti rakendamiseks Tailwind CSS-i veeruruudustikus.