Paketa e veglave të fuqishme, të zgjerueshme dhe të mbushura me veçori. Ndërtoni dhe personalizoni me Sass, përdorni sistemin dhe komponentët e parandërtuar të rrjetit dhe jepni në jetë projektet me shtojcat e fuqishme JavaScript.
Aktualisht v5.2.1 · Shkarko · dokumente v4.6.x · Të gjitha publikimet
Shkoni menjëherë në ndërtim me Bootstrap—përdorni CDN-në, instaloni atë nëpërmjet menaxherit të paketave ose shkarkoni kodin burimor.
Instaloni skedarët burimor Sass dhe JavaScript të Bootstrap përmes npm, RubyGems, Composer ose Meteor. Instalimet e menaxhuara nga paketa nuk përfshijnë dokumentacion ose skriptet tona të plota të ndërtimit. Ju gjithashtu mund të përdorni repon tonë të modelit npm për të gjeneruar shpejt një projekt Bootstrap nëpërmjet npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lexoni dokumentet tona të instalimit për më shumë informacion dhe menaxherët shtesë të paketave.
Kur ju duhet vetëm të përfshini CSS ose JS të përpiluar të Bootstrap, mund të përdorni jsDelivr . Shikojeni atë në veprim me fillimin tonë të thjeshtë të shpejtë , ose shfletoni shembujt për të nisur projektin tuaj të ardhshëm. Ju gjithashtu mund të zgjidhni të përfshini Popper dhe JS-në tonë veç e veç .
<!-- 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 përdor Sass për një arkitekturë modulare dhe të personalizueshme. Importoni vetëm komponentët që ju nevojiten, aktivizoni opsionet globale si gradientët dhe hijet dhe shkruani CSS-në tuaj me variablat, hartat, funksionet dhe miksat tona.
Importoni një fletë stili dhe do të shkoni në garat me çdo veçori të CSS tonë.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Mësoni më shumë rreth opsioneve tona globale Sass .
Mënyra më e lehtë për të personalizuar Bootstrap—përfshi vetëm CSS që ju nevojitet.
// 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";
Mësoni më shumë rreth përdorimit të Bootstrap me Sass .
Bootstrap 5 po zhvillohet me çdo lëshim për të përdorur më mirë variablat CSS për stilet e temave globale, komponentët individualë dhe madje edhe shërbimet. Ne ofrojmë dhjetëra variabla për ngjyrat, stilet e shkronjave dhe më shumë në një :rootnivel për t'u përdorur kudo. Në komponentët dhe shërbimet, variablat CSS janë të shtrirë në klasën përkatëse dhe mund të modifikohen lehtësisht.
Përdorni ndonjë nga ndryshoret tona globale:root për të shkruar stile të reja. Variablat CSS përdorin var(--bs-variableName)sintaksën dhe mund të trashëgohen nga elementët e fëmijëve.
.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);
}Anuloni variablat e klasës globale, përbërëse ose të shërbimeve për të personalizuar Bootstrap ashtu siç dëshironi. Nuk ka nevojë të rideklaroni çdo rregull, vetëm një vlerë të re variabël.
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;
}E re në Bootstrap 5, shërbimet tona tani krijohen nga API-ja jonë e Utility . Ne e ndërtuam atë si një hartë Sass të mbushur me veçori që mund të personalizohet shpejt dhe lehtë. Nuk ka qenë kurrë më e lehtë për të shtuar, hequr ose modifikuar ndonjë klasë të shërbimeve. Bëni shërbimet të përgjegjshme, shtoni variante pseudo-klase dhe jepini emra të personalizuar.
Mësoni më shumë rreth shërbimeve Eksploroni komponentët e personalizuar
// 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,
)
)
);
Shtoni me lehtësi elemente të fshehura të ndërrueshme, modale dhe meny jashtë kanavacë, popover dhe këshilla veglash, dhe shumë më tepër—të gjitha pa jQuery. JavaScript në Bootstrap është i pari HTML, që do të thotë se shtimi i shtojcave është po aq i lehtë sa shtimi datai atributeve. Keni nevojë për më shumë kontroll? Përfshini shtojcat individuale në mënyrë programore.
Pse të shkruani më shumë JavaScript kur mund të shkruani HTML? Pothuajse të gjitha shtojcat JavaScript të Bootstrap kanë një API të të dhënave të klasit të parë, duke ju lejuar të përdorni JavaScript vetëm duke shtuar dataatribute.
<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>
Mësoni më shumë rreth JavaScript-it tonë si module dhe përdorimit të API-së programatike .
Bootstrap përmban një duzinë shtojcash që mund t'i vendosni në çdo projekt. Hidhini të gjitha menjëherë, ose zgjidhni vetëm ato që ju nevojiten.
Bootstrap Icons është një bibliotekë ikonash me burim të hapur SVG që përmban mbi 1500 glife, me më shumë të shtuara çdo version. Ato janë krijuar për të punuar në çdo projekt, pavarësisht nëse përdorni vetë Bootstrap apo jo. Përdorini ato si SVG ose shkronja ikonash—të dyja opsionet ju japin shkallëzim vektorial dhe personalizim të lehtë nëpërmjet CSS.
Merrni Bootstrap në nivelin tjetër me tema premium nga tregu zyrtar i Bootstrap Themes . Temat janë ndërtuar në Bootstrap si kornizat e tyre të zgjeruara, të pasura me komponentë dhe shtojca të reja, dokumentacion dhe mjete të fuqishme ndërtimi.
