Salta al contenuto principale Passa alla navigazione dei documenti
in English

introduzione

Inizia con Bootstrap, il framework più popolare al mondo per la creazione di siti reattivi per dispositivi mobili, con jsDelivr e una pagina di avvio del modello.

Su questa pagina

Avvio veloce

Vuoi aggiungere rapidamente Bootstrap al tuo progetto? Usa jsDelivr, un CDN open source gratuito. Utilizzi un gestore di pacchetti o devi scaricare i file di origine? Vai alla pagina dei download .

CSS

Copia e incolla il foglio di stile <link>nel tuo <head>prima di tutti gli altri fogli di stile per caricare il nostro CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Molti dei nostri componenti richiedono l'uso di JavaScript per funzionare. In particolare, richiedono i nostri plugin JavaScript e Popper . Inserisci una delle seguenti <script>s vicino alla fine delle tue pagine, subito prima del tag di chiusura </body>, per abilitarle.

Fascio

Includi ogni plug-in JavaScript Bootstrap e ogni dipendenza con uno dei nostri due bundle. Entrambi bootstrap.bundle.jse bootstrap.bundle.min.jsincludono Popper per i nostri suggerimenti e popover. Per ulteriori informazioni su cosa è incluso in Bootstrap, consulta la nostra sezione dei contenuti .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Separato

Se decidi di utilizzare la soluzione di script separata, Popper deve venire prima (se stai utilizzando suggerimenti o popover) e poi i nostri plugin JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduli

Se usi <script type="module">, fai riferimento alla nostra sezione sull'utilizzo di Bootstrap come modulo .

Componenti

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 il nostro plug-in Collapse per implementare un comportamento reattivo
  • Brindisi per la visualizzazione e il congedo
  • Tooltip e popover per la visualizzazione e il posizionamento (richiede anche Popper )
  • Scrollspy per il comportamento di scorrimento e gli aggiornamenti di navigazione

Modello iniziale

Assicurati di avere le tue pagine configurate con gli ultimi standard di progettazione e sviluppo. Ciò significa utilizzare un doctype HTML5 e includere un meta tag viewport per comportamenti reattivi adeguati. Metti tutto insieme e le tue pagine dovrebbero apparire così:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Per i passaggi successivi, visita i documenti Layout o i nostri esempi ufficiali per iniziare a definire i contenuti e i componenti del tuo sito.

Globali importanti

Bootstrap utilizza una manciata di importanti stili e impostazioni globali di cui devi essere a conoscenza quando lo usi, tutti orientati quasi esclusivamente alla normalizzazione degli stili tra browser. Immergiamoci.

Tipo di documento HTML5

Bootstrap richiede l'uso del doctype HTML5. Senza di esso, vedrai uno stile incompleto funky, ma includerlo non dovrebbe causare singhiozzi considerevoli.

<!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 nel modello iniziale .

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 finale calcolata 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 .
  • 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.