התחל עם Bootstrap

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

בעמוד זה

התחלה מהירה

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

צור 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>

כלול את ה-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>

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

קישורי CDN

כהתייחסות, הנה קישורי 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 הנוספים שלנו המפורטים בדף התוכן .

הצעדים הבאים

קרא קצת יותר על כמה הגדרות סביבה גלובליות חשובות שבהן Bootstrap משתמש.
קרא על מה שנכלל ב-Bootstrap בחלק התוכן שלנו וברשימה של הרכיבים שדורשים JavaScript למטה.
צריך עוד קצת כוח? שקול לבנות עם Bootstrap על ידי הכללת קובצי המקור דרך מנהל החבילות .
מחפש להשתמש ב-Bootstrap כמודול עם <script type="module">? אנא עיין בסעיף השימוש ב-Bootstrap כמודול .

רכיבי 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 בטוויטר לקבלת הרכילות העדכנית ביותר וסרטוני מוזיקה מדהימים.