עיצוב אתרים רספונסיביים באמצעות Bootstrap

מסגרת Bootstrap‏, שניתנת ללא תשלום, היא מסגרת פופולרית של Javascript‏, HTML ו-CSS המיועדת לפיתוח אתרים מהירי תגובה לנייד. המסגרת כוללת תבניות מהירות תגובה של CSS ו-HTML לטבלאות, לחצנים, ניווט, קרוסלות תמונות ורכיבים אחרים שבהם ניתן להשתמש בדפי אינטרנט. לצד Bootstrap זמינים תוספים אופציונליים של JavaScript, שמאפשרים למפתחים עם ידע בסיסי לפתח אתרים מעולים ומהירי תגובה.

Dreamweaver מאפשר לך ליצור מסמכי Bootstrap וכן לערוך דפי אינטרנט קיימים שנוצרו באמצעות Bootstrap. ניתן לערוך ב-Dreamweaver קובצי Bootstrap שעוצבו במלואם, או קבצים שעדיין לא הושלמו, לא רק לצורך עריכת הקוד אלא גם לצורך שינוי העיצוב, באמצעות תכונות עריכה חזותיות כמו עריכה ב-Live View‏, Visual CSS Designer‏, Visual Media Queries ו-Extract.

אני משתמש בפריסות Fluid Grid ב-Dreamweaver. מה עליי לעשות כדי להתחיל בעבודה עם Bootstrap?

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

באופן דומה, במסמכי Bootstrap, עליך להתמקד רק בתוכן ובעיצוב ו-Dreamweaver, המשולב היטב במסגרת Bootstrap, יטפל במהירות התגובה של הדפים.

נכון לעכשיו, Dreamweaver תומך בגרסאות 3.4.1 ו-4.4.1 של Bootstrap:

"3.4.1 Bootstrap כולל מערכת Fluid Grid מהירת תגובה המתחילה מהתאמת התוכן לניידים ומתרחבת לפי הצורך עד ל-12 עמודות אם המסך של המכשיר או חלון התצוגה גדולים יותר. הוא כולל מחלקות מוגדרות מראש המספקות אפשרויות לביצוע פריסה בקלות, כמו גם שילובים רבי עוצמה ליצירת פריסות סמנטיות". - התיעוד של Bootstrap.

"Bootstrap 4.4.1, עם שינויים משמעותיים, כולל רשת Flexbox רבת עוצמה שנועדה בעיקר למכשירים ניידים המיועדת לבניית פריסות בכל הצורות ובכל קנה מידה, הודות למערכת של 12 עמודות, 5 שכבות מהירות תגובה המוגדרות כברירת מחדל, משתנים ומחלקות mixin של Sass ועשרות מחלקות מוגדרות מראש." - התיעוד של Bootstrap.

כדי להתחיל בעבודה עם מסמכי Bootstrap ב-Dreamweaver, מומלץ להשתמש בתבניות Starter של Bootstrap. ב-Dreamweaver נכללות כמה תבניות המיועדות לסוגים שונים של אתרים שייתכן שתרצה ליצור. לדוגמה, אתר מסחר אלקטרוני או תיק עבודות.

האם ניתן להעביר מסמכי Fluid Grid קיימים למסמכי Bootstrap ב-Dreamweaver?

לא, לא קיימת שיטה ישירה להמרת מסמכי Fluid Grid קיימים למסמכי Bootstrap. עם זאת, חוויית השימוש ב-Dreamweaver בעת יצירה ועיצוב של מסמכי Bootstrap דומה לחוויית השימוש בעת יצירת מסמכי Fluid Grid. לדוגמה, תוכל להתחיל בעבודה ליצירת מסמך Bootstrap ישירות מתיבת הדו-שיח New Document. בעוד שכשמדובר במסמכי Fluid Grid עליך ליצור שלושה גורמי צורה בסיסיים - Mobile‏, Tablet ו-Desktop, ב-Bootstrap העבודה מתחילה ביצירת מסמך המיועד לגדלים בסיסיים של מסכים – קטן, בינוני, גדול וגדול מאוד. אפשרויות העריכה של הפריסה המוצגות בעת לחיצה על רכיבים במסמכי Bootstrap גם הן דומות לאפשרויות המוצגות במסמכי Fluid Grid.

האם ניתן לייבא אתרים ישנים בגרסה העדכנית ביותר של Dreamweaver?

