Wiesselt op den Haaptinhalt
Check
Nei am v5.2 CSS Variablen, reaktiounsfäeger Offcanvas, nei Utilities, a méi! Bootstrap

Build séier, reaktiounsfäeger Siten mat Bootstrap

Mächteg, erweiderbar a Feature-gepackt Frontend Toolkit. Bauen a personaliséiere mat Sass, benotzt prebuilt Gittersystem a Komponenten, a bréngt Projeten zum Liewen mat mächtege JavaScript Plugins.

npm i [email protected]
Liest d'Dokumenter

Momentan v5.2.1 · Eroflueden · v4.6.x Dokumenter · All Verëffentlechungen

Fänkt un wéi Dir wëllt

Gitt direkt an d'Gebai mat Bootstrap - benotzt den CDN, installéiert et iwwer Package Manager, oder luet de Quellcode erof.

Liest Installatiounsdokumenter

Installéiert iwwer Package Manager

Installéiert Bootstrap Quell Sass a JavaScript Dateien iwwer npm, RubyGems, Composer oder Meteor. Package geréiert Installatiounen enthalen keng Dokumentatioun oder eis voll Build Scripten. Dir kënnt och eis npm Template Repo benotzen fir séier e Bootstrap Projet iwwer npm ze generéieren.

npm install [email protected]
gem install bootstrap -v 5.2.1

Liest eis Installatiounsdokumenter fir méi Informatioun an zousätzlech Packagemanager.

Enthält iwwer CDN

Wann Dir nëmmen Bootstrap's kompiléierte CSS oder JS enthält, kënnt Dir jsDelivr benotzen . Kuckt et an Aktioun mat eisem einfache Schnellstart , oder kuckt d'Beispiller fir Ären nächste Projet ze sprangen. Dir kënnt och wielen Popper an eis JS separat opzehuelen .

<!-- 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>

Liest eis Startguiden

Gitt e Sprong op d'Bootstrap Quelldateien an engem neie Projet mat eisen offiziellen Guiden abegraff.

Webpack Pak Vite

Personaliséiert alles mat Sass

Bootstrap benotzt Sass fir eng modulär an personaliséierbar Architektur. Importéiert nëmmen déi Komponenten déi Dir braucht, aktivéiert global Optiounen wéi Gradienten a Schatten, a schreift Ären eegene CSS mat eise Variablen, Kaarten, Funktiounen a Mixins.

Léiere méi iwwer Personnalisatioun

Ëmfaasst all Bootstrap's Sass

Importéiert ee Stylesheet an Dir sidd op d'Course mat all Feature vun eiser CSS.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Léiert méi iwwer eis global Sass Optiounen .

Maacht mat wat Dir braucht

Deen einfachste Wee fir Bootstrap ze personaliséieren - enthält nëmmen den CSS deen Dir braucht.

// 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";

Léiert méi iwwer d'Benotzung vu Bootstrap mat Sass .

Bauen a verlängeren an Echtzäit mat CSS Variablen

Bootstrap 5 evoluéiert mat all Verëffentlechung fir besser CSS Variablen fir global Thema Stiler, eenzel Komponenten a souguer Utilities ze benotzen. Mir bidden Dosende vu Variablen fir Faarwen, Schrëftstiler a méi op engem :rootNiveau fir iwwerall ze benotzen. Op Komponenten an Utilities ginn CSS Variablen op déi entspriechend Klass scoped a kënne ganz einfach geännert ginn.

Léiert méi iwwer CSS Variablen

Benotzt CSS Variablen

Benotzt eng vun eise globalen :rootVariablen fir nei Stiler ze schreiwen. CSS Variablen benotzen d' var(--bs-variableName)Syntax a kënne vu Kannerelementer ierflecher ginn.

.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);
}

Personnalisatioun iwwer CSS Variablen

Iwwerdribblen global, Komponent oder Utility Klass Variablen fir Bootstrap ze personaliséieren just wéi Dir wëllt. Kee Grond fir all Regel nei ze deklaréieren, just en neie variabelen Wäert.

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;
}

