Passà à u cuntenutu principale
Check
Novu in v5.2 Variabili CSS, offcanvas responsive, novi utilità, è più! Bootstrap

Custruite siti veloci è responsivi cù Bootstrap

Toolkit di frontend putente, estensibile è riccu di funzioni. Custruite è persunalizà cù Sass, utilizate un sistema di griglia predefinitu è ​​cumpunenti, è dà vita à i prughjetti cù plugins JavaScript putenti.

npm i [email protected]
Leghjite i documenti

Attualmente v5.2.1 · Scaricate · v4.6.x docs · Tutte e versioni

Cuminciate cumu vulete

Saltate direttamente in a custruzzione cù Bootstrap - utilizate u CDN, installate via u gestore di pacchetti, o scaricate u codice fonte.

Leghjite i documenti di stallazione

Installa via gestore di pacchetti

Installa i fugliali Sass è JavaScript fonte di Bootstrap via npm, RubyGems, Composer, o Meteor. L'installazione gestita di u pacchettu ùn include micca a documentazione o i nostri script di custruzzione cumpletu. Pudete ancu aduprà u nostru repo di mudelli npm per generà rapidamente un prughjettu Bootstrap via npm.

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

Leghjite i nostri documenti di installazione per più infurmazione è gestori di pacchetti supplementari.

Includite via CDN

Quandu avete bisognu di include solu CSS o JS compilatu di Bootstrap, pudete aduprà jsDelivr . Vede in l'azzione cù u nostru iniziu rapidu simplice , o cercate l'esempii per lancià u vostru prossimu prughjettu. Pudete ancu sceglie di include Popper è u nostru JS separatamente .

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

Leghjite e nostre guide di partenza

Fate un salto nantu à l'inclusione di i fugliali fonte di Bootstrap in un novu prughjettu cù e nostre guide ufficiali.

Webpack Pacchettu Vite

Personalizà tuttu cù Sass

Bootstrap utilizza Sass per una architettura modulare è persunalizabile. Importate solu i cumpunenti chì avete bisognu, attivate l'opzioni globale cum'è gradienti è ombre, è scrivite u vostru propiu CSS cù e nostre variabili, carte, funzioni è mixin.

Sapete più nantu à a persunalizazione

Includite tutti i Sass di Bootstrap

Importate un fogliu di stile è site in corsa cù ogni funzione di u nostru CSS.

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

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

Sapete più nantu à e nostre opzioni Sass globale .

Includite ciò chì avete bisognu

U modu più faciule per persunalizà Bootstrap - include solu u CSS chì avete bisognu.

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

Sapete più nantu à l'usu di Bootstrap cù Sass .

Custruite è estende in tempu reale cù variabili CSS

Bootstrap 5 hè in evoluzione cù ogni versione per utilizà megliu variabili CSS per stili di tema globale, cumpunenti individuali, è ancu utilità. Furnemu decine di variabili per culori, stili di font, è più à un :rootlivellu per l'usu in ogni locu. Nant'à i cumpunenti è l'utilità, e variàbili CSS sò scoped à a classa pertinente è ponu esse facilmente mudificate.

Sapete più nantu à e variabili CSS

Utilizà variabili CSS

Aduprate qualsiasi di e nostre variabili globali:root per scrive novi stili. Variabili CSS utilizanu a var(--bs-variableName)sintassi è ponu esse ereditati da elementi di i zitelli.

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

Personalizazione via variabili CSS

Override global, cumpunenti, o variabili di classi di utilità per persunalizà Bootstrap cumu ti piace. Ùn ci hè bisognu di ridichjarà ogni regula, solu un novu valore variabile.

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

Cumpunenti, scuntrà l'API Utility

Novu in Bootstrap 5, i nostri utilità sò avà generati da a nostra Utilità API . L'avemu custruitu cum'è una mappa Sass ricca di funzioni chì pò esse persunalizatu rapidamente è facilmente. Ùn hè mai statu più faciule per aghjunghje, sguassate o mudificà qualsiasi classi di utilità. Fate l'utilità rispunsevuli, aghjunghje varianti di pseudo-classe, è dà li nomi persunalizati.

Sapete più nantu à l'utilità Esplora cumpunenti persunalizati

Personalizà rapidamente i cumpunenti
// 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,
    )
  )
);

Plugins JavaScript putenti senza jQuery

Aghjunghjite facilmente elementi nascosti, modali è menu offcanvas, popovers è tooltips, è assai di più, tuttu senza jQuery. JavaScript in Bootstrap hè HTML-first, chì significa chì aghjunghje plugins hè faciule quant'è aghjunghje dataattributi. Avete bisognu di più cuntrollu? Includite plugins individuali in modu programmaticu.

Sapete più nantu à Bootstrap JavaScript

API d'attributi di dati

Perchè scrive più JavaScript quandu pudete scrive HTML? Quasi tutti i plugins JavaScript di Bootstrap presentanu una API di dati di prima classe, chì vi permette di utilizà JavaScript solu aghjustendu dataattributi.

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

Sapete più nantu à u nostru JavaScript cum'è moduli è utilizendu l'API programmaticu .

Set cumpletu di plugins

Bootstrap presenta una decina di plugins chì pudete abbandunà in ogni prughjettu. Drop in tutti in una volta, o sceglite solu quelli chì avete bisognu.

Alerta

Mostra è oculte i missaghji di alerta à i vostri utilizatori.

Pulsante

Cuntrolla programmaticamenti u statu attivu per i buttoni.

Carrusel

Aghjunghjite slideshows à qualsiasi pagina, cumpresu supportu per crossfade.

Collapse

Espandite è colapsà e zone di cuntenutu, o creanu accordioni.

Dropdown

Crea menu di ligami, azzioni, forme, è più.

Modale

Aghjunghjite dialoghi flessibili è responsivi à u vostru prughjettu.

Offcanvas

Custruite è cambia e barre laterali nascoste in ogni pagina.

Popover

Crea overlays persunalizati. Custruitu nantu à Popper.

Scrollspy

Aghjurnate automaticamente i ligami di navigazione attivi basatu annantu à u scroll di a pagina.

Tab

Permette à i cumpunenti di navigazione Bootstrap per cambià u cuntenutu.

Toast

Mostra è oculta notificazioni à i vostri visitatori.

Tooltip

Sustituisce i tooltips di u navigatore cù quelli persunalizati. Custruitu nantu à Popper.

Personalizà lu cù Icone Bootstrap

Bootstrap Icons hè una libreria di icone SVG open source chì presenta più di 1500 glifi, cù più aghjuntu ogni versione. Sò pensati per travaglià in ogni prughjettu, sia chì utilizate Bootstrap stessu o micca. Aduprate cum'è SVG o fonti di icone - e duie opzioni vi danu una scala di vettore è una persunalizazione faciule via CSS.

Ottene Icone Bootstrap

Icone Bootstrap

Fate u vostru cù Temi Bootstrap ufficiali

Pigliate Bootstrap à u prossimu livellu cù temi premium da u mercatu ufficiale Bootstrap Themes . I temi sò custruiti nantu à Bootstrap cum'è i so propri frameworks estesi, ricchi di novi cumpunenti è plugins, documentazione è strumenti di creazione putenti.

Sfoglia Temi Bootstrap

Temi Bootstrap