Introduzione

Accuminciate cù Bootstrap, u quadru più famosu in u mondu per a creazione di siti responsive, mobile-first, cù jsDelivr è una pagina iniziale di mudellu.

Inizio rapidu

Circate per aghjunghje rapidamente Bootstrap à u vostru prughjettu? Aduprate jsDelivr, un CDN open source gratuitu. Utilizendu un gestore di pacchetti o avete bisognu di scaricà i fugliali fonte? Andate à a pagina di scaricamentu .

CSS

Copia-incolla u fogliu di stile <link>in u vostru <head>prima di tutti l'altri fogli di stile per carricà u nostru CSS.

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

JS

Parechji di i nostri cumpunenti necessitanu l'usu di JavaScript per funziunà. In particulare, necessitanu jQuery , Popper , è i nostri plugins JavaScript. Usemu a custruzione slim di jQuery , ma a versione completa hè ancu supportata.

Pone unu di i seguenti<script> vicinu à a fine di e vostre pagine, ghjustu prima di l'etichetta di chjude </body>, per attivà. jQuery deve vene prima, dopu Popper, è dopu i nostri plugins JavaScript.

Bundle

Includite ogni plugin JavaScript Bootstrap cù unu di i nostri dui bundle. Tramindui bootstrap.bundle.jsè bootstrap.bundle.min.jsinclude Popper per i nostri tooltips è popovers, ma micca jQuery . Includite prima jQuery, dopu un bundle Bootstrap JavaScript. Per più infurmazione nantu à ciò chì hè inclusu in Bootstrap, vede a nostra sezione di cuntenutu .

<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>

Separate

Se decide di andà cù a soluzione di script separati, Popper deve vene prima (se aduprate tooltips o popovers), è dopu i nostri plugins 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>

Cumpunenti

Curiosu quali cumpunenti necessitanu esplicitamente jQuery, u nostru JavaScript è Popper? Cliccate u ligame di cumpunenti di mostra sottu. Se ùn site micca sicuru di a struttura di a pagina, seguite leghje per un mudellu di pagina di esempiu.

Mostra i cumpunenti chì necessitanu JavaScript

Avvisi per licenziamentu
Pulsanti per a commutazione di stati è checkbox / funziunalità radio
Carousel per tutti i cumpurtamenti di slide, cuntrolli è indicatori
Collapse per cambià a visibilità di u cuntenutu
Menu a discesa per a visualizazione è u posizionamentu (necessita ancu Popper )
Modali per a visualizazione, u posizionamentu è u cumpurtamentu di scorrimentu
Navbar per allargà u nostru plugin Collapse per implementà un cumpurtamentu responsive
Scrollspy per u cumpurtamentu di scroll è l'aghjurnamenti di navigazione
Tooltips è popovers per a visualizazione è u posizionamentu (necessita ancu Popper )

U mudellu di partenza

Assicuratevi di avè e vostre pagine cunfigurate cù l'ultimi standard di cuncepimentu è sviluppu. Chistu significa aduprà un doctype HTML5 è cumprendi una meta tag di viewport per cumportamenti responsivi adattati. Mettite tuttu inseme è e vostre pagine duveranu vede cusì:

<!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>

Hè tuttu ciò chì avete bisognu per i bisogni di a pagina generale. Visita i Layout docs o i nostri esempi ufficiali per cumincià à stabilisce u cuntenutu è i cumpunenti di u vostru situ.

Globali impurtanti

Bootstrap impiega una manciata di stili è paràmetri glubale impurtanti chì avete bisognu di sapè quandu l'utilizanu, tutti chì sò quasi esclusivamente orientati à a normalizazione di stili di navigatore cross. Immergemu.

HTML5 doctype

Bootstrap richiede l'usu di u doctype HTML5. Senza ellu, vi vede un stilu funky incomplete, ma cumpresu ùn deve micca causatu alcunu singhiozzu considerableu.

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

Meta tag responsive

Bootstrap hè sviluppatu prima mobile , una strategia in quale ottimisimu prima u codice per i dispositi mobili è poi scalendu cumpunenti cum'è necessariu utilizendu e dumande di media CSS. Per assicurà a resa curretta è u toccu di zoom per tutti i dispositi, aghjunghje a meta tag di viewport responsive à u vostru <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Pudete vede un esempiu di questu in azzione in u mudellu di starter .

Scatola di dimensioni

Per un dimensionamentu più simplice in CSS, cambiemu u box-sizingvalore globale da content-boxa border-box. Questu assicura paddingchì ùn hà micca affettatu l'ampiezza calculata finali di un elementu, ma pò causà prublemi cù qualchì software di terzu cum'è Google Maps è Google Custom Search Engine.

In a rara occasione chì avete bisognu di annullà, aduprate qualcosa cum'è a seguente:

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

Cù u snippet di sopra, l'elementi nidificati - cumpresu u cuntenutu generatu via ::beforeè ::after- erediteranu tutti l'indicazione specificata box-sizingper quellu .selector-for-some-widget.

Sapete più nantu à u mudellu di scatula è a dimensione in CSS Tricks .

Reboot

Per un rendering cross-browser migliuratu, usemu Reboot per correggere l'incoerenza trà i navigatori è i dispositi mentre furnisce resets un pocu più opinione à elementi HTML cumuni.

Cumunità

Stà infurmatu nantu à u sviluppu di Bootstrap è ghjunghje à a cumunità cù queste risorse utili.

Leghjite è abbonate à u Blog ufficiale di Bootstrap .
Chat cù altri Bootstrappers in IRC. In u irc.libera.chatservitore, in u #bootstrapcanali.
L'aiutu à l'implementazione pò esse truvatu in Stack Overflow (tagged bootstrap-4).
I sviluppatori anu da aduprà a keyword bootstrapin i pacchetti chì mudificanu o aghjunghjenu a funziunalità di Bootstrap quandu si distribuiscenu attraversu npm o meccanismi di consegna simili per una scoperta massima.

Pudete ancu seguità @getbootstrap in Twitter per l'ultimi gossip è video musicali fantastichi.

CSP è SVG integrati

Diversi cumpunenti Bootstrap includenu SVG incrustati in u nostru CSS per stilà i cumpunenti in modu coerente è faciule in i navigatori è i dispositi. Per l'urganisazioni cù cunfigurazioni CSP più strette , avemu documentatu tutte e istanze di i nostri SVG incrustati (tutti sò applicati via background-image) in modu chì pudete esaminà più accuratamente e vostre opzioni.

Pulsante Chiudi (usatu in alerti è modali)
Casella di cuntrollu persunalizata è buttoni di radiu
Cambia di forma
Icone di validazione di forma
Menu di selezzione persunalizata
Cuntrolli di carrusel
Pulsanti di commutazione di a barra di navigazione

Basatu nantu à a cunversazione di a cumunità , alcune opzioni per affruntà questu in a vostra propria basa di codice includenu rimpiazzà l'URL cù l'assi ospitati in u locu, sguassate l'imaghjini è l'usu di l'imaghjini in linea (micca pussibule in tutti i cumpunenti), è mudificà u vostru CSP. A nostra ricunniscenza hè di rivisione attentamente e vostre pulitiche di sicurezza è decide di u megliu percorsu avanti, se ne necessariu.