bootstrap זו לא מילת קסם.... זה אוסף (מכובד מאוד, יש לציין) של הגדרות מוכנות מראש של css (יש גם js, נכון... אבל זה לא רלוונטי אלינו) שעוזרות לבנות ממשק מהיר גם למובייל.
אף אחד לא עובד עם טבלה יותר כבסיס ל layout לעמוד, שכחו מזה.
יש שני דברים חדשים (יחסית...
) שכדאי לכם ללמוד:
א. Flexbox (מה ש@עילום אמר באריכות), הרעיון ב flexbox במשפט היא סידור של אלמנטים שמוכלים בתוך אלמנט אב (פעםםםםםם היו עושים את זה עם טבלה, אח"כ היו עושים את זה עם float ושאר הגדרות, היום עושים flex, פשוט ונח). לינק חובה (אל תקראו את כל העמוד בפעם אחת, כדאי ללמוד תוך כדיי מעשה):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
ב. media queries, הרעיון בזה שהרבה פעמים ה layout משתנה ביחס לגודל המסך (בעיקר, אמנם יש אפשרות גם לשנות את ה layout בהתאם לסוג התצוגה: מסך או הדפסה לדוגמה, אבל, זה לא לרגע זה), לדוגמה: יש צורך להציג את הלוגו של האתר בגרסה של המובייל לכל רוחב העמוד אבל בעמוד למחשב, להציג אותו רק בתחילת העמוד.
אז למעשה מגדירים ב css את ההגדרה של המובייל (כלומר, שלתמונה יהיה width: 100%) קודם לכן (זה בגלל גוגל, שמקדמים אתרים עם עדיפות למובייל - מה שנקרא mobile first) ואם\כאשר יהיה רוחב העמוד לדוגמה 1024 (כלומר, גודל מסך של מחשב) אז תוצג התמונה בתחילת העמוד (נניח, float: right ו width: 200px), אז ה css ייראה כך:
This user does not have permission to use the HTML BB code.
יוצאים שני כללים מכל הבלאגן:
א. קובעים את הlayout קודם כל למובייל
ב. מוסיפים שאילתא (זו מילה שלא השתמשתי בה ב15 שנים האחרונות, לכל הפחות) להתאים את ה layout לשינויים של ה desktop.
* הערה אחרונה: אחרי שסיימתם לריב עם ה css ואתם מרגישים בנח, תסתכלו על sass, ממליץ בחום (יש לי פה איפשהו הודעה על זה, צריך לחפש בהזדמנות), מאוד נח
הנושאים החמים
הנושאים החמים
