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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Molti dei nostri componenti richiedono l'uso di JavaScript per funzionare. In particolare, richiedono jQuery , Popper e i nostri plugin JavaScript. Usiamo la build slim di jQuery , ma è supportata anche la versione completa.

Inserisci una delle seguenti <script>s vicino alla fine delle tue pagine, subito prima del tag di chiusura </body>, per abilitarle. jQuery deve venire prima, poi Popper e poi i nostri plugin JavaScript.

Fascio

Includi tutti i plugin JavaScript Bootstrap con uno dei nostri due bundle. Entrambi bootstrap.bundle.jse bootstrap.bundle.min.jsincludono Popper per i nostri suggerimenti e popover, ma non jQuery . Includi prima jQuery, quindi un bundle JavaScript Bootstrap. Per ulteriori informazioni su cosa è incluso in Bootstrap, consulta la nostra sezione dei contenuti .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componenti

Sei curioso di sapere quali componenti richiedono esplicitamente jQuery, il nostro JavaScript e Popper? Fare clic sul collegamento Mostra componenti di seguito. Se non sei sicuro della struttura 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
  • Scrollspy per il comportamento di scorrimento e gli aggiornamenti di navigazione
  • Tooltip e popover per la visualizzazione e il posizionamento (richiede anche Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Questo è tutto ciò di cui hai bisogno per i requisiti generali della pagina. Visita i documenti di 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, shrink-to-fit=no">

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-4).
  • 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.

CSP e SVG incorporati

Diversi componenti Bootstrap includono SVG incorporati nel nostro CSS per definire lo stile dei componenti in modo coerente e semplice su browser e dispositivi. Per le organizzazioni con configurazioni CSP più rigide , abbiamo documentato tutte le istanze dei nostri SVG incorporati (tutti applicati tramite background-image) in modo che tu possa esaminare più a fondo le tue opzioni.

Sulla base della conversazione della community , alcune opzioni per affrontare questo problema nella tua base di codice includono la sostituzione degli URL con risorse ospitate localmente, la rimozione delle immagini e l'utilizzo di immagini inline (non possibile in tutti i componenti) e la modifica del tuo CSP. La nostra raccomandazione è di rivedere attentamente le vostre politiche di sicurezza e decidere il miglior percorso da seguire, se necessario.