Ovaj će članak pokazati metodu primjene efekta lebdenja na rešetku redaka u Tailwind CSS-u.
Kako primijeniti lebdenje na mreži redaka u Tailwindu?
Da biste primijenili efekt lebdenja na rešetku retka u Tailwindu, napravite HTML datoteku i upotrijebite ' lebdjeti ' klasa s ' grid-rows-
Pogledajte navedene korake za praktičnu primjenu:
Korak 1: Koristite svojstvo lebdenja s mrežom redaka u HTML programu
Napravite HTML program i koristite ' lebdjeti ' svojstvo s ' grid-rows-
< tijelo >
< div razreda = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div razreda = 'bg-teal-500 p-5' > 1 < / div >
< div razreda = 'bg-teal-500 p-5' > 2 < / div >
< div razreda = 'bg-teal-500 p-5' > 3 < / div >
< div razreda = 'bg-teal-500 p-5' > 4 < / div >
< div razreda = 'bg-teal-500 p-5' > 5 < / div >
< div razreda = 'bg-teal-500 p-5' > 6 < / div >
< div razreda = 'bg-teal-500 p-5' > 7 < / div >
< div razreda = 'bg-teal-500 p-5' > 8 < / div >
< div razreda = 'bg-teal-500 p-5' > 9 < / div >
< div razreda = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / tijelo >
Ovdje, u nadređenom
- “ rešetka ” klasa se koristi za stvaranje rasporeda mreže.
- “ rešetka-redovi-3 ” klasa navodi da rešetka treba imati 3 retka jednake veličine.
- “ lebdi:grid-rows-5 ” klasa mijenja rešetku u 5 redova jednake veličine kada mišem prijeđete iznad nje.
- “ grid-flow-col ” klasa postavlja rešetkaste stavke vodoravno u stupce.
- “ praznina-3 ” klasa postavlja razmak od 3 jedinice između svake stavke mreže.
- “ m-3 ” primjenjuje marginu od 3 jedinice oko spremnika mreže.
- “ tekst-centar ” klasa postavlja tekst svake stavke mreže u središte.
U podređenim
- “ ” predstavlja broj stavki mreže.
- “ bg-teal-500 ” klasa postavlja plavozelenu boju na pozadinu mrežnih stavki.
- “ p-5 ” klasa dodaje ispunu od 5 jedinica sadržaju unutar podređenih
stavki.Korak 2: Provjerite izlaz
Kako biste provjerili je li efekt lebdenja primijenjen na rešetku retka, pogledajte web stranicu i pomaknite miš preko stavki rešetke:
Može se uočiti da u početku postoje 3 retka, a kada mišem prijeđete iznad njih, broj redaka se promijenio na 5. To znači da je učinak lebdenja uspješno primijenjen na mrežu redaka.
Zaključak
Za primjenu efekta lebdenja na rešetku redaka u Tailwindu, upotrijebite ' lebdjeti ' klasa s ' grid-rows-
” uslužni program u HTML programu. Mijenja broj redaka dok lebdite. Kako biste osigurali promjene, pogledajte web HTML stranicu i zadržite pokazivač miša na stavkama mreže. Ovaj je članak ilustrirao metodu primjene efekta lebdenja na rešetku redaka u Tailwind CSS-u.