מבוא

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

התחלה מהירה

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

CSS

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

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

JS

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

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

חבילה

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

נפרד

אם תחליט ללכת עם פתרון הסקריפטים הנפרדים, Popper חייב לבוא ראשון (אם אתה משתמש בטיפים של כלים או בפופ-אובר), ולאחר מכן תוספי JavaScript שלנו.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

רכיבים

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

הצג רכיבים הדורשים JavaScript

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

תבנית התחלה

הקפד להגדיר את הדפים שלך עם תקני העיצוב והפיתוח העדכניים ביותר. המשמעות היא שימוש ב-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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 ופנה אל הקהילה עם המשאבים המועילים האלה.

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

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

CSPs ו-SVGs משובצים

מספר רכיבי Bootstrap כוללים SVGs משובצים ב-CSS שלנו כדי לעצב רכיבים באופן עקבי ובקלות בין דפדפנים ומכשירים. עבור ארגונים עם תצורות CSP קפדניות יותר , תיעדנו את כל המופעים של ה-SVGs המוטבעים שלנו (שכולם מיושמים באמצעות background-image) כדי שתוכל לסקור בצורה יסודית יותר את האפשרויות שלך.

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