מאמר זה ידגים את השיטה להחלת אפקט הריחוף על רשת העמודות ב-Tailwind CSS.
כיצד להחיל רחף על רשת עמודות ברוח גב?
כדי להחיל את אפקט הריחוף על רשת העמודות ב-Tailwind, צור קובץ HTML והשתמש ב-' לְרַחֵף 'כיתה עם ' grid-cols-
בצע את השלבים שסופקו ליישום מעשי:
שלב 1: השתמש במאפיין הרחף עם רשת העמודות בתוכנית HTML
צור תוכנית HTML והשתמש ב-' לְרַחֵף ' נכס עם ' grid-cols-
< גוּף >
< div מעמד = 'grid grid-cols-3 hover:grid-cols-5 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 >
< / גוּף >
כאן, באלמנט האב
- ' רֶשֶׁת 'מחלקה משמשת ליצירת פריסת רשת.
- ' grid-cols-3 מחלקה מציינת שהרשת צריכה לכלול 3 עמודות בגודל שווה.
- ' רחף:grid-cols-5 ” class מציינת שיש לשנות את הרשת ל-5 עמודות שוות בגודלן כאשר עכבר מרחף מעליה.
- ' פער-3 מחלקה קובעת מרווח של 3 יחידות בין כל פריט רשת.
- ' m-3 ” מחלקה מחילה שוליים של 3 יחידות סביב מיכל הרשת.
- ' מרכז טקסט מחלקה מגדירה את הטקסט של כל פריט רשת למרכז.
ברכיבי
- ' ' מייצג את מספר פריטי הרשת.
- ' bg-teal-500 הכיתה מגדירה את צבע הצהבהב לרקע של פריטי רשת.
- ' p-5 ” הכיתה מוסיפה ריפוד של 5 יחידות לתוכן בתוך פריטי
הילד.שלב 2: אימות פלט
כדי להבטיח שאפקט הריחוף הוחל על רשת העמודות, הצג את דף האינטרנט והזז את העכבר מעל פריטי הרשת:
ניתן לראות שכאשר העכבר מרחף מעל פריט הרשת, מספר העמודות משתנה. זה מציין שאפקט הריחוף הוחל בהצלחה על רשת העמודה.
סיכום
כדי להחיל את אפקט הריחוף על רשת העמודה ב-Tailwind, השתמש ב-' לְרַחֵף 'כיתה עם ' grid-cols-
כלי השירות בתוכנת HTML. זה משנה את מספר העמודות בעת ריחוף. כדי להבטיח שינויים, הצג את דף ה-HTML של האינטרנט ורחף עם העכבר על פריטי רשת. מאמר זה הדגים את השיטה להחלת אפקט הריחוף על רשת העמודות ב-Tailwind CSS.