Ovaj će članak pokazati metodu primjene efekta lebdenja na rešetku stupaca u Tailwind CSS-u.
Kako primijeniti lebdenje na mreži stupaca u Tailwindu?
Da biste primijenili efekt lebdenja na rešetku stupaca u Tailwindu, napravite HTML datoteku i upotrijebite ' lebdjeti ' klasa s ' grid-cols-
Slijedite navedene korake za praktičnu primjenu:
Korak 1: Koristite svojstvo lebdenja s mrežom stupaca u HTML programu
Napravite HTML program i koristite ' lebdjeti ' svojstvo s ' grid-cols-
< tijelo >
< div razreda = 'grid grid-cols-3 hover:grid-cols-5 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 kreiranje rasporeda mreže.
- “ grid-cols-3 ” klasa navodi da rešetka treba imati 3 stupca jednake veličine.
- “ lebdi:grid-cols-5 ” klasa specificira da se mreža treba promijeniti u 5 stupaca jednake veličine kada mišem prijeđete iznad nje.
- “ 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 bili sigurni da je efekt lebdenja primijenjen na rešetku stupaca, pogledajte web stranicu i pomaknite miš preko stavki rešetke:
Može se vidjeti da kada mišem prijeđete iznad stavke rešetke, broj stupaca se mijenja. Označava da je efekt lebdenja uspješno primijenjen na rešetku stupaca.
Zaključak
Za primjenu efekta lebdenja na rešetku stupaca u Tailwindu, upotrijebite ' lebdjeti ' klasa s ' grid-cols-
” uslužni program u HTML programu. Mijenja broj stupaca dok lebdite. Kako biste osigurali promjene, pogledajte web HTML stranicu i zadržite pokazivač miša na stavkama mreže. Ovaj je članak pokazao metodu primjene efekta lebdenja na rešetku stupaca u Tailwind CSS-u.