Bootstrap Grid

תמלול ההרצאה: Bootstrap Grid

הטקסט המלא של הדקות הראשונות בהרצאה «Bootstrap Grid» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   טוב חברים, הגיע הזמן שנטפל בגרפיקה באתר שלנו ונעשה אותו כמו שצריך בסגנון כזה. אז בואו נתחיל מהפאנלים האלו, אתם רואים מהריבועים האלו?

2. 00:12

   לכל רכיב נעשה ריבוע ונמקם אותם במסך במקום הנכון. זאת התוצאה הרצויה מבחינתי וכרגע אנחנו נמצאים במקום אחר לגמרי שהאתר נראה זוועה.

3. 00:24

   הנה ככה הוא נראה עכשיו וככה אני רוצה שהוא ייראה אחרי שנסיים את ההרצאה הזאת לפחות. משהו דומה לזה אולי לא בדיוק אבל לפחות נתקרב למשהו נורמלי אז אנחנו הולכים לאתר של בוטסטראפ ומתחילים לשים פאנלים זה הדבר הראשון קומפוננטס ויש פה פאנלס הפאנלים האלו זה זה ככה הם נראים

4. 00:45

   שיש לך הדר ויש לך איזשהו קונטנט בפנים וניקח את ה html שלו ונשים בקומפוננטות נתחיל בקומפוננטה של פרודקט ליסט אז הכותרת שלנו זה זה זאת הכותרת וזה הגוף, יפה מאוד.

5. 01:02

   עכשיו, תראו איך זה נראה עכשיו. אתם רואים, נהיה פה פאנל, אבל הפאנל הזה נהיה בלי שוליים ועד הסוף. למה? כי עברנו על חוק חשוב שלא שמנו אותו בקונטיינר. עוד מעט נשים אותו בקונטיינר, אבל לפני שנשים בקונטיינר, אני רוצה גם את ה-Cart וגם את ה-Personal Details, גם לשים להם פאנלים.

6. 01:23

   אז אנחנו הולכים גם ל-Cart, וגם את ה-Body נשים, ואת ה-NGif הזה. תראו את ה-NGif הזה, אני רוצה לשים אותו לא כאן, אלא בפרודקט ליסט מעל שני החלקים ביחד.

7. 01:40

   זאת אומרת, אני רוצה פה לעטוף את שני החלקים ביחד באיזשהו דיב, שיופיע רק אם יש רשימת מוצרים בסל. מה עוד חשוב להדגיש? שעכשיו זה נראה בצורה כזאת, שאם אני עושה ביי, זה באמת ככה, ואני רוצה אותם אחד ליד השני.

8. 01:54

   אני רוצה אותם אחד ליד השני, כאשר הראשון זה רשימת מוצרים ואחרי זה סל הקניות. אנחנו מתחילים לשים את כל הדברים מצד שמאל למעלה וממשיכים ימינה. בגלל זה אנחנו צריכים שקודם כל יהיה רשימת המוצרים, הדיו הזה, ואחריו הדיו הזה.

9. 02:12

   כי זה יהיה הראשון וזה יהיה השני. תמיד מתחילים מפינה שמאלית עליונה. ולפי העיצוב שלי בפינה שמאלית עליונה, קודם כל הרכיב הזה ואחרי זה הרכיב הזה. יופי.

10. 02:22

    ככה הגרפיקאים ביקשו, ככה מנהל הביקש. עכשיו, מה עוד אני רואה שיש לי בעיה שאני באמת עשיתי אותם כמו שצריך, הם תופסים לי את כל הרוחב. אתם רואים? הוא ירד למטה, אבל הוא תופס לי את כל הרוחב.

11. 02:34

    אני לא צריך שהוא יתפוס לי את כל הרוחב, אני צריך שיתפוס לי שתי שליש ושליש. כדי לעשות רוחב, יש מנגנון מיוחד. אה, רגע, שנייה, שכחתי. משהו אחרון בפאנלים, שכחתי לשים אותו ב-checkout.

12. 02:47

    כרגע ב-checkout אין שם כלום, אבל אני עדיין רוצה לשים בו את הפאנל כהכנה למה שהולך להיות, פה לרשום פרסונל דיטלס אוקיי אז שמתי את שלושת הפאנלים שלי אחד שתיים שלוש עכשיו אני רוצה את המיקומים שתי שליש ושליש אז אנחנו הולכים לאתר של אנגולר למעלה יש css ובcss כל הנושא של מיקומים נמצא אני אחסוך לכם את הקריאה ואני

