Passà à u cuntenutu principale Salta à a navigazione di documenti
in English

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.

In sta pagina

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

JS

Parechji di i nostri cumpunenti necessitanu l'usu di JavaScript per funziunà. In particulare, necessitanu i nostri plugins JavaScript è Popper . Pone unu di i seguenti<script> vicinu à a fine di e vostre pagine, ghjustu prima di l'etichetta di chjude </body>, per attivà.

Bundle

Includite ogni plugin Bootstrap JavaScript è dependenza cù unu di i nostri dui bundle. Tramindui bootstrap.bundle.jsè bootstrap.bundle.min.jsinclude Popper per i nostri tooltips è popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Separate

Se decide di andà cù a suluzione di scrittura separata, Popper deve vene prima (se utilizate tooltips o popovers), è dopu i nostri plugins JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Moduli

Se aduprate <script type="module">, fate riferimentu à u nostru utilizendu Bootstrap cum'è una sezione di modulu.

Cumpunenti

Curiosu quali cumpunenti necessitanu esplicitamente u nostru JavaScript è Popper? 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.

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 )
  • Modali per a visualizazione, u posizionamentu è u cumpurtamentu di scorrimentu
  • Navbar per allargà u nostru plugin Collapse per implementà un cumpurtamentu responsive
  • Offcanvases per a visualizazione, u posizionamentu è u cumpurtamentu di scorrimentu
  • Brindisi per a visualizazione è l'eliminazione
  • Tooltips è popovers per a visualizazione è u posizionamentu (necessita ancu Popper )
  • 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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Per i prossimi passi, visitate i documenti di Layout 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">

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 a larghezza 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-5).
  • I sviluppatori anu da utilizà a keyword bootstrapnantu à 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.