מאמר זה ידגים את השיטה להחלת אפקט הריחוף על רשת השורות ב-Tailwind CSS.
כיצד להחיל רחף על רשת שורה ברוח גב?
כדי להחיל את אפקט הריחוף על רשת השורות ב-Tailwind, צור קובץ HTML והשתמש ב-' לְרַחֵף 'כיתה עם ' grid-rows-
בדוק את השלבים הניתנים ליישום מעשי:
שלב 1: השתמש במאפיין הרחף עם רשת השורות בתוכנית HTML
צור תוכנית HTML והשתמש ב-' לְרַחֵף ' נכס עם ' grid-rows-
< גוּף >
< div מעמד = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div מעמד = 'bg-teal-500 p-5' > 1 < / div >
< div מעמד = 'bg-teal-500 p-5' > 2 < / div >
< div מעמד = 'bg-teal-500 p-5' > 3 < / div >
< div מעמד = 'bg-teal-500 p-5' > 4 < / div >
< div מעמד = 'bg-teal-500 p-5' > 5 < / div >
< div מעמד = 'bg-teal-500 p-5' > 6 < / div >
< div מעמד = 'bg-teal-500 p-5' > 7 < / div >
< div מעמד = 'bg-teal-500 p-5' > 8 < / div >
< div מעמד = 'bg-teal-500 p-5' > 9 < / div >
< div מעמד = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / גוּף >
כאן, באלמנט האב
- ' רֶשֶׁת 'מחלקה משמשת ליצירת פריסת רשת.
- ' רשת-שורות-3 ” class מציינת שהרשת צריכה לכלול 3 שורות בגודל שווה.
- ' hover:grid-rows-5 מחלקה משנה את הרשת ל-5 שורות שוות בגודלן כאשר עכבר מרחף מעליה.
- ' grid-flow-col מחלקה ממקמת את פריטי הרשת בצורה אופקית בעמודות.
- ' פער-3 מחלקה קובעת מרווח של 3 יחידות בין כל פריט רשת.
- ' m-3 ” מחלקה מחילה שוליים של 3 יחידות סביב מיכל הרשת.
- ' מרכז טקסט מחלקה מגדירה את הטקסט של כל פריט רשת למרכז.
ברכיבי
- ' ' מייצג את מספר פריטי הרשת.
- ' bg-teal-500 הכיתה מגדירה את צבע הצהבהב לרקע של פריטי רשת.
- ' p-5 ” הכיתה מוסיפה ריפוד של 5 יחידות לתוכן בתוך פריטי
הילד.שלב 2: אימות פלט
כדי לוודא שאפקט הריחוף הוחל על רשת השורות, הצג את דף האינטרנט והזז את העכבר מעל פריטי הרשת:
ניתן לראות שבתחילה יש 3 שורות וכאשר העכבר מרחף מעליהן, מספר השורות השתנה ל-5. זה מצביע על כך שאפקט הריחוף הוחל בהצלחה על רשת השורות.
סיכום
כדי להחיל את אפקט הריחוף על רשת השורות ב-Tailwind, השתמש ב-' לְרַחֵף 'כיתה עם ' grid-rows-
כלי השירות בתוכנת HTML. זה משנה את מספר השורות על ריחוף. כדי להבטיח שינויים, הצג את דף ה-HTML של האינטרנט ורחף עם העכבר על פריטי רשת. מאמר זה הדגים את השיטה להחלת אפקט הריחוף על רשת השורות ב-Tailwind CSS.