הדרכת Bootstrap


bootstrap 4 הדרכה


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

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

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

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

כיצד ליצור אתר באמצעות Bootstrap (תוכן עניינים):

  1. שלב 1: הגדרה וסקירה כללית
    1. צור דף HTML
    2. טען את Bootstrap באמצעות CDN או מארח אותו באופן מקומי
    3. כלול jQuery
    4. טען JavaScript Bootstrap
    5. שים את הכל יחד
  2. שלב 2: תכנן את דף הנחיתה שלך
    1. הוסף סרגל ניווט
    2. כלול CSS מותאם אישית
    3. צור מיכל תוכן לדף
    4. הוסף תמונת רקע ו- JavaScript מותאם אישית
    5. הוסף שכבת-על
    6. כלול כותרת עמוד וטקסט גוף
    7. צור כפתור CTA
    8. הגדר קטע בן שלוש עמודות
    9. הוסף טופס יצירת קשר
    10. צור כותרת תחתונה בעלת שתי עמודות
    11. הוסף שאילתות מדיה
    12. השג את האתר שלך בשידור חי

זמן כולל ליצירת אתר באמצעות Bootstrap: 3-4 שעות.
רמת מיומנות: מתחיל ביניים

שלב 1: הגדרה וסקירה כללית


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

1. צור דף HTML

כצעד ראשון ניצור תבנית HTML פשוטה כבסיס בו נשתמש ב- Bootstrap. לשם כך, הדבר הראשון שאתה רוצה לעשות הוא ליצור תיקיה במחשב או בשרת עבור קבצי הפרויקט. במקרה זה, אני פשוט אקרא לזה רצועת אתחול. הנה, צור קובץ טקסט חדש וקרא לו index.html. פתח אותו עם עורך טקסט לבחירתך (למשל. פנקס רשימות++) ואז הדבק בתוכו את הקוד למטה.





דף לדוגמא של Bootstrap Tutorial








אל תשכח לשמור את הקובץ שלך לפני שתמשיך הלאה!

2 א. טען את רצועת האתחול באמצעות CDN

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

כדי להכניס את Bootstrap לדף שלך, פשוט הדבק את הקוד למטה בתוך החלק של התבנית שלך.

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

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

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

2 ב. מארח את Bootstrap באופן מקומי

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

לאחר שעשיתם זאת, פתחו את הקובץ מעותקם והעתיקו את תוכנו לאותה ספריה כמו index.html. לאחר מכן תוכל לטעון את ה- Bootstrap CSS לפרויקט שלך כך:

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

3. כלול jQuery

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

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

לחלופין, הורד jQuery – – (לחץ באמצעות לחצן העכבר הימני> שמור קישור בשם…), פתחו את השטח והכניסו לתיקיית הפרויקט. לאחר מכן, כלול אותו באותו מקום כמו הקובץ שלך בדרך זו:

שוב, וודא שהנתיב מתאים להגדרה שלך.

טען JavaScript Bootstrap

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

אתה יכול לקרוא לזה מרחוק כך:

או באופן מקומי כך:

5. הרכיבו הכל יחד

אם עקבת נכון אחר השלבים שלמעלה, אתה אמור להסתיים בקובץ שנראה כך עבור הפיתרון המרוחק:

   דף לדוגמא של Bootstrap Tutorial         

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

   דף לדוגמא של Bootstrap Tutorial         

אם זה מה שיש לך ושמרת את העבודה שלך, אתה מוכן כעת לעבור לשלב הבא.

שלב 2: תכנן את דף הנחיתה שלך


בסדר, זאת, יש להודות, הרבה עבודות הכנה. עם זאת, זה לא היה קשה מאוד, נכון? בנוסף, עכשיו הכיף מתחיל.

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

1. הוסף סרגל ניווט

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

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

אנו נשתמש בו כמו להלן ונפרסם אותו ממש מתחת ל תגית:

 לוגו   

