Erőteljes, bővíthető és funkciókban gazdag frontend eszközkészlet. Építsen és szabjon testre a Sass segítségével, használjon előre elkészített grid rendszert és összetevőket, és keltse életre a projekteket hatékony JavaScript beépülő modulokkal.
Jelenleg v5.2.1 · Letöltés · v4.6.x dokumentumok · Minden kiadás
Ugorjon közvetlenül az építkezésbe a Bootstrap segítségével – használja a CDN-t, telepítse a csomagkezelőn keresztül, vagy töltse le a forráskódot.
Telepítse a Bootstrap forráskódú Sass és JavaScript fájljait npm, RubyGems, Composer vagy Meteor segítségével. A csomagként kezelt telepítések nem tartalmazzák a dokumentációt vagy a teljes összeállítási szkriptjeinket. Használhatja npm sablontárunkat is , hogy gyorsan generáljon Bootstrap projektet az npm segítségével.
npm install [email protected]gem install bootstrap -v 5.2.1További információért és további csomagkezelőkért olvassa el telepítési dokumentumainkat .
Ha csak a Bootstrap által lefordított CSS-t vagy JS-t kell megadnia, használhatja a jsDelivr-t . Tekintse meg működés közben az egyszerű gyorsindítónkkal , vagy böngésszen a példák között a következő projekt elindításához. Azt is választhatja, hogy a Poppert és a JS-ünket külön- külön is felveszi .
<!-- 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>
A Bootstrap a Sass-t használja a moduláris és testreszabható architektúrához. Csak a szükséges összetevőket importálja, engedélyezze a globális beállításokat, például a színátmeneteket és az árnyékokat, és írja meg saját CSS-jét változóinkkal, térképeinkkel, függvényeinkkel és mixinjeinkkel.
Importáljon egy stíluslapot, és már indulhat is a versenyeken CSS-ünk minden funkciójával.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Tudjon meg többet globális Sass opcióinkról .
A Bootstrap testreszabásának legegyszerűbb módja – csak a szükséges CSS-t használja.
// 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";
További információ a Bootstrap használatáról a Sass-szal .
A Bootstrap 5 minden kiadással fejlődik, hogy jobban ki tudja használni a CSS-változókat a globális témastílusokhoz, az egyes összetevőkhöz és még a segédprogramokhoz is. Több tucat változót biztosítunk színekhez, betűstílusokhoz és még sok máshoz olyan :rootszinten, hogy bárhol használható legyen. Az összetevők és segédprogramok esetében a CSS-változók a megfelelő osztályba vannak besorolva, és könnyen módosíthatók.
Használja bármelyik globális :rootváltozónkat új stílusok írásához. A CSS-változók a var(--bs-variableName)szintaxist használják, és örökölhetik őket a gyermekelemek.
.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);
}A globális, komponens- vagy segédprogramosztály-változók felülbírálásával tetszés szerint testreszabhatja a Bootstrapet. Nem kell minden szabályt újra deklarálni, csak egy új változó értékét.
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;
}A Bootstrap 5 újdonsága, hogy segédprogramjainkat mostantól az Utility API generálja . Funkciókkal teli Sass térképként építettük, amely gyorsan és egyszerűen testreszabható. Soha nem volt ilyen egyszerű a segédprogramosztályok hozzáadása, eltávolítása vagy módosítása. Tegye a segédprogramokat reagálóvá, adjon hozzá pszeudoosztályú változatokat, és adjon nekik egyéni neveket.
Tudjon meg többet a segédprogramokról Fedezze fel a testreszabott összetevőket
// 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,
)
)
);
Könnyen hozzáadhat átkapcsolható rejtett elemeket, modális és offcanvas menüket, felugró ablakokat és eszköztippeket, és még sok minden mást – mindezt jQuery nélkül. A Bootstrap JavaScriptje a HTML-elsõ, ami azt jelenti, hogy a bõvítmények hozzáadása ugyanolyan egyszerû, mint az dataattribútumok hozzáadása. Több ellenőrzésre van szüksége? Az egyes beépülő modulok programozottan szerepeltethetők.
Miért írjon több JavaScriptet, ha írhat HTML-t? A Bootstrap szinte mindegyik JavaScript-bővítménye első osztályú adat API-t tartalmaz, amely lehetővé teszi a JavaScript használatát csupán dataattribútumok hozzáadásával.
<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>
Tudjon meg többet a JavaScript modulokról és a programozott API használatáról .
A Bootstrap egy tucat beépülő modult tartalmaz, amelyeket bármelyik projektbe beilleszthet. Dobja be őket egyszerre, vagy válassza ki azokat, amelyekre szüksége van.
A Bootstrap Icons egy nyílt forráskódú SVG ikonkönyvtár, amely több mint 1500 karakterjelet tartalmaz, és minden kiadáshoz több hozzáadódik. Úgy tervezték, hogy bármilyen projektben működjenek, függetlenül attól, hogy magát a Bootstrapet használja-e vagy sem. Használja őket SVG-ként vagy ikon-betűtípusként – mindkét lehetőség vektorméretezést és egyszerű testreszabást tesz lehetővé CSS-en keresztül.
Emelje a Bootstrapet a következő szintre a hivatalos Bootstrap Themes piactér prémium témáival . A témák a Bootstrap-re épülnek saját kiterjesztett keretrendszerükként, gazdagon új összetevőkkel és beépülő modulokkal, dokumentációval és hatékony építési eszközökkel.
