שטאַרק, עקסטענסיבלע און שטריך-פּאַקט פראָנטענד טאָאָלקיט. בויען און קאַסטאַמייז מיט Sass, נוצן פּריבוילט גריד סיסטעם און קאַמפּאָונאַנץ, און ברענגען פּראַדזשעקס צו לעבן מיט שטאַרק דזשאַוואַסקריפּט פּלוגינס.
דערווייַל וו5.2.1 · אראפקאפיע · וו4.6.קס דאָקומענטן · כל ריליסיז
שפרינג גלייך אין בנין מיט Bootstrap-נוצן די CDN, ינסטאַלירן עס דורך פּעקל פאַרוואַלטער אָדער אראפקאפיע די מקור קאָד.
ינסטאַלירן באָאָטסטראַפּ ס מקור סאַסס און דזשאַוואַסקריפּט טעקעס דורך npm, RubyGems, Composer אָדער Meteor. פּעקל געראטן ינסטאָלז טאָן ניט אַרייַננעמען דאַקיומענטיישאַן אָדער אונדזער פול בויען סקריפּס. איר קענט אויך נוצן אונדזער npm מוסטער רעפּאָ צו געשווינד דזשענערייט אַ באָאָטסטראַפּ פּרויעקט דורך npm.
npm install [email protected]gem install bootstrap -v 5.2.1לייענען אונדזער ייַנמאָנטירונג דאָקומענטן פֿאַר מער אינפֿאָרמאַציע און נאָך פּעקל מאַנאַדזשערז.
ווען איר נאָר דאַרפֿן צו אַרייַננעמען Bootstrap ס קאַמפּיילד CSS אָדער JS, איר קענען נוצן jsDelivr . זען עס אין קאַמף מיט אונדזער פּשוט שנעל אָנהייב , אָדער בלעטער די ביישפילן צו דזשאַמפּסטאַרט דיין ווייַטער פּרויעקט. איר קענט אויך קלייַבן צו אַרייַננעמען פּאָפּער און אונדזער 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";
לערן מער וועגן אונדזער גלאבאלע סאַס אָפּציעס .
די יזיאַסט וועג צו קאַסטאַמייז 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 . מיר געבויט עס ווי אַ שטריך-פּאַקט סאַסס מאַפּע וואָס קענען זיין געשווינד און לייכט קאַסטאַמייזד. עס איז קיינמאָל געווען גרינגער צו לייגן, אַראָפּנעמען אָדער מאָדיפיצירן קיין נוצן קלאסן. מאַכן יוטילאַטיז אָפּרופיק, לייגן פּסעוודאָ-קלאַס וועריאַנץ און געבן זיי מנהג נעמען.
לערן מער וועגן יוטילאַטיז ויספאָרשן קאַסטאַמייזד קאַמפּאָונאַנץ
// 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. דזשאַוואַסקריפּט אין באָאָטסטראַפּ איז HTML-ערשטער, וואָס מיטל צו לייגן פּלוגינס איז ווי גרינג ווי צו לייגן dataאַטריביוץ. דאַרפֿן מער קאָנטראָל? אַרייַננעמען יחיד פּלוגינס פּראָגראַממאַטיקאַללי.
פארוואס שרייַבן מער דזשאַוואַסקריפּט ווען איר קענען שרייַבן HTML? קימאַט אַלע פון Bootstrap ס דזשאַוואַסקריפּט פּלוגינס האָבן אַ ערשטער-קלאַס דאַטן אַפּי, אַלאַוינג איר צו נוצן דזשאַוואַסקריפּט נאָר דורך אַדינג 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>
לערן מער וועגן אונדזער דזשאַוואַסקריפּט ווי מאַדזשולז און ניצן די פּראָגראַממאַטיק אַפּי .
Bootstrap פֿעיִקייטן אַ טוץ פּלוגינס אַז איר קענען פאַלן אין קיין פּרויעקט. פאַלן זיי אין אַמאָל, אָדער קלייַבן נאָר די וואָס איר דאַרפֿן.
Bootstrap Icons איז אַן אָפֿן מקור SVG בילדל ביבליאָטעק מיט איבער 1,500 גליפס, מיט מער צוגעלייגט יעדער מעלדונג. זיי זענען דיזיינד צו אַרבעטן אין קיין פּרויעקט, צי איר נוצן Bootstrap זיך אָדער נישט. ניצן זיי ווי SVGs אָדער ייקאַן פאַנץ - ביידע אָפּציעס געבן איר וועקטאָר סקיילינג און גרינג קוסטאָמיזאַטיאָן דורך CSS.
נעמען באָאָטסטראַפּ צו דער ווייַטער מדרגה מיט פּרעמיע טעמעס פֿון דער באַאַמטער באָאָטסטראַפּ טהעמעס מאַרק . טעמעס זענען געבויט אויף Bootstrap ווי זייער אייגענע עקסטענדעד פראַמעוואָרקס, רייַך מיט נייַע קאַמפּאָונאַנץ און פּלוגינס, דאַקיומענטיישאַן און שטאַרק בויען מכשירים.
