דלג לתוכן הראשי דלג לניווט במסמכים
in English

מבוא

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

בעמוד זה

התחלה מהירה

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

CSS

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

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

JS

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

חבילה

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

נפרד

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

מודולים

אם אתה משתמש <script type="module">, אנא עיין בסעיף השימוש ב-Bootstrap כמודול .

רכיבים

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

הצג רכיבים הדורשים JavaScript
  • התראות לביטול
  • לחצנים להחלפת מצבים ופונקציונליות תיבת סימון/רדיו
  • קרוסלה עבור כל התנהגויות השקופיות, הפקדים והמחוונים
  • כיווץ כדי לשנות את החשיפה של התוכן
  • תפריטים נפתחים לתצוגה ומיקום (מחייב גם Popper )
  • מודלים להתנהגות תצוגה, מיקום וגלילה
  • Navbar להרחבת הפלאגין הכיווץ שלנו ליישום התנהגות רספונסיבית
  • טוסטים לתצוגה ולביטול
  • עצות כלים ופופ-אוברים לתצוגה ומיקום (מחייב גם Popper )
  • 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">

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

גודל קופסא

לשינוי גודל פשוט יותר ב-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-5).
  • מפתחים צריכים להשתמש במילת המפתח bootstrapבחבילות שמשנות או מוסיפות את הפונקציונליות של Bootstrap בעת הפצה דרך npm או מנגנוני מסירה דומים לגילוי מקסימלי.

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