13. 03:13

    אראה לכם קודם כל bootstrap requires container element שהרכיב של element הוא wrap the site content זה אומר שמחייבים לעשות אותנו קונטיינר מסביב לכל החלקים ויש שתי סוגי קונטיינר, קונטיינר רגיל ופלוד, הפלוד הזה הוא בלי שוליים והקונטיינר הרגיל עם שוליים, בואו נראה איפה אני שם את הקונטיינר הזה, בגלל שאני רוצה אותו מסביב לכל החלקים,

14. 03:34

    אני אשים אותו בקומפוננטה הראשית סביב כל הרכיב של ראוטינג, לא משנה מה יטען בראוטינג, אני צריך שיהיה לו קונטיינר ואנחנו יכולים לראות שזה עושה לי את השוליים האלו, אם אני אחליף אותו לקונטיינר פלוד אתם תראו שהשוליים פה הצטמצמו אתם רואים השוליים נהיו כמעט אפסיים אני רוצה שהשוליים יהיו רחבים אז אני מחזיר חזרה קונטיינר והשוליים נהיים רחבים יותר עכשיו אני צריך שהרוחב לא יהיה

15. 04:00

    כל המסך כי ברירת מחדל של דיו זה לתפוס את כל הרוחב שיש לו אתם זוכרים כן דיו שני דברים תמיד מתחיל משורה חדשה כברירת מחדל וגם תופס את כל הרוחב של שורה שבה הוא נמצא אז יש פה גריד סיסטם מערכת של מיקומים של טבלת מיקומים שהיא עובדת ככה בוטסטראפ חילקו הכל ל-12 עמודות וירטואליות כאשר גודל של כל עמודה תלוי בגודל מסך לוקחים את גודל

16. 04:25

    המסך ומחלקים אותו ל-12 חלקים ולדוגמה פה אנחנו רואים שאפשר לחלק אותו לכל רכיב לתת עמודה אחת אפשר לתת לרכיב אחד 8 עמודות ולשני 4 העיקר שבסופו של דבר יהיה 12 לדוגמה לרכיב אחד לתת 4 עמודות עוד 4 ועוד 4 או חצי חצי איך אני רוצה כל רכיב כמה מקום הוא יתפוס ואני מתאים לי ה-8 וה-4 הזה שזה סך הכל יחסי לגודל המסך שתי שליש ושליש

17. 04:52

    והנה הדוגמא איך עושים את זה חייבים לעטוף את הכל ב-row שזה אומר שורה חדשה ולחלק את השורה ל-12 אם אני עושה פחות מ-12 יישאר מקום ריק בצד ימין בואו נעשה את זה ככה נלך לרכיב של product list נעטוף את הכל ב-row יופי אז יש לי פה row אחד ועכשיו נגיד שעמודה אחת 8 שזה רשימת המוצרים זאת 8 והעמודה השנייה של סל הקניות היא 4 אז יש לנו 8 ו-4 סך הכל

18. 05:23

    12 ואני יכול אפילו את ה-NGif הזה לשים אותו כאן יופי אז יש לי חלוקה ל-8 ו-4 והכל עטוב ב-row1 וזה יפה מאוד בואו נראה שימו לב אפשר לעשות row בתוך row כאשר ה-row הפנימי הוא נניח את ה-8 הזה לחלק ל-12 תתי חלקים וירטואליים בואו נראה שמתם לב שהרכיב כבר נהיה שמונה והנה זה לידו נהיה ארבע יפה מאוד הוא הופיע כשלחצתי על משהו יפה

19. 05:52

    מאוד עכשיו לגבי המיקומים האלו יש קצת פה משחק שימו לב מה קורה כשאני בא לצמצם את המסך אני לוחץ F12 עובר למסף של פלאפון ואז תראו מה קורה כשהפלאפון מתחיל להצמצם שימו לב כרגע הגודל הוא 1200 ואיך שאני מתחיל להצמצם פתאום הופ ב-948 כבר נעלם החוק הזה ונהיה כל הרוחב שמתם לב? ב-948 הוא נעלם, אבל ב-1078 הוא חוזר.

