Source

מבוא

התחל עם Bootstrap, המסגרת הפופולרית ביותר בעולם לבניית אתרים רספונסיביים, מובייל תחילה, עם jsDelivr ודף תבנית התחלה.

התחלה מהירה

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

CSS

העתק-הדבק את גיליון הסגנונות <link>שלך <head>לפני כל גיליונות הסגנונות האחרים כדי לטעון את ה-CSS שלנו.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

רבים מהרכיבים שלנו דורשים שימוש ב-JavaScript כדי לתפקד. באופן ספציפי, הם דורשים jQuery , Popper.js ותוספי JavaScript משלנו. מקם את ה- <script>s הבא ליד סוף הדפים שלך, ממש לפני </body>תג הסגירה, כדי להפעיל אותם. jQuery חייב לבוא קודם, לאחר מכן Popper.js, ולאחר מכן תוספי JavaScript שלנו.

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

מעניין אילו רכיבים דורשים במפורש jQuery, JS שלנו ו-Popper.js? לחץ על הקישור להראות רכיבים למטה. אם אתה בכלל לא בטוח לגבי מבנה העמוד הכללי, המשך לקרוא לקבלת תבנית דף לדוגמה.

שלנו bootstrap.bundle.jsוכוללים bootstrap.bundle.min.jsאת פופר , אבל לא jQuery . למידע נוסף על הכלול ב-Bootstrap, עיין בסעיף התוכן שלנו.

הצג רכיבים הדורשים JavaScript
  • התראות לביטול
  • לחצנים להחלפת מצבים ופונקציונליות תיבת סימון/רדיו
  • קרוסלה עבור כל התנהגויות השקופיות, הפקדים והמחוונים
  • כיווץ כדי לשנות את החשיפה של התוכן
  • תפריטים נפתחים לתצוגה ולמיקום (מחייב גם Popper.js )
  • מודלים להתנהגות תצוגה, מיקום וגלילה
  • Navbar להרחבת הפלאגין הכיווץ שלנו ליישום התנהגות רספונסיבית
  • עצות כלים ופופ-אוברים לתצוגה ומיקום (מחייב גם Popper.js )
  • Scrollspy להתנהגות גלילה ועדכוני ניווט

תבנית התחלה

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

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

גלובלים חשובים

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

HTML5 doctype

Bootstrap דורש שימוש ב-HTML5 doctype. בלי זה, תראה סטיילינג לא שלם פאנקי, אבל הכללתו לא אמורה לגרום לשיהוקים ניכרים.

<!doctype html>
<html lang="en">
  ...
</html>

מטא תג רספונסיבי

Bootstrap פותח Mobile First , אסטרטגיה שבה אנו מייעלים תחילה קוד עבור מכשירים ניידים ולאחר מכן מגדילים את הרכיבים לפי הצורך באמצעות שאילתות מדיה של CSS. כדי להבטיח עיבוד תקין והתקרבות מגע לכל המכשירים, הוסף את המטא תג של נקודת התצוגה הרספונסיבית ל- <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

אתה יכול לראות דוגמה לכך בפעולה בתבנית ההתחלה .

גודל קופסא

לשינוי גודל פשוט יותר ב-CSS, אנו מחליפים את הערך הגלובלי box-sizingמ- content-boxל border-box. זה מבטיח paddingשלא ישפיע על הרוחב המחושב הסופי של אלמנט, אבל זה יכול לגרום לבעיות עם תוכנות צד שלישי מסוימות כמו מפות Google ומנוע החיפוש המותאם אישית של Google.

במקרה נדיר שאתה צריך לעקוף אותו, השתמש במשהו כמו הבא:

.selector-for-some-widget {
  box-sizing: content-box;
}

עם קטע הקוד שלמעלה, אלמנטים מקוננים - כולל תוכן שנוצר באמצעות ::beforeו ::after- כולם יירשו את המפורט box-sizingעבור זה .selector-for-some-widget.

למידע נוסף על דגם וגודל קופסא ב-CSS Tricks .

לְאַתחֵל

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

קהילה

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

  • עקוב אחר @getbootstrap בטוויטר .
  • קרא והירשם לבלוג הרשמי של Bootstrap .
  • צ'אט עם Bootstrappers אחרים ב-IRC. irc.freenode.netבשרת, בערוץ ##bootstrap.
  • ניתן למצוא עזרה ביישום ב-Stack Overflow (מתויג bootstrap-4).
  • מפתחים צריכים להשתמש במילת המפתח bootstrapבחבילות שמשנות או מוסיפות את הפונקציונליות של Bootstrap בעת הפצה דרך npm או מנגנוני מסירה דומים לצורך גילוי מקסימלי.

אתה יכול גם לעקוב אחר @getbootstrap בטוויטר לקבלת הרכילות העדכנית ביותר וסרטוני מוזיקה מדהימים.