Source

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, fornito gratuitamente dalla gente di jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

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

Usiamo la build slim di jQuery , ma è supportata anche la versione completa.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Sei curioso di sapere quali componenti richiedono esplicitamente jQuery, il nostro JS e Popper.js? 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.

Il nostro bootstrap.bundle.jse bootstrap.bundle.min.jsinclude Popper , ma non jQuery . Per ulteriori informazioni su cosa è incluso in Bootstrap, consulta la nostra sezione dei contenuti .

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.js )
  • Modali per la visualizzazione, il posizionamento e il comportamento di scorrimento
  • Navbar per estendere il nostro plug-in Collapse per implementare un comportamento reattivo
  • Tooltip e popover per la visualizzazione e il posizionamento (richiede anche Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Segui @getbootstrap su Twitter .
  • Leggi e iscriviti al blog ufficiale di Bootstrap .
  • Chatta con altri Bootstrapper in IRC. Sul irc.freenode.netserver, 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.