20. 06:20

    למה זה? בגלל שהחוק שהפעלתי הוא על עמודה מסוג MD. מה זה MD? זה אומר שהוא עובד רק על מסכים בגודל 992 פיקסלים ומעלה.

21. 06:32

    אם אני יורד מתחת ל-992, החוק הזה מתבטל, ואז מה הדיפולט? הדיפולט זה כל הרוחב. אז מה אני רוצה? אני רוצה שיהיה כל הרוחב רק במכשירים ממש קטנים, במכשירים ממש קטנים אני רוצה את כל הרוחב אבל במכשירים היותר גדולים שיהיו שתי עמודות מה יקרה כשיהיה מכשיר קטן אין לנו מקום להראות

22. 06:51

    שתי עמודות ביחד בואו אני אראה לכם מה יקרה אם אני אפעיל את החוק הזה על אקסטרה שמאל בואו נעשה את זה את החוק הזה על אקסטרה שמאל לדוגמה זה אומר מאקסטרה שמאל ומעלה החוק הזה פועל תמיד ממקום ומעלה מקטן אל הגדול אז תראו מה קרה קודם כל ישר יש לי שתי עמודות גם ב-1000 וגם ב-700 וגם ב-600 הכל שתי עמודות וזה כבר נהיה ממש על הפנים

23. 07:16

    כי זה כבר לא קריא במיוחד שאני אכניס פה תמונה גדולה אז אני רוצה במסכים שהם ממש קטנים שרשימת המוצרים תתפוס את כל המסך ואני אשים פה כפתור שאומר להראות את ה-Cart כאילו תוכל לעבור בין זה לזה אז במסכים הקטנים אני רוצה רק דבר אחד אבל במסכים לא הכי קטנים אני כבר רוצה

24. 07:35

    שתי עמודות אז את החוק אני מפעיל מ-768 פיקסלים ומעלה עכשיו מה שיקרה שכל מה שיהיה מתחת ל-768 פיקסלים, אתם רואים אני עכשיו נמצא ב-790 פיקסלים הכל בסדר אם אני יורד נניח ל-700 פיקסלים הוא נהיה עמודה אחת כי תהיה פה תמונה גדולה ויהיה פה כפתור של ביי ועדיף ככה בפלאפונים שיהיה ואם מישהו קונה משהו והוא רוצה לראות לו

25. 07:59

    הוא לוחץ פה מייקארט ורועץ על הקניות שלו בסדר ואם הוא רוצה מוצרים מוצרים אבל כשמגיעים חזרה למשהו רחב אז כבר שתי עמודות ובמשהו צר עמודה אחת מצוין, עכשיו עוד משהו חשוב שאני רוצה להדגיש לכם שאני יכול לכתוב בצורה מפורשת כמה קלאסים ולהגיד לו במפורש מה אני רוצה לדוגמה אני

26. 08:19

    יכול להגיד לו שבאקסטרה שמאל תהיה ככה במדיום ככה ובלארג' ככה כאילו אני יכול ממש לקבוע לו חוקים בוא נעשה דוגמה נעשה דוגמה ונגיד לו תקשיב באקסטרה שמאל תתפוס לי את כל 12 עמודות אוקיי אני יכול גם להגיד לו שגם אתה תופס את כל ה12 עמודות אז ברגע שנגמר לו 12 עמודות הוא יורד למטה

27. 08:41

    הרואו הזה פותח שורה חדשה ובתוך שורה חדשה כאשר נגמרים 12 עמודות אז הוא אוטומט פותח עוד שורה. עכשיו אני יכול להגיד לו תקשיב תהיה רק 10 עם מרווח של עמודה אחת בצד תשאיר עמודה אחת בצד במרווח בוא אני אראה לכם איך עושים מרווחים לדוגמה אני אומר לו כזה דבר שבמסך סופר גדול במסך לארג' במסך של לארג' תתפוס רק 6 רק חצי כי זה מסך

28. 09:05

    ענק ופה במסך ענק תתפוס רק נניח 4 ואני רוצה מרווח. אני רוצה במסך ענק שיהיה לי 6, מרווח של 1, ואחרי זה 4, ועוד מרווח בצד ימין.

29. 09:18

    איך אני עושה מרווח? זה נקרא אופסט. אני יכול להגיד לו כזה דבר, לעשות אופסט נניח של 3 עמודות.