Tehokas, laajennettava ja monipuolinen käyttöliittymätyökalusarja. Rakenna ja mukauta Sassin avulla, käytä valmiiksi rakennettua grid-järjestelmää ja komponentteja ja herätä projektit henkiin tehokkailla JavaScript-laajennuksilla.
Tällä hetkellä v5.2.1 · Lataa · v4.6.x docs · Kaikki julkaisut
Siirry suoraan rakentamiseen Bootstrapin avulla – käytä CDN:ää, asenna se paketinhallinnan kautta tai lataa lähdekoodi.
Asenna Bootstrapin Sass- ja JavaScript-lähdetiedostot npm:n, RubyGemsin, Composerin tai Meteorin kautta. Pakettihallitut asennukset eivät sisällä dokumentaatiota tai täydellisiä koontiskriptejämme. Voit myös käyttää npm-mallivarastoamme luodaksesi nopeasti Bootstrap-projektin npm:n kautta.
npm install [email protected]gem install bootstrap -v 5.2.1Lue asennusdokumenteistamme lisätietoja ja muita paketinhallintaohjelmia.
Kun sinun tarvitsee vain sisällyttää Bootstrapin käännetty CSS tai JS, voit käyttää jsDelivr . Katso se toiminnassa yksinkertaisella pikakäynnistyksellämme tai selaa esimerkkejä aloittaaksesi seuraavan projektisi. Voit myös sisällyttää Popperin ja JS:n erikseen .
<!-- 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>
Ota Bootstrapin lähdetiedostot mukaan uuteen projektiin virallisten oppaidemme avulla.
Bootstrap käyttää Sassia modulaariseen ja muokattavaan arkkitehtuuriin. Tuo vain tarvitsemasi komponentit, ota käyttöön yleiset vaihtoehdot, kuten liukuvärit ja varjot, ja kirjoita oma CSS:si muuttujien, karttojen, funktioiden ja mixinien avulla.
Tuo yksi tyylitaulukko ja olet mukana kilpailuissa kaikilla CSS-ominaisuuksillamme.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lue lisää maailmanlaajuisista Sass-vaihtoehdoistamme .
Helpoin tapa mukauttaa Bootstrapia – sisällytä vain tarvitsemasi 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";
Lue lisää Bootstrapin käyttämisestä Sassin kanssa .
Bootstrap 5 kehittyy jokaisen julkaisun myötä hyödyntämään paremmin CSS-muuttujia maailmanlaajuisissa teematyyleissä, yksittäisissä komponenteissa ja jopa apuohjelmissa. Tarjoamme kymmeniä muuttujia väreille, kirjasintyyleille ja muulle :roottasolle käytettäväksi missä tahansa. Komponenteissa ja apuohjelmissa CSS-muuttujat on rajattu asiaankuuluvaan luokkaan ja niitä voidaan helposti muokata.
Käytä mitä tahansa globaaleista :rootmuuttujistamme uusien tyylien kirjoittamiseen. CSS-muuttujat käyttävät var(--bs-variableName)syntaksia, ja lapsielementit voivat periä ne.
.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);
}Ohita globaalit, komponentti- tai apuohjelman muuttujat mukauttaaksesi Bootstrapia haluamallasi tavalla. Jokaista sääntöä ei tarvitse ilmoittaa uudelleen, vain uusi muuttujan arvo.
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;
}Uutta Bootstrap 5:ssä, apuohjelmamme luovat nyt Utility API . Rakensimme sen monipuoliseksi Sass-kartaksi, jota voidaan muokata nopeasti ja helposti. Ei ole koskaan ollut helpompaa lisätä, poistaa tai muokata mitään hyödyllisyysluokkia. Tee apuohjelmista reagoivia, lisää pseudoluokkamuunnelmia ja anna niille mukautettuja nimiä.
Lisätietoja apuohjelmista Tutustu räätälöityihin komponentteihin
// 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,
)
)
);
Lisää helposti vaihdettavia piiloelementtejä, modaaleja ja offcanvas-valikoita, ponnahdusikkunoita ja työkaluvihjeitä ja paljon muuta – kaikki ilman jQueryä. Bootstrapin JavaScript on HTML-ensimmäinen, mikä tarkoittaa, että laajennusten lisääminen on yhtä helppoa kuin dataattribuuttien lisääminen. Tarvitsetko lisää valvontaa? Sisällytä yksittäisiä laajennuksia ohjelmallisesti.
Miksi kirjoittaa enemmän JavaScriptiä, kun voit kirjoittaa HTML:ää? Lähes kaikissa Bootstrapin JavaScript-laajennuksissa on ensiluokkainen datasovellusliittymä, jonka avulla voit käyttää JavaScriptiä vain lisäämällä dataattribuutteja.
<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>
Lue lisää JavaScriptistä moduuleina ja ohjelmallisen sovellusliittymän käyttämisestä .
Bootstrapissa on tusina laajennusta, jotka voit pudottaa mihin tahansa projektiin. Pudota ne kaikki kerralla tai valitse vain tarvitsemasi.
Bootstrap Icons on avoimen lähdekoodin SVG-kuvakekirjasto, jossa on yli 1 500 glyfiä ja jokaisessa julkaisussa lisää. Ne on suunniteltu toimimaan kaikissa projekteissa riippumatta siitä, käytätkö itse Bootstrapia tai et. Käytä niitä SVG-tiedostoina tai kuvakefonteina – molemmat vaihtoehdot antavat sinulle vektoriskaalauksen ja helpon mukauttamisen CSS:n kautta.
Vie Bootstrap uudelle tasolle premium-teemoilla viralliselta Bootstrap Themes -markkinapaikalta . Teemat on rakennettu Bootstrapiin omina laajennettuina kehyksinä, jotka sisältävät runsaasti uusia komponentteja ja laajennuksia, dokumentaatiota ja tehokkaita rakennustyökaluja.