Komponenten, treffen d'Utility API

Nei am Bootstrap 5, eis Utilities ginn elo vun eiser Utility API generéiert . Mir hunn et als Feature-gepackt Sass Kaart gebaut déi séier an einfach personaliséiert ka ginn. Et war nach ni méi einfach all Utility-Klassen ze addéieren, ze läschen oder z'änneren. Maachen Utilities reaktiounsfäeger, füügt Pseudo-Klass Varianten, a gitt hinnen personaliséiert Nimm.

Léiert méi iwwer Utilities Entdeckt personaliséiert Komponenten

Schnell personaliséiere 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,
    )
  )
);

Mächteg JavaScript Plugins ouni jQuery

Füügt einfach togglebar verstoppt Elementer, Modalen an Offcanvas Menüen, Popovers an Tooltips, a sou vill méi - alles ouni jQuery. JavaScript am Bootstrap ass HTML-first, dat heescht Plugins derbäizefügen ass sou einfach wéi dataAttributer derbäi. Braucht Dir méi Kontroll? Individuell Plugins programmatesch enthalen.

Léiert méi iwwer Bootstrap JavaScript

Data Attribut API

Firwat méi JavaScript schreiwen wann Dir HTML kënnt schreiwen? Bal all Bootstrap's JavaScript Plugins hunn eng éischtklasseg Daten API, wat Iech erlaabt JavaScript ze benotzen just andeems Dir dataAttributer bäidréit.

<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>

Léiert méi iwwer eis JavaScript als Moduler a benotzt d'programmatesch API .

Iwwergräifend Set vu Plugins

Bootstrap huet eng Dutzend Plugins déi Dir an all Projet drop kënnt. Drop se all op eemol, oder wielt just déi Dir braucht.

Alarm

Weist a verstoppt Alarmmeldungen un Är Benotzer.

Knäppchen

Programmatesch kontrolléiert den aktiven Zoustand fir Knäppercher.

Karussell

Füügt Diashows op all Säit, inklusiv Ënnerstëtzung fir Crossfade.

Zesummebroch

Erweidert an Zesummebroch Beräicher vun Inhalt, oder schafen Akkordeonen.

Fale loossen

Erstellt Menüe vu Linken, Aktiounen, Formen a méi.

Modal

Füügt flexibel a reaktiounsfäeger Dialoge fir Äre Projet.

Offcanvas

Bauen a wiesselen verstoppte Sidebaren op all Säit.

Popover

Erstellt personaliséiert Iwwerlagerungen. Gebaut op Popper.

Scrollspy

Aktualiséierung automatesch aktiv nav Linken baséiert op Säit Scroll.

Tab

Erlaabt Bootstrap nav Komponenten fir Inhalter ze wiesselen.

Toast

Show a verstoppt Notifikatiounen fir Är Besucher.

Tooltip

Ersetzen Browser Tooltips mat personaliséierten. Gebaut op Popper.

Personaliséiert et mat Bootstrap Icons

Bootstrap Icons ass eng Open Source SVG Ikon Bibliothéik mat iwwer 1,500 Glyphen, mat méi dobäi all Verëffentlechung. Si sinn entwéckelt fir an all Projet ze schaffen, egal ob Dir Bootstrap selwer benotzt oder net. Benotzt se als SVGs oder Ikon Schrëften - béid Optiounen ginn Iech Vektorskaléierung an einfach Personnalisatioun iwwer CSS.

Kritt Bootstrap Ikonen

Bootstrap Ikonen

Maacht et Är mat offiziellen Bootstrap Themen

Huelt Bootstrap op den nächsten Niveau mat Premium Themen vun der offizieller Bootstrap Themes Maartplaz . Themen sinn op Bootstrap als hir eege erweidert Kaderen gebaut, räich mat neie Komponenten a Plugins, Dokumentatioun a mächtege Build Tools.

Browst Bootstrap Themen

Bootstrap Themen