פוסט זה מרחיב את ההליך המלא להוספת הפער בין העמודות ב-Tailwind.
כיצד להוסיף פער בין עמודים ברוח הגבית?
כדי להוסיף את הפער בין העמודות ב-Tailwind, השתמש ב-' המובנה פער-{גודל} 'תועלת. הוא מציין ערך של מספר שלם המייצג את הפער בין העמודות בצורה אופקית ואנכית. הבה נעשה משימה זו באופן מעשי בעזרת הדוגמאות המוצהרות.
מבנה קובץ הפרויקט
ה ' פער-{גודל} ניתן ליישם את כלי השירות בכל אחד מפרויקטי Tailwind העוקבים אחר מבנה הקובץ הנתון:
נתחיל בדוגמה הראשונה.
דוגמה 1: השתמש בכלי השירות 'gap-{size}' כדי להוסיף את אותו הפער בין שורות ועמודות
דוגמה זו מיישמת את כלי השירות 'gap-{size}' כדי להוסיף את אותו פער אופקית ואנכית בין העמודות הנתונות.
קוד HTML
סקירה כללית של הקוד הבא:
< רֹאשׁ >
< קישור href = '/dist/output.css' rel = 'גיליון סגנונות' >
< / רֹאשׁ >
< גוּף >
< h1 מעמד = 'טקסט-3xl font-bold text-center line underline text-orange-600' > ברוכים הבאים ל- Linuxhint! < / h1 >< br >
< div מעמד = 'mx-2 grid-cols-3 gap-4' >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה ראשונה < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה שנייה < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה שלישית < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה רביעית < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה חמישית < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה שישית < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה שביעית < / div >
< div מעמד = 'גבול-2 גבול-כתום-600' > הדרכה שמינית < / div >
< / div >
<גוף<
בשורות הקוד לעיל:
- ראשית, קשר את קובץ ה-CSS הראשי ' /dist/output.css ' עם קובץ HTML הקיים ' index.html ' משתמש ב ' <קישור> ' תג בקטע 'ראש'.
- לאחר מכן, הקטע 'גוף' יוצר רכיב '
' המשתמש ב-' גודל גופן ', ' משקל גופן ', ' יישור טקסט ', ' קישוט טקסט ', וה ' צבע טקסט שיעורי רוח גב, בהתאמה.
- לאחר מכן, נוסף רכיב '' המחיל את ה-' רֶשֶׁת כלי ' כדי להגדיר את התוכן שלו במספר הנקוב של פריסות רשת, ה' שולים ' מחלקה כדי להגדיר את השוליים האופקיים, ואת ' פער ' להוספת הפער שצוין בין העמודות.
- בקטע גוף הרכיב '
', כלולים שמונה רכיבי '' נוספים המשתמשים ב-' רוחב גבול ' וה ' צבע גבול 'שיעורים, בהתאמה.תְפוּקָה
הפעל את קוד ה-HTML לעיל בשרת החי ונתח את הפלט:
כפי שניתן לראות, הפלט מוסיף את הפער שצוין בין העמודות בשני הממדים כראוי.
דוגמה 2: השתמש בכלי השירות 'gap-{size}' כדי להוסיף פער בין שורות ועמודות באופן עצמאי
ה ' פער-{גודל} ניתן ליישם את כלי השירות עם הממדים 'x(אופקי)' ו-'y(אנכי)' כ-'gap-x-{size}' עבור שורות, וה-'gap-y-{size}' עבור עמודות כדי להוסיף את פער ביניהם בנפרד.בואו נראה את היישום המעשי שלו.
קוד HTML
< רֹאשׁ >
תסתכל על הקוד הנתון:
< קישור href = '/dist/output.css' rel = 'גיליון סגנונות' >
< / רֹאשׁ >
< גוּף >
< div מעמד = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה ראשונה< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה שנייה< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה שלישית< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה רביעית< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה חמישית< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה שישית< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה שביעית< / div >
< div מעמד = 'גבול-2 גבול-כתום-600' >הדרכה שמינית< / div >
< / div >
< גוּף >הנה ה ' gap-x-{גודל} כלי השירות מוסיף את הפער בין השורות ל- gap-y-{size} ' מוסיף את הפער שצוין בין העמודות באופן עצמאי.
תְפוּקָה
התוצאה שלמעלה מאמתת שהפער בין שורות ועמודות מיושם בהתאם.
סיכום
'Tailwind CSS' מספק מובנה ' פער-{גודל} ' כלי להוספת הפער בין העמודות. זה יכול לשמש גם כדי להוסיף את הפער בין שורות ועמודות בנפרד באמצעות ' gap-x-{גודל} ' וה ' gap-y-{size} ' כלי עזר. פוסט זה סיפק את ההליך המלא להוספת הפער בין העמודות ב-Tailwind.
- בקטע גוף הרכיב '