בפוסט זה נראה את הפריסה של אתר Bootstrap כדי להציג את היכולות המדהימות של מסגרת קוד פתוח זו. ב מאמרים קודמים התקנו סביבת פיתוח ואת התוספים הדרושים כדי להקל על העבודה שלנו.
זכור זאת כמנהל התוכן של Linux Adictos זה לא מאפשר לי להכניס את הקוד של הדוגמאות שהעליתי ל-GitHub. כדי להוריד אותם עליך להתקין את חבילת Git בהפצה שלך ולאחר מכן לכתוב את הפקודות הבאות:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
תצטרך להפעיל את שתי הפקודות הללו מעת לעת כדי להוריד את הקבצים החדשים.
ניתוח הקוד
עכשיו בסייר הקבצים פתח את example2.html עם VSCodium. (פתח עם כפתור ימני) אנו רואים את הדברים הבאים:
- בשורה 1 אנחנו אומרים לדפדפן את סוג המסמך כדי שהוא ידע איך לעבד אותו.
- שורה 2 מציינת את שפת האתר, האומרת לדפדפן כיצד לייצג תווים מסוימים ואת שפת התוכן בפני מנועי החיפוש, מה שמקל על המיקום. בקוד שלנו הוא מוגדר כ-es אבל יש גרסאות אזוריות כמו es_ES לספרדית מספרד או es_AR לספרדית מארגנטינה.
- משורה 3 יש לנו מיכל מטא נתונים שנמצא בין התגים י . מטא נתונים מספקים מידע על המסמך. בדוגמה שלנו:
- שורה 4 מציינת את התקן המשמש לקידוד תווים. אולי ראית מדי פעם שבמקום תווים מוטעמים או סמלים מיוחדים, מוצג סימן שאלה בתוך יהלום. הסיבה לכך היא שהדפדפן משתמש בקידוד לא תקין. ההצהרה בשורה 8 נמנעת מכך על ידי הצהרה על כך במפורש.
- בשורה 5 אנו אומרים לדפדפן כיצד עליו להתאים את עצמו לפורמטים שונים של מסך.
- הכותרת שקבענו בשורה 6 תוצג בסרגל העליון של הדפדפן ובמנועי החיפוש.
- בשורה 7 אנו אומרים לדפדפן היכן למצוא את רכיבי המסגרת של Bootstrap הקשורים לסטיילינג.
- מקו 10 מתחילה המכולה. הגוף כולל את התוכן של דף האינטרנט ואת הקישור לסקריפטים של Bootstrap שיתנו אינטראקטיביות לאתר שלנו.
- שורה 13 מציינת את סוף המסמך.
פריסה של אתר Bootstrap
מושגי מפתח לפריסה של אתר Bootstrap
כפי שאמרנו במאמרים קודמים, Bootstrap נוקט בגישה הראשונה לנייד. כאשר מיושמת גישה זו, העיצוב נעשה תוך מחשבה על גודל המסך הקטן ביותר, ולאחר מכן מתווספות שכבות כדי להתאים אותו לגדלים הבאים.
כאן עלינו לקחת בחשבון שני מושגי מפתח:
- נקודות שבירה.
- ייעוץ תקשורתי.
נקודות השבירה מציינות מאיזה רוחב מסך שונה הפריסה., שאילתות מדיה מיישמות פרמטרים של סגנון על סמך מאפייני דפדפן ומערכת הפעלה מסוימים. במילים אחרות, לכל נקודת שבירה תהיה סגנון מתאים.
Bootstrap מגיע עם שש נקודות שבירה מוגדרות מראש שניתן לשנות על ידי מתכנתים מתקדמים יותר. נקודות ברירת המחדל הן:
- קטן במיוחד: אין מזהה מוגדר מראש והוא חל על מסכים ברוחב של פחות מ-576 פיקסלים.
- קטן: הוא מזוהה עם sm ומשמש למסכים מ-576 פיקסלים.
- בינוני: הוא מזוהה עם md ומשמש למסכים מ-768 פיקסלים.
- אורך: מזוהה כ-lg משמש למסכים מ-992 פיקסלים.
- ארוך במיוחד: יש לו את המזהה lg ומחיל את הסגנונות על מסכים מ-1200 פיקסלים.
- ארוך במיוחד: מסומן במזהה xxl, הוא משמש להחלת העיצוב על מסכים מ-1400 פיקסלים.
גדלים אלה לא נבחרו כלאחר יד כל אחת מנקודות השבירה יכולה להכיל מיכלים שהרוחב שלהם הוא כפולות של 12. הם גם לא מכוונים למכשיר ספציפי, אלא מתאימות לקטגוריות שונות של מכשירים וגדלי מסך.
בתוך גדלי המסך השונים אנו מוצאים את המיכלים. אלו אחראים על אירוח, מילוי ויישור תוכן האתר במכשיר מסוים או בחלון גרפי.
;