כיצד להקים אתר אלגנטי ופשוט באמצעות Bootstrap 4: 7 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:14

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

התיק מחולק למספר שלבים קטנים יותר כדי להפוך אותו לניהול יותר: מסגרת HTML, מסגרת CSS, מסגרת Javascript, סרגל ניווט ודף הבית (עם חסימות תוכן).

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

הערה: מדריך זה אינו מקיף ואינו אמור לשמש כתחליף ללמידה כיצד לתכנת ב- HTML, CSS או Javascript.

משאבים נדרשים

• רצועת אתחול 4
• jQuery 3.3.1

משאבים אופציונאליים

• FontAwesome
• גופנים של גוגל
• highlight.js

אם תרצה לדלג לדוגמה המלאה או להציץ במאגר:

• דוגמא מלאה
• מאגר

הערה: אני אשתמש ב- Sublime בתמונות עבור הדוגמאות שלי אם תרצה לעקוב יחד עם אותו עורך טקסט.

שלב 1: הגדרה

הגדרת תיקיה

1. צור תיקיה במקום כלשהו שבו תוכל לאחסן את כל מה שאנו הולכים להוריד. זו תהיה ספריית השורש שלך לתיק העבודות.
2. צור תיקיה בתוך התיקייה בשם "bootstrap"
3. צור תיקייה נוספת בתוך תיקיית תיק השורשים שלך בשם "jquery"

תיקיית תיק

| ----- bootstrap | ----- jquery

רצועת אתחול 4

1. בקר באתר שלהם ולחץ על כפתור "הורד" מתחת לקטע "CSS ו- JS הידור".
2. שמור את קובץ ה- zip בתיקיית "הורדות" או במיקום נוח אחר.
3. פתח את קובץ.zip וחלץ את תיקיות "css" ו- "js" לתיקיית "bootstrap" שיצרת קודם.

jQuery

1. בקר באתר האינטרנט שלהם והורד את "jQuery 3.3.1 הפיתוח הבלתי דחוס"
2. שמור את הקובץ בתוך תיקיית "jquery" שיצרת קודם.

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

שלב 2: מסגרת HTML (index.html)

השם שלך

מסגרת זו אינה דבר מורכב מדי, אך אני רוצה להסביר את המטרות הכלליות של ההתקנה.

Bootstrap JS לאחר jQuery

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

FontAwesome

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

hightlight.js

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

הערה: שים לב למקומות שבהם אני משתמש בקישורים מקודדים לקבצים כמו שני הסמלים ו- highlight.js. כמו כן, מכיוון שנדרשות רק Bootstrap ו- jQuery, אל תהסס להוסיף או להסיר מסגרות אחרות. אם אתה מסיר כלשהו, זכור להסיר את שורות הקוד התואמות מאוחר יותר.

שלב 3: מסגרת CSS (style.css)

/ * * יש לקוות כי חיטוב צבע bg לאפור ושינוי סגנון הגופן הופך את האתר לקל יותר לצרוך */ body {רקע: אפור; font-family: 'Open Sans', sans-serif; }

/*

* זה מוודא שסרגל הניווט נמצא על הכל */ nav {z-index: 9999; }

/*

* זה אמור להפוך את טקסט הפסקה לקריא יותר */ p {גודל הגופן: 18 פיקסלים; שוליים למעלה: 5 פיקסלים; שוליים-תחתונים: 5 פיקסלים; }

/*

* זה מוודא שכל חסימות הקוד שלי מעוצבות כראוי */ code {text-align: left; }

/*

* אני לא רוצה שלרשימות יהיו הכדורים */ li {list-style-type: none; }

/*

* הקישורים כחולים כברירת מחדל, ואני רוצה שהם יהיו בקנה אחד עם הסגנון של Bootstrap */ li a, a {color: white; }

/*

* אני קושר תג class ל div שמכיל את סרגל הניווט כדי לוודא שהתוכן אינו חופף */.navFix {padding-bottom: 70px; }

