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