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

Cumincià cù Bootstrap

Bootstrap hè un putente toolkit di frontend riccu di funzioni. Custruite qualcosa - da u prototipu à a produzzione - in minuti.

In sta pagina

Inizio rapidu

Accuminciate includendu CSS pronti per a produzzione di Bootstrap è JavaScript via CDN senza avè bisognu di alcunu passu di creazione. Vede in pratica cù questa demo Bootstrap CodePen .


  1. Crea un novu index.htmlschedariu in u vostru prughjettu root. Includite <meta name="viewport">ancu l'etichetta per un cumpurtamentu responsibile propiu in i dispositi mobili.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Includite CSS è JS di Bootstrap. Pone l' <link>etichetta in u <head>nostru CSS, è l' <script>etichetta per u nostru bundle JavaScript (cumpresu Popper per u posizionamentu di dropdowns, poppers è tooltips) prima di a chiusura </body>. Sapete più nantu à i nostri ligami CDN .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Pudete ancu include Popper è u nostru JS separatamente. Se ùn avete micca pensatu à utilizà dropdowns, popovers, o tooltips, salvate alcuni kilobytes senza includendu Popper.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Salute, mondu ! Aprite a pagina in u vostru navigatore di scelta per vede a vostra pagina Bootstrapped. Avà pudete inizià a custruisce cù Bootstrap creendu u vostru propiu layout , aghjunghjendu decine di cumpunenti , è utilizendu i nostri esempi ufficiali .

Comu riferimentu, quì sò i nostri ligami CDN primari.

Descrizzione URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Pudete ancu aduprà u CDN per piglià qualcunu di i nostri build supplementari elencati in a pagina di Cuntenuti .

I prossimi passi

cumpunenti JS

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à i nostri plugins Collapse è Offcanvas per implementà i cumpurtamenti risposti
  • Navs cù u plugin Tab per cambià i pannelli di cuntenutu
  • Offcanvases per a visualizazione, u posizionamentu è u cumpurtamentu di scorrimentu
  • Scrollspy per u cumpurtamentu di scroll è l'aghjurnamenti di navigazione
  • Brindisi per a visualizazione è l'eliminazione
  • Tooltips è popovers per a visualizazione è u posizionamentu (necessita ancu Popper )

Globali impurtanti

Bootstrap impiega una manciata di stili è paràmetri glubale impurtanti, 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 è incompletu.

<!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 principiu rapidu .

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 .
  • Dumandate è esplora i nostri Discussioni GitHub .
  • 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.