Inizia con Bootstrap

Bootstrap è un toolkit frontend potente e ricco di funzionalità. Costruisci qualsiasi cosa, dal prototipo alla produzione, in pochi minuti.

Su questa pagina

Avvio veloce

Inizia includendo CSS e JavaScript pronti per la produzione di Bootstrap tramite CDN senza la necessità di passaggi di compilazione. Guardalo in pratica con questa demo di Bootstrap CodePen .

Crea un nuovo index.htmlfile nella radice del tuo progetto. Includi <meta name="viewport">anche il tag per un corretto comportamento reattivo nei dispositivi mobili.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Includi CSS e JS di Bootstrap. Inserisci il <link>tag <head>per il nostro CSS e il <script>tag per il nostro bundle JavaScript (incluso Popper per posizionare menu a discesa, popper e suggerimenti) prima della chiusura </body>. Ulteriori informazioni sui nostri collegamenti CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Puoi anche includere Popper e il nostro JS separatamente. Se non prevedi di utilizzare menu a discesa, popover o suggerimenti, risparmia alcuni kilobyte escludendo Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Ciao mondo! Apri la pagina nel tuo browser preferito per vedere la tua pagina Bootstrap. Ora puoi iniziare a costruire con Bootstrap creando il tuo layout , aggiungendo dozzine di componenti e utilizzando i nostri esempi ufficiali .

Collegamenti CDN

Come riferimento, ecco i nostri collegamenti CDN principali.

Descrizione	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Puoi anche utilizzare il CDN per recuperare qualsiasi delle nostre build aggiuntive elencate nella pagina Contenuti .

Prossimi passi

Leggi un po' di più su alcune importanti impostazioni dell'ambiente globale utilizzate da Bootstrap.
Leggi cosa è incluso in Bootstrap nella nostra sezione dei contenuti e l'elenco dei componenti che richiedono JavaScript di seguito.
Hai bisogno di un po' più di potenza? Prendi in considerazione la creazione con Bootstrap includendo i file di origine tramite il gestore di pacchetti .
Stai cercando di utilizzare Bootstrap come modulo con <script type="module">? Si prega di fare riferimento alla nostra sezione sull'utilizzo di Bootstrap come modulo .

componenti JS

Sei curioso di sapere quali componenti richiedono esplicitamente il nostro JavaScript e Popper? Fare clic sul collegamento Mostra componenti di seguito. Se non sei sicuro della struttura generale della pagina, continua a leggere per un modello di pagina di esempio.

Mostra i componenti che richiedono JavaScript

Avvisi per licenziamento
Pulsanti per alternare stati e funzionalità checkbox/radio
Carosello per tutti i comportamenti, i controlli e gli indicatori delle diapositive
Comprimi per attivare/disattivare la visibilità del contenuto
Menu a discesa per la visualizzazione e il posizionamento (richiede anche Popper )
Modali per la visualizzazione, il posizionamento e il comportamento di scorrimento
Navbar per estendere i nostri plug-in Collapse e Offcanvas per implementare comportamenti reattivi
Naviga con il plug-in Tab per attivare o disattivare i riquadri dei contenuti
Offcanvases per la visualizzazione, il posizionamento e il comportamento di scorrimento
Scrollspy per il comportamento di scorrimento e gli aggiornamenti di navigazione
Brindisi per la visualizzazione e il congedo
Tooltip e popover per la visualizzazione e il posizionamento (richiede anche Popper )

Globali importanti

Bootstrap utilizza una manciata di importanti stili e impostazioni globali, tutti orientati quasi esclusivamente alla normalizzazione degli stili cross browser. Immergiamoci.

Tipo di documento HTML5

Bootstrap richiede l'uso del doctype HTML5. Senza di esso, vedrai uno stile funky e incompleto.

<!doctype html>
<html lang="en">
  ...
</html>

Meta tag reattivo

Bootstrap è sviluppato prima per dispositivi mobili , una strategia in cui ottimizziamo prima il codice per i dispositivi mobili e quindi aumentiamo i componenti secondo necessità utilizzando le query multimediali CSS. Per garantire un rendering e uno zoom al tocco corretti per tutti i dispositivi, aggiungi il meta tag del viewport reattivo al tuo file <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Puoi vedere un esempio di questo in azione nell'avvio rapido .

Dimensioni della scatola

Per un dimensionamento più semplice in CSS, cambiamo il box-sizingvalore globale da content-boxa border-box. Ciò garantisce paddingche non influisca sulla larghezza calcolata finale di un elemento, ma può causare problemi con alcuni software di terze parti come Google Maps e Google Custom Search Engine.

Nelle rare occasioni in cui è necessario sovrascriverlo, utilizzare qualcosa di simile al seguente:

.selector-for-some-widget {
  box-sizing: content-box;
}

Con lo snippet sopra, gli elementi nidificati, incluso il contenuto generato tramite ::beforee ::after, erediteranno tutti gli elementi specificati box-sizingper quello .selector-for-some-widget.

Scopri di più sul modello e sul dimensionamento della scatola in CSS Tricks .

Riavviare

Per migliorare il rendering cross-browser, utilizziamo Reboot per correggere le incoerenze tra browser e dispositivi fornendo al contempo reimpostazioni leggermente più ponderate agli elementi HTML comuni.

Comunità

Rimani aggiornato sullo sviluppo di Bootstrap e contatta la community con queste utili risorse.

Leggi e iscriviti al blog ufficiale di Bootstrap .
Chiedi ed esplora le nostre discussioni su GitHub .
Chatta con altri Bootstrapper in IRC. Sul irc.libera.chatserver, nel #bootstrapcanale.
La guida all'implementazione può essere trovata in Stack Overflow (con tag bootstrap-5).
Gli sviluppatori dovrebbero utilizzare la parola chiave bootstrapsui pacchetti che modificano o aggiungono funzionalità di Bootstrap durante la distribuzione tramite npm o meccanismi di consegna simili per la massima rilevabilità.

Puoi anche seguire @getbootstrap su Twitter per gli ultimi gossip e fantastici video musicali.