/*

* גודל מוגדל מותח את navbar */.social-media {font-size: 1.3em; }

/*

* צבע ההדגשה המוגדר כברירת מחדל עבור הקישורים הנפתחים הוא לבן */. תפריט נפתח a: רחף {רקע-צבע: #212529; }

/*

* כוחות divs המציגים קובצי PDF לגובה מסוים */.pdfFill {height: 45rem; }

/*

* הוסף מרווח בין הכפתורים ובלוקי הקוד */.codeStyle {padding-top: 30px; }

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

nav z-index

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

יישור קוד

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

ריפוד navFix

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

גובה pdf

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

שלב 4: מסגרת Javascript (javascript.js)

/ * * זה מחפש כל אלמנט במחלקה 'toggle' או מסתיר או מסתיר אותו */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "חסימה";

}

להחזיר שקר;

}

/*

* קוד שצריך להריץ בסדר מסוים */ $ (מסמך). Ready (function () {/ * * טען תוכן מקבצים */

/*

* כפה על עיכוב קטן לטעון את הנתונים */ setTimeout (function () {/ * * הדגש את כל הקוד שהועלה ב- */ $ ('קוד קוד'). כל אחד (פונקציה (i, block) { hljs.highlightBlock (בלוק);});}, 1000); });

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

toggleSection

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

טעינת מסמכים

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

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html");

זוהי דוגמה לאופן שבו נטען בתוכן.

שלב 5: סרגל ניווט

ראשי תיבות

• בית
• עליי
• הדרכות לפרויקטים
• צור איתי קשר

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

  פונקציונליות Bootstrap

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

  ה- "navbar" שלנו הוא האפשרות "md" (בינונית), "הרחבה" מסוגלת, "כהה". ואנחנו "תיקנו" אותו ל"חלק העליון ". זה נראה מבלבל כי זה ערבוביה של מזהים, אבל אם מסתכלים עליהם כתארים של האלמנט, זה הופך להיות הרבה יותר קל להבין מה קורה.

  מותג

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

  הערה: תגי ה" i "הם למעשה הסמלים של FontAwesome, ותקבל את התגים האלה מדף כל סמל.

  לחצן מתג/מתקפל (נייד)

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

  קישורי סרגל ניווט (צד שמאל)

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

  הערה: תוכל מבחינה טכנית ליצור תפריטים נפתחים בתפריטים נפתחים אחרים, אך לא הייתי ממליץ על כך אלא אם אתה מוכן להוסיף עוד CSS ו- Javascript כדי שהממשק ייראה נקי.

  קישורי סרגל ניווט (צד ימין)

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

  הערה: אם אתה מתכנן להשתמש בקישורים שכבר יש לי הגדרות, שנה את "שם המשתמש" בקישורים "href" בפועל עצמם.

  שלב 6: דף הבית

  

  

  

  השם שלך

  שחקן סופר מתכנת

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

  פורמט טבלה

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

  כפתורים

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

  תכנות קוד תכנות

  תגי "הקוד" הם תגי ברירת המחדל שבהם highlight.js משתמשת בניהול כל ההדגשות. אם אתה זוכר מהקובץ javascript.js, יש קטע להעלאת תוכן מקבצים אחרים.

  $ ('#בית-מתכנת-מאקרו'). load ("files/home/watchLoot.mac");

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

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

  סרטון יוטיוב

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

  שלב 7: הסתכלות קדימה

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

  התיעוד של Bootstrap

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

  בתי ספר W3

  W3Schools הוא אתר נפלא שבו תוכלו ללמוד כמעט כל מה שקשור לתכנות ופיתוח אתרים. הם הרבה יותר חכמים ממני, והם מכסים כמעט כל פונקציונליות HTML, CSS ו- Javascript שתוכל לחשוב עליהם.

  אחסון הפורטפוליו שלך

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

  התנסות ותהנה

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