ערכת כלים חזיתית חזקה, ניתנת להרחבה ועתירת תכונות. בנה והתאם אישית עם Sass, השתמש במערכת ורכיבי רשת שנבנו מראש, והחי את פרויקטים עם תוספים רבי עוצמה של JavaScript.
כרגע v5.2.1 · הורד · v4.6.x docs · כל הגרסאות
קפוץ ישירות לבניין עם Bootstrap - השתמש ב-CDN, התקן אותו דרך מנהל החבילות, או הורד את קוד המקור.
התקן את קובצי המקור Sass ו-JavaScript של Bootstrap דרך npm, RubyGems, Composer או Meteor. התקנות מנוהלות בחבילות אינן כוללות תיעוד או את סקריפטי הבנייה המלאים שלנו. אתה יכול גם להשתמש במאגר תבנית npm שלנו כדי ליצור במהירות פרויקט Bootstrap באמצעות npm.
npm install [email protected]gem install bootstrap -v 5.2.1קרא את מסמכי ההתקנה שלנו לקבלת מידע נוסף ומנהלי חבילות נוספים.
כאשר אתה רק צריך לכלול את ה-CSS או ה-JS של Bootstrap מהידור, אתה יכול להשתמש ב- jsDelivr . ראה אותו בפעולה עם ההתחלה המהירה הפשוטה שלנו , או עיין בדוגמאות כדי להתחיל את הפרויקט הבא שלך. אתה יכול גם לבחור לכלול את Popper וה-JS שלנו בנפרד .
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap משתמש ב-Sass עבור ארכיטקטורה מודולרית וניתנת להתאמה אישית. ייבא רק את הרכיבים שאתה צריך, הפעל אפשרויות גלובליות כמו מעברי צבע וצללים, וכתוב CSS משלך עם המשתנים, המפות, הפונקציות והמיקסים שלנו.
ייבא גיליון סגנונות אחד ואתה יוצא למירוץ עם כל תכונה של ה-CSS שלנו.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
למידע נוסף על אפשרויות Sass הגלובליות שלנו .
הדרך הקלה ביותר להתאים אישית את Bootstrap - כלול רק את ה-CSS שאתה צריך.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
למידע נוסף על השימוש ב-Bootstrap עם Sass .
Bootstrap 5 מתפתח עם כל מהדורה כדי לנצל טוב יותר משתני CSS עבור סגנונות נושא גלובליים, רכיבים בודדים ואפילו כלי עזר. אנו מספקים עשרות משתנים לצבעים, סגנונות גופנים ועוד :rootברמה לשימוש בכל מקום. על רכיבים וכלי שירות, משתני CSS מותאמים למחלקה הרלוונטית וניתן לשנות אותם בקלות.
השתמש בכל אחד מהמשתנים הגלובליים:root שלנו כדי לכתוב סגנונות חדשים. משתני CSS משתמשים var(--bs-variableName)בתחביר ויכולים לעבור בירושה על ידי אלמנטים ילדים.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}עוקף משתנים גלובליים, רכיבים או מחלקת שירות כדי להתאים אישית את Bootstrap בדיוק איך שאתה אוהב. אין צורך להצהיר מחדש על כל כלל, רק ערך משתנה חדש.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}חדש ב-Bootstrap 5, כלי השירות שלנו נוצרים כעת על ידי Utility API שלנו . בנינו אותה כמפת Sass עמוסה בתכונות שניתן להתאים אותה במהירות ובקלות. מעולם לא היה קל יותר להוסיף, להסיר או לשנות מחלקות שירות. הפוך את כלי השירות לרספונסיביים, הוסף גרסאות פסאודו-קלאס ותן להם שמות מותאמים אישית.
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
הוסף בקלות אלמנטים נסתרים הניתנים להחלפה, מודלים ותפריטים מחוץ לשטח, חלונות קופצים וטיפים, ועוד הרבה יותר - הכל ללא jQuery. JavaScript ב-Bootstrap הוא HTML-first, מה שאומר שהוספת תוספים קלה כמו הוספת dataתכונות. צריך יותר שליטה? כלול פלאגינים בודדים באופן תכנותי.
למה לכתוב יותר JavaScript כשאפשר לכתוב HTML? כמעט כל התוספים ל-JavaScript של Bootstrap כוללים API נתונים מהשורה הראשונה, המאפשר לך להשתמש ב-JavaScript רק על ידי הוספת dataתכונות.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
למד עוד על JavaScript שלנו כמודולים ושימוש ב-API התכנותי .
Bootstrap כולל תריסר תוספים שאתה יכול להכניס לכל פרויקט. זרוק אותם בבת אחת, או בחר רק את אלה שאתה צריך.
Bootstrap Icons היא ספריית אייקוני SVG בקוד פתוח הכוללת למעלה מ-1,500 גליפים, עם עוד נוספים בכל מהדורה. הם נועדו לעבוד בכל פרויקט, בין אם אתה משתמש ב-Bootstrap עצמו ובין אם לא. השתמש בהם כגופני SVG או סמלים - שתי האפשרויות מעניקות לך קנה מידה וקטור והתאמה אישית קלה באמצעות CSS.
קח את Bootstrap לשלב הבא עם ערכות נושא מובחר מהשוק הרשמי של Bootstrap Themes . ערכות נושא בנויות על Bootstrap כמסגרות מורחבות משלהן, עשירות ברכיבים ותוספים חדשים, תיעוד וכלי בנייה רבי עוצמה.
