Leistungsstarkes, erweiterbares und funktionsreiches Frontend-Toolkit. Erstellen und passen Sie mit Sass an, verwenden Sie vorgefertigte Rastersysteme und Komponenten und erwecken Sie Projekte mit leistungsstarken JavaScript-Plug-ins zum Leben.
Derzeit v5.2.1 · Download · v4.6.x-Dokumente · Alle Freigaben
Steigen Sie mit Bootstrap direkt in die Entwicklung ein – verwenden Sie das CDN, installieren Sie es über den Paketmanager oder laden Sie den Quellcode herunter.
Installieren Sie die Sass- und JavaScript-Quelldateien von Bootstrap über npm, RubyGems, Composer oder Meteor. Paketverwaltete Installationen enthalten keine Dokumentation oder unsere vollständigen Build-Skripts. Sie können auch unser npm-Vorlagen-Repo verwenden , um schnell ein Bootstrap-Projekt über npm zu generieren.
npm install [email protected]gem install bootstrap -v 5.2.1Lesen Sie unsere Installationsdokumente für weitere Informationen und zusätzliche Paketmanager.
Wenn Sie nur das kompilierte CSS oder JS von Bootstrap einbinden müssen, können Sie jsDelivr verwenden . Sehen Sie es mit unserem einfachen Schnellstart in Aktion oder sehen Sie sich die Beispiele an, um Ihr nächstes Projekt zu starten. Sie können Popper und unser JS auch separat hinzufügen .
<!-- 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 nutzt Sass für eine modulare und anpassbare Architektur. Importieren Sie nur die Komponenten, die Sie benötigen, aktivieren Sie globale Optionen wie Verläufe und Schatten und schreiben Sie Ihr eigenes CSS mit unseren Variablen, Karten, Funktionen und Mixins.
Importieren Sie ein Stylesheet und schon können Sie mit allen Funktionen unseres CSS loslegen.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Erfahren Sie mehr über unsere globalen Sass-Optionen .
Der einfachste Weg, Bootstrap anzupassen – fügen Sie nur das benötigte CSS hinzu.
// 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";
Erfahren Sie mehr über die Verwendung von Bootstrap mit Sass .
Bootstrap 5 wird mit jeder Version weiterentwickelt, um CSS-Variablen für globale Themenstile, einzelne Komponenten und sogar Dienstprogramme besser zu nutzen. Wir bieten Dutzende von Variablen für Farben, Schriftstile und mehr auf einer :rootEbene, die überall verwendet werden kann. Bei Komponenten und Dienstprogrammen sind CSS-Variablen auf die relevante Klasse beschränkt und können einfach geändert werden.
Verwenden Sie eine unserer globalen :rootVariablen , um neue Stile zu schreiben. CSS-Variablen verwenden die var(--bs-variableName)Syntax und können von untergeordneten Elementen geerbt werden.
.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);
}Überschreiben Sie globale, Komponenten- oder Utility-Klassenvariablen, um Bootstrap nach Ihren Wünschen anzupassen. Sie müssen nicht jede Regel neu deklarieren, sondern nur einen neuen Variablenwert.
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;
}Neu in Bootstrap 5, unsere Dienstprogramme werden jetzt von unserer Dienstprogramm-API generiert . Wir haben es als funktionsreiche Sass-Karte gebaut, die schnell und einfach angepasst werden kann. Es war noch nie einfacher, Utility-Klassen hinzuzufügen, zu entfernen oder zu ändern. Machen Sie Dienstprogramme reaktionsfähig, fügen Sie Pseudo-Klassenvarianten hinzu und geben Sie ihnen benutzerdefinierte Namen.
Erfahren Sie mehr über Dienstprogramme Entdecken Sie kundenspezifische Komponenten
// 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,
)
)
);
Fügen Sie einfach umschaltbare versteckte Elemente, Modals und Offcanvas-Menüs, Popovers und Tooltips und vieles mehr hinzu – alles ohne jQuery. JavaScript in Bootstrap ist HTML-first, was bedeutet, dass das Hinzufügen von Plugins so einfach ist wie das Hinzufügen von dataAttributen. Benötigen Sie mehr Kontrolle? Einzelne Plugins programmgesteuert einbinden.
Warum mehr JavaScript schreiben, wenn Sie HTML schreiben können? Fast alle JavaScript-Plugins von Bootstrap verfügen über eine erstklassige Daten-API, mit der Sie JavaScript verwenden können, indem Sie einfach dataAttribute hinzufügen.
<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>
Erfahren Sie mehr über unser JavaScript als Module und die Verwendung der programmatischen API .
Bootstrap bietet ein Dutzend Plugins, die Sie in jedes Projekt einfügen können. Geben Sie sie alle auf einmal ein oder wählen Sie nur die aus, die Sie benötigen.
Bootstrap Icons ist eine Open-Source-SVG-Symbolbibliothek mit über 1.500 Glyphen, wobei mit jeder Version mehr hinzugefügt wird. Sie sind so konzipiert, dass sie in jedem Projekt funktionieren, unabhängig davon, ob Sie Bootstrap selbst verwenden oder nicht. Verwenden Sie sie als SVGs oder Symbolschriften – beide Optionen bieten Ihnen Vektorskalierung und einfache Anpassung über CSS.
Bringen Sie Bootstrap mit Premium-Designs vom offiziellen Marktplatz für Bootstrap-Designs auf die nächste Stufe . Themes basieren auf Bootstrap als eigenen erweiterten Frameworks, reich an neuen Komponenten und Plugins, Dokumentation und leistungsstarken Build-Tools.
