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

התחל עם Bootstrap

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

התחלה מהירה

התחל על ידי הכללת CSS ו-JavaScript המוכנים לייצור של Bootstrap דרך CDN ללא צורך בשלבי בנייה כלשהם. ראה זאת בפועל עם הדגמה זו של Bootstrap CodePen .


  1. צור index.htmlקובץ חדש בשורש הפרויקט שלך. כלול גם את <meta name="viewport">התג להתנהגות רספונסיבית נכונה במכשירים ניידים.

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
      </head>
      <body>
        <h1>Hello, world!</h1>
      </body>
    </html>
    
  2. כלול את ה-CSS וה-JS של Bootstrap. הצב את <link>התג ב- <head>CSS שלנו, ואת <script>התג עבור חבילת ה-JavaScript שלנו (כולל Popper למיקום תפריטים נפתחים, פופרים וטיפים) לפני הסגירה </body>. למידע נוסף על קישורי ה-CDN שלנו .

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
      </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
      </body>
    </html>
    

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

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    
  3. שלום עולם! פתח את הדף בדפדפן שבחרת כדי לראות את הדף Bootstraped שלך. עכשיו אתה יכול להתחיל לבנות עם Bootstrap על ידי יצירת פריסה משלך , הוספת עשרות רכיבים ושימוש בדוגמאות הרשמיות שלנו .

כהתייחסות, הנה קישורי CDN העיקריים שלנו.

תיאור כתובת אתר
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

אתה יכול גם להשתמש ב-CDN כדי להביא כל אחד מה-builds הנוספים שלנו המפורטים בדף התוכן .

הצעדים הבאים

רכיבי JS

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

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

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

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 .
  • שאל וחקור את דיוני GitHub שלנו .
  • צ'אט עם Bootstrappers אחרים ב-IRC. irc.libera.chatבשרת, בערוץ #bootstrap.
  • ניתן למצוא עזרה ביישום ב-Stack Overflow (מתויג bootstrap-5).
  • מפתחים צריכים להשתמש במילת המפתח bootstrapבחבילות שמשנות או מוסיפות את הפונקציונליות של Bootstrap בעת הפצה דרך npm או מנגנוני מסירה דומים לגילוי מקסימלי.

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