הסבר כלשהו לקוד:

  • navbar-expand-md – זה מציין באיזו נקודה סרגל הניווט מתרחב מסמל אנכי או המבורגר לסרגל אופקי בגודל מלא. במקרה זה, הגדרנו את זה למסכים בינוניים, אשר ב- Bootstrap הוא הכל גדול מ- 768 פיקסלים.
  • המותג navbar – זה משמש למיתוג האתר שלך. אתה יכול גם לכלול כאן קובץ תמונת לוגו.
  • navbar-toggler – מציין את כפתור ההחלפה של התפריט שקרס. החתיכה data-toggle = "התמוטטות" מגדיר שזה יעבור לתפריט המבורגר, לא לנפתח, שהיא האופציה האחרת. חשוב שתגדיר א יעד נתונים עם מזהה CSS (מוגדר על ידי #) ועטוף א div עם אותו שם סביב העניין navbar אלמנט.
  • navbar-toggler-icon כפי שאתה יכול לנחש, זה יוצר את הסמל שמשתמשים לוחצים עליו כדי לפתוח את התפריט במסכים קטנים יותר.
  • navbar-nav – הכיתה ל
      אלמנט רשימה המכיל את פריטי התפריט. האחרונים מסומנים עם פריט nav ו nav-link.

    מדוע אני מסביר זאת כל כך?

    כי זו הנקודה של Bootstrap. יש לך את כל התקנים האלה המאפשרים לך ליצור אלמנטים עם כמה כיתות HTML ו- CSS במהירות. אתה לא צריך לכתוב שום CSS כדי לספק סטיילינג, הכל כבר מוגדר בתוך Bootstrap. בנוסף, הכל מגיב לנייד מחוץ לקופסה! האם אתה מתחיל לראות עד כמה זה מועיל?

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

    הדרכה bootstrap להוסיף סרגל ניווט

    הסיבה לכך היא שלא קשורים אליו הרבה סטיילינג. בזמן שאתה מסוגל להוסיף צבעי ברירת מחדל (למשל, על ידי מתן הנווט לכיתה כמו bg-dark navbar-dark), אנו במקום זאת רוצים להוסיף משלנו.

    2. כלול CSS מותאם אישית

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

    לשם כך, פשוט צור קובץ ריק עם עורך הטקסט שלך והתקשר אליו main.css. שמור אותו, ואז הוסף אותו לקטע הראש של אתר Bootstrap שלך כך:

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

    מכאן אתה יכול להוסיף CSS מותאם אישית לאתר שלך. לדוגמה, לסגנון סרגל הניווט ואלמנטים שלו, אתה יכול להשתמש בסימון כזה:

    גוף { ריפוד: 0; שולי: 0; רקע: # f2f6e9; } /*--- סרגל ניווט ---*/ .navbar { רקע: # 6ab446; } .nav-link, .navbar-brand { צבע: #fff; סמן: מצביע; } .nav-link { שוליים ימניים: 1em! חשוב; } .nav-link: רחף { צבע: # 000; } .התמוטטות navbar { הצדקה-תוכן: flex-end; }

    והנה התוצאה:

    סרגל הניווט בסגנון ההדרכה של bootstrap

    נראה טוב יותר מקודם, לא?

    3. צור מיכל תוכן לעמוד

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

    שימו לב ל נוזל מיכל מעמד. זו עוד אחת מאותן מחלקות ברירת המחדל של Bootstrap. החלתו על ה- div אלמנט מחיל עליו חבורה של CSS באופן אוטומטי.

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

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

    4. הוסף תמונת רקע ו- JavaScript מותאם אישית

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

    אתה עושה זאת באותה צורה שאתה כולל CSS מותאם אישית. ראשית, צור קובץ טקסט בשם main.js והנח אותו בתיקיית האתר שלך. לאחר מכן, התקשר אליו לפני הסגירה תג בפנים index.html.

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

    אלמנט נמתח על פני כל המסך:
    $ (מסמך) .ready (פונקציה () { $ ('. כותרת'). גובה ($ (חלון). גובה ()); })

    ואז, הדבר היחיד שנותר הוא להגדיר תמונת רקע. אתה יכול לעשות את זה כמו בפנים main.css:

    .כותרת { תמונת רקע: url ('תמונות / header-background.jpg'); גודל רקע: כיסוי; רקע-מיקום: מרכז; מיקום: קרוב משפחה; }

    אם אתה מציב תמונה בגודל מספיק במיקום שצוין על ידי הנתיב שלמעלה, תוכל להשיג תוצאה הדומה לזה:

    הדרכת bootstrap כוללת תמונת רקע לכותרת

    5. הוסף שכבת-על

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

    לאחר מכן תוכל להוסיף את הדברים הבאים בקובץ CSS המותאם אישית שלך:

    .כיסוי { עמדה: מוחלט; גובה דקה: 100%; רוחב דקה: 100%; משמאל: 0; למעלה: 0; רקע: rgba (0, 0, 0, 0.6); }

    זה יוצר שכבת-על נחמדה זו עבור התמונה שהזנת קודם:

    הדרכה bootstrap להוסיף שכבת על - -

    6. כלול כותרת עמוד וטקסט גוף

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

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

    ברוך הבא לדף הנחיתה!

    Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, ב פרתא סם ullamcorper.

    לאחר מכן, הוסף את הסימון הבא main.css.

    .תיאור { שמאל: 50%; עמדה: מוחלט; למעלה: 45%; טרנספורמציה: לתרגם (-50%, -55%); יישור טקסט: מרכז; } .תיאור h1 { צבע: # 6ab446; } .תיאור p { צבע: #fff; גודל גופן: 1.3rem; גובה קו: 1.5; }

    כשתעשה זאת, עמוד הנחיתה כעת נראה כך:

    הדרכת bootstrap להוסיף כותרת עמוד ותיאור

    זה ממש מתחיל להיפגש, לא?

    7. צור כפתור CTA

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

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

    בנוסף לכל זה אני מוסיף את ה- CSS הזה main.css:

    .כפתור תיאור { גבול: 1px מוצק # 6ab446; רקע: # 6ab446; רדיוס גבול: 0; צבע: #fff; } .לחצן תיאור: רחף { גבול: 1px מוצק #fff; רקע: #fff; צבע: # 000; }

    לאחר שמירה וטעינה מחדש זה נראה כך:

    הדרכה bootstrap להוסיף שיחה לחצן פעולה

    8. הגדר קטע בן שלוש עמודות

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

    Lorem ipsum

    Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

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

    באשר לטורים, לכולם יש כמה שיעורים: col-lg-4, col-md-4 ו col-sm-12. אלה מציינים כי עסקנו בעמודות ובגודל שיהיה להם במסכים שונים.

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

    זה הגיוני, לא?

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

    בנוסף לכל זה יש לך את הסטיילינג הבא במקום הרגיל:

    .תכונות { שוליים: 4em אוטומטי; ריפוד: 1em; מיקום: קרוב משפחה; } .תכונת כותרת { צבע: # 333; גודל גופן: 1.3rem; משקל גופן: 700; שוליים תחתון: 20px; שינוי טקסט: אותיות גדולות; } .תכונות img { -webkit-box-צל: 1 פיקסלים 1 פיקסלים 4 פיקסלים rgba (0, 0, 0, 0.4); -moz-box-צל: 1px 1px 4px rgba (0, 0, 0, 0.4); תיבת צל: 1px 1px 4px rgba (0, 0, 0, 0.4); שוליים תחתון: 16px; }

    כאשר הוא מתווסף מתחת לתוכן הראשי ונשמר, הוא נראה כך:

    הדרכה bootstrap להוסיף שלוש קטע עמודה

    9. הוסף טופס יצירת קשר

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

    יצירת טופס יצירת קשר ב- Bootstrap זה די קל:

    נהיה בקשר!

    נכון לעכשיו לא הייתי צריך להסביר את הסימון כדי ליצור עמודות. להלן משמעות שאר הסימון:

    • קבוצת טופס – משמש לעטוף שדות טופס לעיצוב.
    • בקרת טופס – מציין שדות טופס כגון קלט, אזורי טקסט וכו ‘.

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

    .תכונות. שליטת צורה, .תכונות קלט { רדיוס גבול: 0; } .תכונות .btn { צבע רקע: # 589b37; גבול: 1px מוצק # 589b37; צבע: #fff; שוליים עליונים: 20 פיקסלים; } .תכונות .btn: רחף { צבע רקע: # 333; גבול: 1px מוצק # 333; }

    כשאתה כן, אתה מקבל טופס כזה:

    הדרכת bootstrap כוללת טופס יצירת קשר

    10. צור כותרת תחתונה בעלת שתי עמודות

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

    מידע נוסף

    Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    איש קשר

    1640 ריברסייד דרייב, היל ואלי, קליפורניה
    [מוגן בדוא"ל]
    + 01 234 567 88
    + 01 234 567 89

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

    • אותיות גדולות
    • מודגש
    • מרכז טקסט

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

    בנוסף לאמור לעיל, אתה יכול להשתמש בסטיילינג כזה:

    .כותרת תחתונה לדף {
    צבע רקע: # 222;
    צבע: #ccc;
    ריפוד: 60px 0 30px;
    }
    
    .כותרת תחתונה על זכויות יוצרים {
    צבע: # 666;
    ריפוד: 40px 0;
    }

    התוצאה היא כותרת תחתונה יפהפיה שנראית כך:

    מדריך הדרכה לאתחול כולל כותרת תחתונה של הדף

    11. הוסף שאילתות מדיה

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

    שגיאת הדרכה של bootstrap בעיצוב נייד

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

    כתוצאה מכך, כדי לתקן את הבעיה שלמעלה, אתה יכול פשוט לכלול פיסת קוד כזו:

    @media (רוחב מקסימאלי: 575.98 פיקסלים) {
    
    .תיאור {
    משמאל: 0;
    ריפוד: 0 15px;
    עמדה: מוחלט;
    למעלה: 10%;
    להפוך: אין;
    יישור טקסט: מרכז;
    }
    
    .תיאור h1 {
    גודל גופן: 2em;
    }
    
    .תיאור p {
    גודל גופן: 1.2rem;
    }
    
    .תכונות {
    שולי: 0;
    }
    
    }

    אחרי זה הכל כמו שצריך להיות:

    הדרכה bootstrap להוסיף שאילתת מדיה - -

    12. העלה את האתר שלך למארח אינטרנט

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

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

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

    העלאת אתר bootstrap לשרת באמצעות

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

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

    מדריך ההפעלה bootstrap סיים את דף הנחיתה

    לא רע לכמה שורות קוד, נכון?

    אם כבר מדברים על כך, אם ברצונך שיהיה לך את כל הקוד לדף כולל CSS ו- JavaScript המותאמים אישית, תוכל להוריד את כולם כאן. עם זה, יש לך את כל הדרוש לך כדי ליצור דף נחיתה עם Bootstrap.

    סיכום

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

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

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

    כמובן שיש עוד מה ללמוד.

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

    עדכון: יצרנו גם גיליון רמאות של bootstrap למתחילים בגירסאות .pdf ו- .png.

    האם יש לך מחשבות על מדריך Bootstrap לעיל? שאלות, הערות, בקשות? יידע אותנו בפרק ההערות שלהלן!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map