Source

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, furnitu gratuitamente da e persone di jsDelivr. Utilizendu un gestore di pacchetti o avete bisognu di scaricà i fugliali fonte? Testa à a pagina di download.

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Parechji di i nostri cumpunenti necessitanu l'usu di JavaScript per funziunà. Specificamenti, necessitanu jQuery , Popper.js , è i nostri plugins JavaScript. Pone i seguenti <script>s vicinu à a fine di e vostre pagine, ghjustu prima di l'etichetta di chiusura </body>, per attivà. jQuery deve vene prima, dopu Popper.js, è dopu i nostri plugins JavaScript.

Usemu a custruzione slim di jQuery , ma a versione completa hè ancu supportata.

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

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

U nostru bootstrap.bundle.jsè bootstrap.bundle.min.jsinclude Popper , ma micca jQuery . Per più infurmazione nantu à ciò chì hè inclusu in Bootstrap, vede a nostra sezione di cuntenutu .

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
  • Dropdowns per a visualizazione è u posizionamentu (necessita ancu Popper.js )
  • Modali per a visualizazione, u posizionamentu è u cumpurtamentu di scorrimentu
  • Navbar per allargà u nostru plugin Collapse per implementà un cumpurtamentu responsive
  • Tooltips è popovers per a visualizazione è u posizionamentu (necessita ancu Popper.js )
  • Scrollspy per u cumpurtamentu di scroll è l'aghjurnamenti di navigazione

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

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.

  • Segui @getbootstrap in Twitter .
  • Leghjite è abbonate à u Blog ufficiale di Bootstrap .
  • Chat cù altri Bootstrappers in IRC. In u irc.freenode.netservitore, in u ##bootstrapcanali.
  • L'aiutu à l'implementazione pò esse truvatu in Stack Overflow (tagged bootstrap-4).
  • I sviluppatori anu da utilizà 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.