כן, ניתן לייבא אתרים ישנים בגרסה העדכנית ביותר של Dreamweaver. כשתעשה זאת, Dreamweaver יחפש את קובץ ה-CSS של Bootstrap בתיקייה site root/css/‎.

• אם האתר כולל קובץ CSS של Bootstrap v3, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-3.4.1.
• אם האתר כולל קובץ CSS של Bootstrap v4, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-4.4.1.
• אם האתר אינו כולל קובץ CSS של Bootstrap בנתיב site root/css, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-4.4.1.

יצירת מסמכי Bootstrap

באפשרותך להתחיל לעצב את אתר האינטרנט של Bootstrap באמצעות אחת מהאפשרויות הבאות בתיבת הדו-שיח New Document:

• תבניות starter של Bootstrap ‏(Starter Templates >‏ Bootstrap Templates) - השתמש באפשרות זו אם ברצונך להתחיל בעבודה במהירות ללא הטרחה של פריסת הדפים שלך מההתחלה. פשוט ערוך את הטקסט והחלף את המשאבים, במידת הצורך, והאתר מהיר התגובה שלך יהיה מוכן. לקבלת מידע נוסף, ראה שימוש בתבניות starter של Bootstrap.
• יצירת מסמך HTML המבוסס על סביבת Bootstrap ‏(New Document > HTML > Bootstrap) - השתמש באפשרות זו אם ברצונך ליצור את אתר האינטרנט שלך באופן הדרגתי באמצעות רכיבי CSS ו-Bootstrap בתוך Dreamweaver. לקבלת מידע נוסף, ראה יצירת מסמכי HTML המבוססים על סביבת Bootstrap.
  

שימוש בתבניות starter של Bootstrap

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

יצירת מסמכי HTML המבוססים על סביבת Bootstrap

באפשרותך להתחיל ביצירת אתר האינטרנט מהיר התגובה שלך על-ידי יצירת מסמך HTML המבוסס על סביבת Bootstrap. באפשרותך לבחור ליצור קבוצה של קובצי סביבת Bootstrap או להשתמש בקבצים הקיימים. לאחר יצירת המסמך, באפשרותך להוסיף רכיבי Bootstrap כגון תפריטי אקורדיון וקרוסלות באמצעות החלונית Insert ב-Dreamweaver. לחלופין, אם יש לך רכיבי Photoshop, באפשרותך להשתמש ב-Extract להבאת תמונות, גופנים, סגנונות, טקסט ועוד למסמך Bootstrap שלך.

פתיחת קובצי Bootstrap

ניתן לפתוח קובצי Bootstrap באחת מהדרכים הבאות:

• לחץ על File >‏ Open ועבור אל קובץ ה-HTML של Bootstrap.
• (מומלץ) צור אתר Dreamweaver והפנה את תיקיית האתר אל התיקייה שמכילה את כל קובצי Bootstrap שלך.

בעת פתיחת קובץ HTML של Bootstrap ב-Dreamweaver:

• השורות מודגשות בקווים מקווקווים אפורים עם פינות מעוגלות
• העמודות מודגשות בפסים כחולים מקווקווים.

קובצי CSS המשויכים לקובצי HTML של Bootstrap מזוהים על-ידי Dreamweaver אם שם קובץ ה-CSS כולל את המילה "bootstrap". ההפניה לקובץ ה-CSS יכולה להיות אחת מההפניות הבאות:

• נתיב מקומי:

  קובץ CSS מקומי שצומצם (עבר מיניפיקציה) או לא צומצם. לדוגמה:

  ‎<link href="css/bootstrap.css" rel="stylesheet">‎‎ או
  ‎<link href="css/bootstrap.min.css" rel="stylesheet">‎

• נתיב מרוחק:

קובץ CSS מרוחק שצומצם (עבר מיניפיקציה) או לא צומצם. לדוגמה:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

הסתרה, ביטול הסתרה וניהול של רכיבי Bootstrap מוסתרים

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

כדי להסתיר רכיב Bootstrap, לחץ לחיצה ימנית ובחר Hide Element. רכיב זה יוסתר מהתצוגה באופן זמני.

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

הוספת רכיבי Bootstrap

