Toolkit frontend potente, estensibile e ricco di funzionalità. Crea e personalizza con Sass, utilizza il sistema di griglia e i componenti predefiniti e dai vita ai progetti con potenti plug-in JavaScript.
Attualmente v5.2.1 · Download · v4.6.x docs · Tutte le versioni
Passa direttamente alla creazione con Bootstrap: usa la CDN, installala tramite il gestore di pacchetti o scarica il codice sorgente.
Installa i file Sass e JavaScript di origine di Bootstrap tramite npm, RubyGems, Composer o Meteor. Le installazioni gestite dal pacchetto non includono la documentazione o i nostri script di build completi. Puoi anche utilizzare il nostro repository di modelli npm per generare rapidamente un progetto Bootstrap tramite npm.
npm install [email protected]gem install bootstrap -v 5.2.1Leggi i nostri documenti di installazione per ulteriori informazioni e gestori di pacchetti aggiuntivi.
Quando devi solo includere CSS o JS compilati da Bootstrap, puoi usare jsDelivr . Guardalo in azione con il nostro semplice avvio rapido o sfoglia gli esempi per avviare il tuo prossimo progetto. Puoi anche scegliere di includere Popper e il nostro 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>
Prova a includere i file sorgente di Bootstrap in un nuovo progetto con le nostre guide ufficiali.
Bootstrap utilizza Sass per un'architettura modulare e personalizzabile. Importa solo i componenti di cui hai bisogno, abilita opzioni globali come gradienti e ombre e scrivi il tuo CSS con le nostre variabili, mappe, funzioni e mixin.
Importa un foglio di stile e sei pronto per le gare con tutte le funzionalità del nostro CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Scopri di più sulle nostre opzioni Sass globali .
Il modo più semplice per personalizzare Bootstrap: includi solo il CSS di cui hai bisogno.
// 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";
Ulteriori informazioni sull'utilizzo di Bootstrap con Sass .
Bootstrap 5 si evolve con ogni versione per utilizzare meglio le variabili CSS per gli stili dei temi globali, i singoli componenti e persino le utilità. Forniamo dozzine di variabili per colori, stili di carattere e altro a un :rootlivello da utilizzare ovunque. Su componenti e utilità, le variabili CSS hanno come ambito la classe pertinente e possono essere facilmente modificate.
Usa una delle nostre variabili globali:root per scrivere nuovi stili. Le variabili CSS utilizzano la var(--bs-variableName)sintassi e possono essere ereditate dagli elementi figli.
.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);
}Sovrascrivi le variabili globali, dei componenti o delle classi di utilità per personalizzare Bootstrap come preferisci. Non c'è bisogno di dichiarare nuovamente ogni regola, solo un nuovo valore di 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;
}Novità di Bootstrap 5, le nostre utilità sono ora generate dalla nostra Utility API . L'abbiamo costruita come una mappa Sass ricca di funzionalità che può essere personalizzata rapidamente e facilmente. Non è mai stato così facile aggiungere, rimuovere o modificare classi di utilità. Rendi le utilità reattive, aggiungi varianti di pseudo-classi e assegna loro nomi personalizzati.
Ulteriori informazioni sulle utilità Esplora i componenti personalizzati
// 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,
)
)
);
Aggiungi facilmente elementi nascosti attivabili, menu modali e fuori tela, popover e suggerimenti e molto altro ancora, il tutto senza jQuery. JavaScript in Bootstrap è HTML-first, il che significa che aggiungere plugin è facile come aggiungere dataattributi. Hai bisogno di più controllo? Includi i singoli plugin in modo programmatico.
Perché scrivere più JavaScript quando puoi scrivere HTML? Quasi tutti i plug-in JavaScript di Bootstrap dispongono di un'API di dati di prima classe, che consente di utilizzare JavaScript semplicemente aggiungendo 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>
Scopri di più sul nostro JavaScript come moduli e sull'utilizzo dell'API programmatica .
Bootstrap offre una dozzina di plugin che puoi inserire in qualsiasi progetto. Inseriscili tutti in una volta o scegli solo quelli che ti servono.
Bootstrap Icons è una libreria di icone SVG open source con oltre 1.500 glifi, con più aggiunti ogni versione. Sono progettati per funzionare in qualsiasi progetto, indipendentemente dal fatto che utilizzi Bootstrap stesso o meno. Usali come SVG o font per icone: entrambe le opzioni offrono ridimensionamento vettoriale e una facile personalizzazione tramite CSS.
Porta Bootstrap al livello successivo con i temi premium del mercato ufficiale dei temi di Bootstrap . I temi sono costruiti su Bootstrap come propri framework estesi, ricchi di nuovi componenti e plugin, documentazione e potenti strumenti di compilazione.
