יצירת אתר עם Bootstrap

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

ב מאמר קודם תוכלו למצוא את ההוראות להתקנת VS Codium, לתרגם את ממשק המשתמש שלו לספרדית ולהתקין את התוסף Bootstrap.

שני דברים שכדאי לזכור:

1. הפקודות בהן אנו משתמשים הן קיצורי מקלדת, עליך להקליד אותם. העתק/הדבק לא עובד.
2. מנהל התוכן שלנו לא מאפשר לי להציג את קוד ה-HTML ולכן אני צריך להשתמש בצילומי מסך. כדי שתהיה לך גישה לקוד של הדוגמאות שהעליתי אותן ל-GitHub.

כיצד לשכפל מאגר GitHub

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

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

ישנם מספר שירותים המבוססים על Git, בחרתי ב-GitHub פשוט בגלל שהוא משתלב עם VS Codium.

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

לאחר מכן תקליד את הפקודות הבאות.

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

cd Documentos

ואז אני משכפל את הקבצים עם:

git clone https://github.com/dggonzalez1971/bootstrap.git

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

כדי לראות את הקבצים פשוט פתח את סייר הקבצים וחפש את התיקיה אתחול.

יצירת אתר עם Bootstrap

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

לאחר מכן נבצע את השלבים הבאים:

1. בוא נלך לתפריט ארכיון.
2. לחץ על קובץ טקסט חדש.
3. לחץ על שמור.
4. אנחנו מחפשים את התיקיה שיצרנו ושמים את שם הקובץ example1.html.
5. לחץ על שמור.

לפעמים חלון סייר הקבצים עשוי להיות מוסתר על ידי VSCodium.

בואו נבקש מהתוסף ליצור עבורנו את התבנית הבסיסית. בשביל זה אנחנו מקלידים !b5-$

זה יפיק את הקוד שתמצא בתיקיית הדוגמאות בתור example1.html

נראה את הדברים הבאים:

אנחנו הולכים לבצע כמה שינויים בקובץ הזה. אתה תמצא את השינויים תחת השם example2.html

• בשורה 2 אנו משנים את השפה על ידי החלפת eng ב-es. זה מעיד למנועי החיפוש ששפת האתר היא ספרדית.
• בשורה 6 אנו משנים את הטקסט שנמצא מתחת לתוויות כותרת. אנחנו שמים אתר Bootstrap הראשון שלי.
• בשורה 12 אנו משנים את התוכן בין התגים h1 ידי זהו אתר שנוצר עם Bootstrap.

לאחר מכן, נבצע כמה שינויים חשובים. שינויים אלה קשורים ל:

1. מפתח הפלאגין לא יכול לעמוד בקצב של גרסאות Bootstrap וישנן עדכניות יותר.
2. ישנן אפשרויות רבות לרכיבי bootstrap ואני מעוניין באחת אחרת.
3. לפי התיעוד הרשמי, הקריאות לספריות Javascript חייבות להיות בתוך תגי הגוף.

לדוגמה 2 אנו משנים את התוכן של שורה 7, מוחקים שורות 8 ו-9 ומעלים את התוכן הנותר כדי לשמור על תאימות המספרים. לאחר מכן אנו לוחצים על סוף שורה 10 כדי ליצור שורה 11 חדשה ונשים את הקישור לספריות Javascript.

אל תדאג אם אתה לא מבין את הקוד. את תפקידה של כל שורה אסביר במאמר הבא.