Võimas, laiendatav ja paljude funktsioonidega kasutajaliidese tööriistakomplekt. Ehitage ja kohandage Sassiga, kasutage eelehitatud võrgusüsteemi ja komponente ning äratage projektid võimsate JavaScripti pistikprogrammide abil ellu.
Praegu v5.2.1 · Laadi alla · v4.6.x dokumendid · Kõik väljaanded
Hüppa otse Bootstrapiga hoonesse – kasutage CDN-i, installige see paketihalduri kaudu või laadige alla lähtekood.
Installige Bootstrapi lähtekoodiga Sassi ja JavaScripti failid npm, RubyGemsi, Composeri või Meteori kaudu. Paketthallatud installid ei sisalda dokumentatsiooni ega meie täielikke ehitusskripte. Võite kasutada ka meie npm malli repot , et npm kaudu kiiresti Bootstrapi projekt luua.
npm install [email protected]gem install bootstrap -v 5.2.1Lisateabe ja täiendavate paketihaldurite saamiseks lugege meie installidokumente .
Kui peate kaasama ainult Bootstrapi kompileeritud CSS-i või JS-i, võite kasutada jsDelivr . Vaadake seda meie lihtsa kiirkäivituse abil või sirvige näiteid järgmise projekti käivitamiseks. Võite lisada ka Popperi ja meie JS-i eraldi .
<!-- 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 kasutab Sassi modulaarse ja kohandatava arhitektuuri jaoks. Importige ainult vajalikud komponendid, lubage globaalsed valikud, nagu gradiendid ja varjud, ning kirjutage meie muutujate, kaartide, funktsioonide ja segudega oma CSS.
Importige üks stiilitabel ja saate meie CSS-i kõigi funktsioonidega võidu sõita.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lisateavet meie ülemaailmsete Sassi valikute kohta .
Lihtsaim viis Bootstrapi kohandamiseks – kaasake ainult vajalik 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";
Lisateave Bootstrapi kasutamise kohta koos Sassiga .
Bootstrap 5 areneb iga väljalaskega, et CSS-i muutujaid paremini kasutada globaalsete teemastiilide, üksikute komponentide ja isegi utiliitide jaoks. Pakume kümneid muutujaid värvide, kirjastiilide ja muu jaoks igal :roottasemel kasutamiseks. Komponentide ja utiliitide puhul on CSS-i muutujad reguleeritud vastavasse klassi ja neid saab hõlpsasti muuta.
Kasutage uute stiilide kirjutamiseks mis tahes meie globaalseid :rootmuutujaid . CSS-i muutujad kasutavad var(--bs-variableName)süntaksit ja neid võivad pärida alamelemendid.
.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);
}Alistage globaalsed, komponendi- või utiliidiklassi muutujad, et kohandada Bootstrapi just nii, nagu soovite. Iga reeglit pole vaja uuesti deklareerida, piisab uue muutuja väärtusest.
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;
}Uus Bootstrap 5-s – meie utiliidid genereerib nüüd meie Utility API . Koostasime selle funktsioonidega Sassi kaardina, mida saab kiiresti ja lihtsalt kohandada. Utiliidiklasside lisamine, eemaldamine või muutmine pole kunagi olnud lihtsam. Muutke utiliidid tundlikuks, lisage pseudoklassi variante ja andke neile kohandatud nimed.
Lisateave kommunaalteenuste kohta Uurige kohandatud komponente
// 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,
)
)
);
Lisage hõlpsalt sisse- ja väljalülitatavaid peidetud elemente, modaale ja väliseid menüüsid, hüpikaknaid ja tööriistavihjeid ning palju muud – seda kõike ilma jQueryta. JavaScript on Bootstrapis esmalt HTML-iga, mis tähendab, et pistikprogrammide lisamine on sama lihtne kui dataatribuutide lisamine. Kas vajate rohkem kontrolli? Kaasake programmiliselt üksikud pistikprogrammid.
Miks kirjutada rohkem JavaScripti, kui saate kirjutada HTML-i? Peaaegu kõik Bootstrapi JavaScripti pistikprogrammid sisaldavad esmaklassilist andmete API-t, mis võimaldab teil JavaScripti kasutada lihtsalt dataatribuutide lisamisega.
<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>
Lisateave meie JavaScripti kui moodulite ja programmilise API kasutamise kohta .
Bootstrapil on kümmekond pistikprogrammi, mille saate igasse projekti lisada. Pange need kõik korraga sisse või valige ainult need, mida vajate.
Bootstrap Icons on avatud lähtekoodiga SVG ikooniteek, mis sisaldab üle 1500 glüüfi ja iga väljalasega lisatakse rohkem. Need on loodud töötama igas projektis, olenemata sellest, kas kasutate Bootstrapi ennast või mitte. Kasutage neid SVG-de või ikoonifondidena – mõlemad valikud võimaldavad vektori skaleerimist ja hõlpsat kohandamist CSS-i kaudu.
Viige Bootstrap järgmisele tasemele ametliku Bootstrapi teemade turu esmaklassiliste teemadega . Teemad on üles ehitatud Bootstrapile nende enda laiendatud raamistikuna, mis on rikas uute komponentide ja pistikprogrammide, dokumentatsiooni ja võimsate ehitustööriistadega.