האפשרות Bootstrap Components בחלונית Insert כוללת את רשימת רכיבי Bootstrap שאותם ניתן להוסיף לדף האינטרנט ב-Dreamweaver. בהתאם לגרסת Bootstrap בקובץ bootstrap.css המקושר לדף ה-HTML, הרכיבים המתאימים מפורטים בחלונית Insert.  לדוגמה, ב-Bootstrap v 4.0.0, תראה רכיבים נוספים כגון כרטיסים ותגים. בדומה, רכיבי סמלי גליף, חלונית, מעגנים ותמונה ממוזערת זמינים רק ב-Bootstrap v3.3.7. בהתאם לגרסת Bootstrap, תראה את הרכיבים המתאימים בחלונית Insert. בנוסף, רכיב גלגל מסתובב (Spinner) זמין רק ב-Bootstrap v4.4.1.

הרכיבים בחלונית Insert מאוכלסים בהתבסס על הקריטריונים הבאים:

• המסמך במצב התמקדות: הרכיבים בחלונית Insert מאוכלסים בהתבסס על גרסת Bootstrap בקובץ Bootstrap המקושר למסמך. 
• גרסה ב-Site Preferences: עבור מסמך שאינו של Bootstrap, ‏Dreamweaver מחפש את הגרסה ב-Site Preferences >‏ Advanced >‏ Bootstrap. בהתאם לגרסה באפשרות זו, הרכיבים המתאימים מאוכלסים. כברירת מחדל, עבור אתרים חדשים, הגרסה היא 4.4.1.
• איפה הקבצים נשמרים: עבור מסמך שאינו של Bootstrap ואינו חלק מאתר, החלונית Insert משקפת רכיבים של 4.4.1.

כדי להוסיף רכיב, גרור אותו מהחלונית אל דף האינטרנט. לפני שחרור הרכיב, שים לב לעזרים חזותיים כמו מחווני Live Guide, ‏Precision Insert (באמצעות DOM) ו-Position Assist. באמצעות העזרים האלו תוכל למקם את הרכיבים בדף שלך במהירות ובצורה מדויקת. לקבלת מידע נוסף על הוספת רכיבים בדפי האינטרנט שלך, ראה סקירה של החלונית Insert.

הוסף שורות

לחץ על השורה שאחריה תרצה להוסיף שורה חדשה. לאחר מכן, לחץ על הסמל Add new row. פעולה זו תוסיף שורת Bootstrap, ולצידה שני רכיבי צאצא של עמודות שכוללים שש עמודות בכל רכיב.

זהו הקוד עבור השורה הנוספת:

‎<div class="row">‎
<div class="col-*-6"></div>‎
<div class="col-*-6"></div>‎
</div>‎

הכוכבית (*) מייצגת את גודל המסך הנוכחי ב-Dreamweaver.

הוסף עמודות

בחר את העמודה הנדרשת ולאחר מכן לחץ על הסמל Add new column. העמודה שנבחרה משוכפלת ללא הצאצאים שלה.

לכל העמודות הריקות מוקצה גובה מקסימלי של 20px. עם זאת, גובה זה אינו נוסף בפועל אל הדף אלא מוצג ב-Live View בלבד, לצורך הוספה נוחה יותר של רכיבים בתוך העמודות.

שכפול שורות ועמודות

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

הסטה ושינוי גודל של עמודות

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

שינוי גודל העמודות

לחץ על העמודה הרצויה, וגרור את נקודת האחיזה שמימין כדי לשנות את גודל העמודה. עבור מסמך Bootstrap v4.0.0, בעת שינוי הגודל של עמודה, מתווספת המחלקה col-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (sm‏, md‏, ld‏, xl) והאות n מייצגת את מספר העמודות שהשאילתה תופסת. עבור גודל המסך Extra small, המחלקה col-n מתווספת.

עבור מסמך Bootstrap v3.3.7, בעת שינוי הגודל של העמודה, מתווספת המחלקה col-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (xs‏, sm‏, md‏, או lg) והאות n מייצגת את מספר העמודות שהשאילתה תופסת.

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

הסטת עמודות

לחץ על העמודה הרצויה וגרור את נקודה האחיזה שמשמאל כדי להסיט את העמודה. ההסטה מוצגת כאזור משובץ. עבור מסמך Bootstrap v4.0.0, בעת הסטת העמודה, מתווספת המחלקה offset-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (sm‏, md‏, ld‏, xl) והאות n מייצגת את מספר העמודות שהשאילתה תופסת.

עבור מסמך Bootstrap v3.3.7, בעת הסטת העמודה, מתווספת המחלקה col-*-offset-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (xs, sm, md, or lg) והאות n מייצגת את מספר העמודות להסטה.

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