Հզոր, ընդարձակելի և հագեցած առջևի գործիքակազմ: Կառուցեք և հարմարեցրեք Sass-ի միջոցով, օգտագործեք նախապես կառուցված ցանցային համակարգը և բաղադրիչները և կյանքի կոչեք նախագծերը հզոր JavaScript հավելվածների միջոցով:
Ներկայումս v5.2.1 · Ներբեռնել · v4.6.x փաստաթղթեր · Բոլոր թողարկումները
Անցեք անմիջապես Bootstrap-ով շենք՝ օգտագործեք CDN-ը, տեղադրեք այն փաթեթի կառավարչի միջոցով կամ ներբեռնեք սկզբնական կոդը:
Տեղադրեք Bootstrap-ի աղբյուր Sass և JavaScript ֆայլերը npm, RubyGems, Composer կամ Meteor-ի միջոցով: Փաթեթի կառավարվող տեղադրումները չեն ներառում փաստաթղթեր կամ մեր ամբողջական կառուցման սցենարներ: Դուք կարող եք նաև օգտագործել մեր npm ձևանմուշների ռեպո -ն՝ npm-ի միջոցով արագ Bootstrap նախագիծ ստեղծելու համար:
npm install [email protected]gem install bootstrap -v 5.2.1Լրացուցիչ տեղեկությունների և փաթեթների լրացուցիչ կառավարիչների համար կարդացեք մեր տեղադրման փաստաթղթերը :
Երբ ձեզ միայն անհրաժեշտ է ներառել Bootstrap-ի կազմված CSS կամ JS, կարող եք օգտագործել 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";
Իմացեք ավելին Sass-ով Bootstrap-ի օգտագործման մասին :
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,
)
)
);
Հեշտությամբ ավելացրեք փոփոխվող թաքնված տարրեր, մոդալներ և offcanvas մենյուներ, popover-ներ և գործիքների հուշումներ և շատ ավելին՝ բոլորն առանց jQuery-ի: JavaScript-ը Bootstrap-ում HTML-առաջինն է, ինչը նշանակում է, որ փլագիններ ավելացնելը նույնքան հեշտ է, որքան dataատրիբուտներ ավելացնելը: Ավելի շատ վերահսկողության կարիք ունե՞ք: Ներառեք առանձին պլագիններ ծրագրային առումով:
Ինչու՞ գրել ավելի շատ JavaScript, երբ կարող եք գրել HTML: Bootstrap-ի գրեթե բոլոր JavaScript պլագիններն ունեն առաջին կարգի տվյալների 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 պատկերակների գրադարան է, որն իր մեջ պարունակում է ավելի քան 1500 հոլով, և յուրաքանչյուր թողարկում ավելացվում է ավելին: Դրանք նախագծված են ցանկացած նախագծում աշխատելու համար, անկախ նրանից՝ դուք օգտագործում եք Bootstrap-ը, թե ոչ: Օգտագործեք դրանք որպես SVG կամ պատկերակների տառատեսակներ. երկու տարբերակներն էլ ձեզ հնարավորություն են տալիս վեկտորի մասշտաբավորում և հեշտ հարմարեցում CSS-ի միջոցով:
Բարձրացրեք Bootstrap-ին հաջորդ մակարդակ՝ պրեմիում թեմաներով Bootstrap Themes պաշտոնական շուկայից : Թեմաները կառուցված են Bootstrap-ի վրա՝ որպես իրենց սեփական ընդլայնված շրջանակներ, որոնք հարուստ են նոր բաղադրիչներով և պլագիններով, փաստաթղթերով և հզոր կառուցման գործիքներով:
