עיצוב של תפריט עליון עם Bootstrap
navbar-inverse, שמציירת תפריט כהה.container, שקובע את הגבולות. container-fluid מגיע עד קצוות המסך, ו-container משאיר שוליים.data-target שמצביע על מזהה התפריט. הוא כולל גם טקסט שנקרא לנכים.navbar-fixed-top מצמיד את התפריט לחלק העליון של המסך.ng generate component about-us יוצרת תיקייה, קבצי HTML, TypeScript ו-CSS, ורושמת את הרכיב ב-app.module. נוצר גם רכיב news.פרקי ההרצאה: עיצוב של תפריט עליון עם Bootstrap
תמלול ההרצאה: עיצוב של תפריט עליון עם Bootstrap
הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב של תפריט עליון עם Bootstrap» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו רוצים לטפל בתפריט העליון אז בואו נתחיל לחקור איך עובד התפריט של בוטסטראפ ואנחנו הולכים לקומפוננטה שאחראית על התפריט הזה headerComponent ואני רוצה במקום default לשים פה inverse באתר של בוטסטראפ יש מחלקה מיוחדת שנקראת navbar inverse
מחלקה של עיצוב של css3 וזה עושה את התפריט כהה כמו שרציתי הדיב הבא זה בעצם קונטיינר. כמו שאתם יודעים, בבוטסטראפ כל החלקים של הבוטסטראפ, של העיצוב המוכן של בוטסטראפ, חייב לשבת בקונטיינר.
יש שני סוגי קונטיינר. יש קונטיינר רגיל וקונטיינר פלוד. קונטיינר פלוד מגיע עד הסוף ברוחב, וקונטיינר רגיל יש לו שוליים. לפעמים רואים אותם, לפעמים לא רואים אותם.
אולי בניוואר לא רואים את זה כל כך, אבל בדברים אחרים אנחנו נראה את זה. בגדול כל הרכיבי UI של ממשק הגרפי חייבים לשבת בתוך ה-container, בתוך קלאס שנקראת container והיא קובעת את הגבולות.
יש לנו פה נב בהדר שזה למעשה הברנד הזה, הנה אנחנו יכולים לראות אותו כאן ובמקום ברנד לרשום פרקטיקיו וזה גם לינק כמו שאתם יכולים לראות, בתוך הדיב הזאת יש את הברנד ויש את הבטן, יש כפתור.
מה זה הכפתור הזה? זה הכפתור שאתם כרגע לא רואים אותו על המסך, אבל כשאני מכווץ אותו, זה השלושה קווים, זה הכפתור הזה. ומה הוא עושה, הכפתור הזה?
הוא פותח לי את התפריט במצב של התאמה לפלאפון. הכפתור הזה, הוא לא, לא רואים אותו כשהמסך הוא רחב, וזה בעצם, השלושת קווים זה אייקון בר, זה השלושת הקווים שאתם רואים אותם.
הדבר הזה, בן אדם נכה שביקש להקריא לו מה המשמעות של הכפתור. זו התאמה לנכים. אם אני ארשום כאן AA, אתם תראו שזה מופיע פה בתוך הכפתור הזה.
אולי לא רואים אותו בגלל הצבע, אבל אם תסתכלו טוב טוב, יש פה AA. בואו נחזיר לכם את הצבע חזרה לדיפולט, ואתם רואים שיש פה את ה-AA. אז זה הכפתור שהוא מופיע ונעלם.
שימו לב, תמיד בעולם של עיצוב של בוטסטראפ, מתחילים לחשוב מהרכיב הקטן, מהפלאפון, ואז חושבים על הרכיב הגדול יותר. עוד משהו שאני רוצה לציין, איך הכפתור הזה יודע מה לפתוח?
שימו לב, בכפתור הזה, בבטן, יש פה דאטה טארגט עם איזשהו איי-די סולמית, זה איי-די. ואם אנחנו נסתכל בהמשך, התפריט כולו מופיע פה תחת האיי-די הזה.
וזה הקשר בין הכפתור ההוא לדיו הזאת, וככה הכפתור יודע בדיוק מה לפתוח. אז חקרנו את החלק הזה של נאווה הדר ועכשיו אנחנו מתחילים עם התפריט עצמו. בגדול שתדעו שכל התפריט העליון מורכב משני חלקים, הכפתור הזה והחלק השני זה התפריט עצמו.
בתפריט עצמו אנחנו רואים שיש לנו פה בעצם שלושה חלקים. יש לנו את הצד שמאל עם שני לינקים, יש לנו את טופס הזה שזה בעצם הפורום הזה ויש לנו את הצד ימין.
זה שלושה חלקים. בחלק השמאלי אני רואה שזה ליסט אייטם פשוט, שזה למעשה הלינקים הפשוטים. ויש גם את הדרופ דאון. אני לא צריך את כל הדרופ דאון, אז אני פשוט מוחק את הדרופ דאון הזה.
אני פשוט מוחק את האייטם הזה של דרופ דאון. ויש לי שני לינקים בלי דרופ דאון. ואני רוצה לינק שלישי, כי לפי התוכנית שלי יש לי שלושה לינקים. הלינק הראשון, אני רוצה שהוא יהיה ל-products.
הלינק השני, about us, עבודותינו והלינק השלישי זה news החדשות של האתר שלנו אז זה בעצם לינקים רגילים שעוד מעט אנחנו נטפל בדיוק בהם ונעשה אותם כך שיתינו באמת את הקומפוננטות שלנו החלק הזה של span sr זה לנכים ואני לא צריך את זה אני אעיף את זה אני אעשה את זה יותר פשוט יש לי פה לינק וקלאס אקטיב זה אומר שזה צבוע אם אני אקח
את הקלאס אקטיב ואני אעביר אותו נניח לפה דוגמא, אתם תראו שהשני צבוע. אתם רואים, about us נהיה צבוע. הלאה, הפורום הזה זה בעצם הטופס שיש בו את ה-search ואת הכפתור submit.
זה למעשה טופס רגיל, רק העיצוב שלו של navbar-form בצורה של תפריט עליון. זה למעשה טופס רגיל בעיצוב של תפריט עליון, אני מעיף אותו.
נשאר לי צד ימין, בצד ימין אם אנחנו נסתכל, יש לנו navbar-right, זה מה שלוקח אותם ימינה. אז יש לנו את הרשימה הזאת שעשינו לפני כן, שזה הנבבר הרגיל, וזה נבבר רייט, שזה הרשימה שיש בצד ימין.
שימו לב, הכל מתנהל על ידי מחלקות של עיצוב מוכנות מראש, שזה היתרון הגדול של בוטסטראפ. הוא נותן לי את המחלקות האלו המוכנות של העיצוב, ואני לא צריך להתעסק בזה.
הוא גם עושה לי מאחורי זה JavaScript, ואז הדרופ דאון עובד. אנחנו לוקחים את ה-UL הזאת של כל הצד ימין ופשוט מוחקים אותה. ומה שנשאר לי, בעצם נשארו לי שלושה לינקים.
אני רציתי פה לעשות את העיצוב השחור. בואו אני אראה לכם מאיפה הבאתי אותו, מאתר של בוטסטראפ. כאן אנחנו צריכים לעבור לגרסה 3.3. קומפוננטס, רכיבים, נאב בר.
אתם רואים, יש פה גם כל מיני פיקס טופ. לדוגמה, אם תעשו פיקס טופ זה יהיה תמיד למעלה, גם אם תגללו למטה זה יישאר תמיד, התפריט לא ייעלם, הוא תמיד יהיה דבוק לחלק העליון של המסך.
זה מה שמצאתי פה, את העיצוב הזה של inverse. אני לוקח את העיצוב הזה של inverse ושם אותו כאן. יופי, התפריט שלנו מוכן. עכשיו נעשה קומפוננטה חדשה about us ונהיה מוכנים לראוטינג.
עכשיו בואו ניצור קומפוננטה חדשה about us וקומפוננטה חדשה של news, כדי שנוכל להטעין אותם לפי הצורך. כדי ליצור קומפוננטה חדשה ולא לעשות את זה ידנית, אנחנו נשתמש באנגולר CLI שמאוד עוזר לי, ואני הולך לתיקייה אפ שבה נמצא אפ מודול, כי באפ מודול רשומים כל הרכיבים, אז אני צריך להיות בתיקייה שבה נמצא אפ מודול,
פותח את האקספלורר בתיקייה הזאת, שימו לב בתיקייה הזאת יש קובץ שנקרא אפ מודול, עושה שיפט רייט קליק במקום ריק, shift right click במקום ריק זה פותח ל-CMD אם יש לכם power shell ונפתח לכם מסך כחול של power shell תרשמו CMD ואתם תעברו לחלון של CMD עכשיו אני עושה פקודת דיר לראות את רשימת הקבצים שיש בתיקייה ואני מוודא שבתיקייה הזאת שבה אני נמצא אכן יש לי קובץ של מודול
ואנחנו יכולים להשתמש באנגולר CLI כדי ליצור קומפוננט החדשה בואו נראה איך אנחנו עושים את זה יש פה דוגמאות לאיך להשתמש בזה. לדוגמא, ככה עדכנו את האנגולר CLI.
ככה אפשר היה ליצור פרויקט חדש, אבל הטמפלייט עשה את זה עבורנו. והנה איך ליצור קומפוננטה. NG Generate קומפוננט בשם של הרכיב. בואו נעשה את זה.
עושים קרופי. NG Generate. NG זה בעצם קובץ ה-XC שהוא חלק מהאנגולר CLI. ואיפה אנחנו רוצים את הקומפוננטה הזאת?
אנחנו רוצים אותה בתוך תיקיית קומפוננטס. נקרא לקומפוננטה הזאת about מכף us. מקובל בעולם של אנגולר במקרה שיש שני חלקים לשם לעשות ביניהם מכף, מה שלא מקובל באף מקום אחר, ככה זה בעולם של אנגולר.
ואנחנו יוצרים קומפוננטה חדשה. שימו לב מה הוא עושה, הוא יוצר לי גם תיקייה נפרדת וגם רושם את זה באפ מודול, שזה מאוד יפה. והנה אני רואה שזה באמת הופיע לי באפ מודול, about us components,