Per Iniziare

Bootstrap permette differenti e semplici modi per iniziare, ognuno riferito ai differenti livelli di abilità e casi d'uso. Continua a leggere per vedere quale si adatta meglio alle tue necessità.

Bootstrap

CSS minimale e compilato, JavaScript, e fonts. Nessuna documentazione o file sorgenti originali sono inclusi.

Scarica Bootstrap

Codice sorgente

Sorgente Less, JavaScript, e file dei font, assieme alla nostra documentazione. Richiede un compilatore Less e alcune installazioni.

Scarica sorgente

Sass

Bootstrap riscritto da Less a Sass per un'inclusione facilitata in Rails, Compass, oppure progetti Sass.

Scarica Sass

Attualmente v3.1.1.

Bootstrap CDN

I ragazzi di MaxCDN cortesemente forniscono i CDN per il CSS e il JavaScript di Bootstrap. Usate questi link Bootstrap CDN.

<!-- CSS Aggiornato minimale e compilato -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Tema Opzionale -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- JavaScript Aggiornato minimale e compilato -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Installazione con Bower

Installa e gestisci i file Less, CSS, JavaScript, fonts di Bootstrap usando Bower.

$ bower install bootstrap

Bootstrap è scaricabile in due forme, all'interno del quale troverete le seguenti cartelle e file, che raggruppano in modo logico risorse comuni e forniscono le varianti compilate e minimizzate.

Necessario jQuery

Notare che tutti i plugin JavaScript richiedono l'inclusione di jQuery, come mostrato nel template di base. Consultate il nostro bower.json per vedere quali versioni di jQuery sono supportate.

Bootstrap Precompilato

Una volta scaricato, decomprimete la cartella compressa per vedere la struttura di Bootstrap (versione compilata). Vedrete qualcosa del genere:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Questa è la forma base di Bootstrap: file precompilati dall'uso rapido praticamente per qualsiasi progetto web. Forniamo CSS compilati e JS (bootstrap.*), così come CSS compilati minimizzati e JS (bootstrap.min.*). I Fonts di Glyphicons sono inclusi, come lo è anche il tema opzionale di Bootstrap.

Codice Sorgente Bootstrap

Il download del codice sorgente di Bootstrap include i CSS precompilati, JavaScript, le configurazioni dei caratteri (font), assieme al sorgente Less, JavaScript, e la documentazione. Più in particolare, include questo e altro:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Le cartelle less/, js/, e fonts/ sono i sorgenti per il nostro CSS, JS, e icone dei caratteri (rispettivamente). La cartella dist/ include tutto ciò elencato sopra nella sezione download precompilato. La cartella docs/ include il codice sorgente per la nostra documentazione, e examples/ per l'uso di Bootstrap. Oltre a questo, ogni altro file incluso fornisce supporto per i pacchetti, informazioni su license, e sviluppo.

Inizia con questo template di base HTML, o modifica questi esempi. Noi speriamo personalizzerai i nostri template ed esempi, adattandoli alle tue necessità.

Copia l'HTML sotto per iniziare a lavorare con un documento Bootstrap minimale.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js non funziona se guardate la pagina attraverso file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessario per i plugin Javascript di Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Includi tutti i plugin compilati (sotto), o includi solo i file individuali necessari -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Costruito sulla base del template di base visto sopra con l'aggiunta di altri componenti Bootstrap. Vedete anche Personalizzare Bootstrap per suggerimenti su come mantenere le proprie modifiche su Bootstrap.

Usare il framework

Template Iniziale

Nient'altro che le basi: CSS compilato e Javascript abbinati ad un container (contenitore).

Tema Bootstrap

Carica il tema opzionale di Bootstrap per un'esperienza visiva maggiore.

Griglie

Esempi multipli di layout grigliati con tutti e quattro i livelli, blocchi annidati e altro.

Jumbotron

Costruite attorno al jumbotron con una barra di navigazione (navbar) e alcune colonne in griglia di base.

Jumbotron stretto

Costruite una pagina ancor più personalizzata restringendo il container di default e jumbotron.

Navbars in azione

Navbar

Template di base che include una navbar e altri contenuti addizionali.

Navbar statica in alto

Template di base con una barra di navigazione statica in alto e altro contenuto addizionale.

Navbar fissa

Template di base con una navbar (barra di navigazione) fissa in alto e altro contenuto addizionale.

Componenti personalizzati

Cover

Un template a pagina singola per costruire pagine iniziali semplici e belle.

Carousel

Personalizza la navbar e il carousel, dopo aggiungi qualche nuova componente.

Blog

Semplice blog con layout a due colonne, navigazione, header e caratteri personalizzati.

Dashboard

Struttura base per una dashboard d'amministrazione con menu laterale (sidebar) e navbar fissi.

Sign-in page

Layout adattato a un semplice form di login.

Justified nav

Create una navbar personalizzata con link giustificati. Attenzione! Non molto compatibile con WebKit.

Sticky footer

Attaccare un piè di pagina in basso alla finestra visiva quando il contenuto è più corto.

Sticky footer con navbar

Attaccare un piè di pagina in basso alla finestra visiva con un navbar fisso in alto alla pagina.

Esperimenti

Non-responsive Bootstrap

Disabilita facilmente il layout responsivo di Bootstrap dalla nostra documentazione.

Offcanvas

Costruire un menu di navigazione responsivo cliccabile da usare con Bootstrap.

Restate aggiornati sullo sviluppo di Bootstrap, unitevi alla comunità tramite queste utili risorse.

Leggi e iscriviti al Blog ufficiale di Bootstrap.
Chatta con i compagni Bootstrappers usando IRC nel server irc.freenode.net, canale ##twitter-bootstrap.
Per aiuto nell'utilizzo di Bootstrap, chiedi su StackOverflow usando il tag twitter-bootstrap-3.
Trova ispirazione da persone che utilizzano Bootstrap sul Bootstrap Expo.

In alternativa puoi seguire @twbootstrap su Twitter per gli ultimi gossip e splendini video musicali.

Bootstrap automaticamente adatta le tue pagine alle diverse dimensioni dello schermo. Qui viene mostrato come disabilitare questa caratteristica, così che le tue pagine vengano presentate come in questo esempio non responsivo.

Passi per disabilitare il layout responsivo

Omettere la visuale <meta> menzionata nella documentazione CSS
Sovrascrivete la width nel .container per ogni riga nella griglia con un singolo width, per esempio width: 970px !important; Assicuratevi che questo venga dopo il CSS di default di Bootstrap. In alternativa potete evitare il !important con le media queries o qualche selector-fu.
Nel caso si usino navbars, rimuovi la possibilità di espandersi e restringersi.
Per Layout a griglia, usa le classi .col-xs-* in aggiunta, o al posto delle classi medio/larghe. Non preoccuparti, la griglia extra-piccola scala all'occorrenza per tutte le risoluzioni.

Avrai ancora bisogno di Respond.js per IE8 (dal momento che le media queries persistono e han necessità di essere processate). Questo disabilita l'aspetto "sito mobile" di Bootstrap.

Template Bootstrap con layout responsivo (responsiveness) disabilitato

Abbiamo applicato questi passi ad un esempio. Leggine il codice sorgente per vedere le modifiche apportate.

Guarda esempio non-responsivo

Bootstrap è costruito per dare il meglio di sè nei browser mobile e desktop più recenti, ciò significa che per vecchi browser potrebbe apparire con uno style differente, anche se perfettamente funzionante.

Browsers supportati

In particolare, sono supportate le ultime versioni delle seguenti piattaforme e browser. Su Windows, è supportato Internet Explorer 8-11. Altre informazioni più specifiche sono riportate di seguito.

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	Supportato	Non Supportato	N/A	Non Supportato	N/A
iOS	Supportato	N/A		Non Supportato	Supportato
Mac OS X	Supportato	Supportato		Supportato	Supportato
Windows	Supportato	Supportato	Supportato	Supportato	Non Supportato

Non ufficialmente, Bootstrap dovrebbe apparire e comportarsi bene anche su Chromium e Chrome per Linux, Firefox per Linux, e Internet Explorer 7, nonostante non siano ufficialmente supportati.

Internet Explorer 8 e 9

Internet Explorer 8 e 9 sono supportati, tuttavia, prestate attenzione ad alcune proprietà CSS3 ed elementi HTML5, non pienamente supportati da questi browsers. Inoltre, Internet Explorer 8 richiede l'uso di Respond.js per il supporto delle media query.

Caratteristica	Internet Explorer 8	Internet Explorer 9
`border-radius`	Non supportato	Supportato
`box-shadow`	Non supportato	Supportato
`transform`	Non supportato	Supportato, con il prefisso `-ms`
`transition`	Non supportato
`placeholder`	Non supportato

Visita "Can I use..." per dettagli sulle proprietà CSS3 e gli elementi di HTML5 supportati dai vari browser.

Internet Explorer 8 e Respond.js

Diffida dalle seguenti pratiche quando usi Respond.js nel tuo ambiente di sviluppo per Internet Explorer 8.

Respond.js e CSS da un altro dominio

Usare Respond.js con un CSS caricato su un differente (sotto)dominio (per esempio, su un CDN) richiede configurazioni addizionali. Guarda la documentazione di Respond.js per dettagli.

Respond.js e `file://`

A causa delle regole di sicurezza del Browser, Respond.js non funziona con pagine visitate attraverso il protocollo file:// (come quando si apre un file HTML locale). Per testare le caratteristiche responsive in IE8, visita le tue pagine con HTTP(S). Guarda la documentazione Respond.js per dettagli.

Respond.js e `@import`

Respond.js non funziona con CSS referenziato attraverso @import. In particolare, in alcune configurazioni di Drupal è risaputo l'impiego di @import. Guarda la documentazione di Respond.js per dettagli.

Internet Explorer 8 e box-sizing

IE8 non supporta pienamente box-sizing: border-box; quando combinato con min-width, max-width, min-height, o max-height. Per questa ragione, dalla versione v3.0.1, non usiamo più max-width sui .container.

IE Modalità Compatibilità

Bootstrap non è supportato nella veccia "Modalità Compatibilità" di Internet Explorer. Per essere sicuro che stai usando l'ultima modalità di visualizzazione (rendering), considera l'inclusione dell'apposito tag <meta> nelle tue pagine:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Conferma la modalità aprendo gli strumenti di debugging: schiaccia F12 e controlla la "Document Mode".

Questo tag è incluso in tutta la documentazione e in tutti gli esempi di Bootstrap per assicurare la miglior visualizzazione possibile in ogni versione supportata di Internet Explorer.

Guarda il quesito su StackOverflow per maggiori informazioni.

Internet Explorer 10 in Windows 8 e Windows Phone 8

Internet Explorer 10 non fa differenza tra device width e viewport width, e così non si applicano propriamente le media queries nel CSS di Bootstrap. Normalmente dovresti aggiungere una piccola istruzione CSS per ovviare alla cosa:

@-ms-viewport       { width: device-width; }

Tuttavia, questo non funziona per i dispositivi che utilizzano una versione di Windows Phone 8 non aggiornata almeno all'Update 3 (a.k.a. GDR3), in quanto causa la visione di una pagina in stile desktop piuttosto che una stretta in stile "smartphone". Per risolvere, dovresti includere il seguente codice CSS e JavaScript, così da aggirare il bug.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Per maggiori informazioni e linee guida, leggi questo Windows Phone 8 e il Device-Width.

D'avvertimento, è incluso nella documentazione Bootstrap come un esempio.

Arrotondamento di percentuali in Safari

Come per Safari v6.1 su OS X così su Safari per iOS v7.0.1, il motore di rendering ha qualche problema con il numero di posizioni decimali usate nelle classi delle nostre griglie .col-*-1. Quindi se avete 12 colonne individuali in griglia, le vedrete apparire corte se comparate con un'altra righa di colonne. Non possiamo farci granchè in questo caso (guarda #9282) ma hai qualche altra opzione:

Aggiungi .pull-right alla tua ultima colonna in griglia per avere un allineamento corretto a destra
Regola le percentuali manualmente per ottenere l'arrotondamento corretto per Safari (più difficile della prima opzione)

Terremo d'occhio questo problema e aggiorneremo il codice se troveremo una soluzione semplice.

Box Modali, navbars, e tastiere virtuali

Overflow e scrolling

Il supporto per overflow: hidden sull'elemento <body> è limitato su iOS e Android. A tal fine, quando scorri oltre la parte superiore o inferiore di un box modale in entrambi i browsers dei due OS mobile, il contenuto del <body> inizierà a scorrere.

Tastiere virtuali

Inoltre, notare che se usi input html nel box modale o nella navbar, iOS ha un bug di visualizzazione che fa si che non venga aggiornata la posizione degli elementi fissi quando la tastiera virtuale appare. Alcune possibili soluzioni includono il trasformare la posizione dei tuoi elementi in position: absolute oppure invocare un trigger sull'evento on focus per tentare di correggere manualmente la posizione. Questo non è gestito da Bootstrap, quindi sta a te decidere quale soluzione è da considerarsi migliore per la tua applicazione.

Navbar a discesa

L'elemento .dropdown-backdrop non è usato nel nav su iOS per via della complessità di z-indexing. Perciò, per chiudere i menu a discesa nella navbar, devi cliccare direttamente l'elemento di dropdown (o qualsiasi altro elemento che scatena l'evento click in iOS).

Browser e zoom

Lo zoom di pagine inevitabilmente presenta con alcuni componenti problemi di visualizzazione, in Bootstrap come nel resto del web. A seconda del problema, è possibile che possa essere risolto (cerca prima e se c'è ne bisogno apri un topic in proposito). Tuttavia, tendiamo sempre a ignorarli poichè spesso non hanno una soluzione diretta, si aggira il problema e basta.

Stampare le pagine

Persino nei browser moderni, qualche persona eccentrica preferisce stampare le pagine. In particolare, su Chrome v32 e senza tener conto delle impostazioni sui margini, Chrome usa una finestra di larghezza signifcamente stretta rispetto al foglio di carta fisico. Questo può portare inavvertitamente mentre si stampa all'attivazione in Bootstrap di una griglia extra-small. Guarda #12078 per altri dettagli. Soluzioni alternative proposte:

Accetta la griglia extra-small anomala e assicurati che la tua pagina appaia accettabile al di sotto di essa.
Modifica i valori delle variabili Less @screen-* in modo che la stampante consideri la pagina più grande di extra-small.
Aggiungi media queries personalizzate per cambiare la dimensione della griglia solo durante la stampa.

Browser di fabbrica su Android

Fuori dalla scatola, Android 4.1 (e persino altre release più recenti) utilizza come Browser App un'app per la navigazione predefinita (contrapposta a Chrome). Sfortunatamente, questi browser di default hanno molti bug e in generale inconsistenze CSS.

Menu di Selezione

Sugli elementi <select>, il Browser presente di default su Android non mostrerà il controllo laterale se c'è un border-radius e/o un border applicato. Usa il pezzo di codice qui sotto per rimuovere il CSS colpevole e renderizzare il <select> come un elemento senza stile sul browser di fabbrica del nostro smartphone Android. Captare l'user agent ci evita di interferire con i Browsers Chrome, Safari, e Mozilla.

<script>
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
  $('select.form-control').removeClass('form-control').css('width', '100%')
}
</script>

Vuoi vedere un Esempio? Dai un'occhiata a questa demo su JS Bin.

Non supportiamo plugin o add-ons di terze parti, offriamo invece, consigli utili su come evitare potenziali problemi nei tuoi progetti.

Box-sizing

Alcuni software esterni, che includono Google Maps e Google Custom Search Engine, vanno in conflitto con Bootstrap a causa di * { box-sizing: border-box; }, una regola che rende così padding inutile, poichè non influenza la larghezza (width) finale di un elemento. Leggi altro sul box model and sizing direttamente su CSS Tricks.

A seconda del contesto, puoi sovrascrivere a piacimento (Opzione 1) o resettare il box-sizing per intere regioni (Opzione 2).

/* Box-sizing resets
 *
 * Resetta elementi individuali o sovrascrivi intere regione per evitare conflitti a causa
 *  delle impostazioni globali del box model di Bootstrap. Due opzioni, sovrascrittura individuale e
 * reset di regioni, sono disponibili sottoforma di codice CSS e formato Less non compilato.
 */

/* Opzione 1A: Sovrascrive il box model di un singolo elemento via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opzione 1B: Sovrascrive il box model di un singolo elemento facendo uso di un mixin in Less */
.element {
  .box-sizing(content-box);
}

/* Opzione 2A: Resetta un'intera regione via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opzione 2B: Resetta un'intera regione facendo uso di un mixin personalizzato via Less */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Bootstrap segue i comuni standard del web e —con il minimo sforzo— può essere impiegato per creare siti accessibili a coloro che fan uso di tecnologie assistive, AT.

Salta navigazione

Se la tua barra di navigazione (verticale/orizzontale che sia) contiene molti link e viene prima del contenuto principale nel DOM, aggiungi un link Vai al contenuto principale subito dopo il tag di apertura <body>. (leggi perchè)

<body>
  <a href="#content" class="sr-only">Vai al contenuto principale</a>
  <div class="container" id="content">
    Contenuto principale della pagina.
  </div>
</body>

Intestazioni annidate

Quando si annidano più intestazioni (<h1> - <h6>), l'intestazione principale del tuo documento dovrebbe essere un <h1>. Le intestazioni seguenti dovrebbero logicamente usare <h2> - <h6> in modo che gli screen reader (software per persone con handicap visivi) possano costruire una tabella dei contenuti per le tue pagine.

Per saperne di più visita HTML CodeSniffer e Penn State's AccessAbility.

Risorse addizionali (in Inglese)

Ti richiede:

L'inserimento della nota di licenza e copyright nei tuoi lavori

Ti permette di:

Scaricare e usare Bootstrap, per intero o in parti, per scopi personali, privati, aziendali, o commerciali
Usare Bootstrap in pacchetti o in distribuzioni che realizzi
Modificare il codice sorgente
Concedere una sublicenza per modificare e distribuire Bootstrap a terzi non inclusi nella licenza

Ti proibisce di:

Ritenere autori e proprietari della licenza responsabili di eventuali danni, in quanto Bootstrap viene fornito senza alcuna garanzia
Ritenere autori e proprietari della licenza responsabili di Bootstrap
Redistribuire qualsiasi pezzo di Bootstrap senza le attribuzioni di proprietà
Utilizzare qualsiasi marchio detenuto da Twitter in modo che possa indicare o implicare che Twitter ne appoggia e condivide la distribuzione
Utilizzare qualsiasi marchio detenuto da Twitter in modo che possa indicare o implicare che tu hai creato il software in questione

Non ti richiede di:

Includere il codice di Bootstrap in sè, o qualsiasi altra modifica tu abbia apportato su di essa, in qualsiasi redistribuzione assemblata da te che fa uso di Bootstrap
Inviare le nuove modifiche apportate a Bootstrap al progetto Bootstrap (anche se incoraggiamo l'invio di feedback e miglioramenti)

Per maggiori informazioni l'intera licenza Bootstrap la trovi nella repository del progetto.

Bootstrap si mantiene meglio quando trattato come una dipendenza separata e indipendente nell'ambiente di sviluppo. Questo permette l'aggiornamento a una nuova versione di Bootstrap più facile in futuro.

Una volta che hai scaricato e incluso script e stili di Bootstrap, puoi personalizzarne i componenti. Basta creare un nuovo file di style (Less, se lo preferisci, oppure semplice codice CSS) per contenere le personalizzazioni.

Compilato o minimizzato?

A meno che non si abbia intenzione di leggere il CSS, vai di fogli di stile minimizzati. E' lo stesso codice, solo compattato. I fogli di stile minimizzati usano una banda (di connessione) minore, il che è una buona cosa, specialmente negli ambienti di produzione.

Da qui, includi qualsiasi componente di Bootstrap e contenuto HTML ti necessiti per creare template e pagine nel tuo sito.

Personalizzare i componenti

Puoi personalizzare i componenti a vari livelli, ma la maggior parte rientrano in due campi: personalizzazioni leggere e revisioni. Abbondanti esempi sono resi disponibili da sviluppatori di terze parti.

Le personalizzazioni leggere sono cambiamenti superficiali, per esempio, cambi di colore o carattere nei componenti esistenti di Bootstrap. Un esempio di personalizzazione leggera è il Twitter Translation Center (sviluppato da @mdo). Diamo un'occhiata all'implementazione del bottone scritto per questo sito, .btn-ttc.

I bottoni predefiniti di Bootstrap richiedono solo la classe .btn per iniziare. Qui estendiamo lo stile di .btn con una nuova classe modificata, .btn-ttc, che adesso realizziamo. Questo ci da un nuovo look con il minimo sforzo.

Il nostro bottone personalizzato sarà qualcosa del genere:

<button type="button" class="btn btn-ttc">Salva</button>

Nota come .btn-ttc è aggiunta alla normale classe .btn.

Per implementarlo, nel foglio di stile personalizzato, aggiungi il codice CSS seguente:

/* Bottone personalizzato
-------------------------------------------------- */

/* Sovrascrivi lo stile .btn di default */
/* Applica le modifiche sul testo e lo sfondo a: default, hover, e active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Applica i tuoi gradienti-colorati preferiti */
/* Nota: avrai bisogno di includere tutti i gradienti appropriati per ogni browser e standard. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Setta lo stato hover */
/* Settiamo uno stato hover molto semplice, giusto per muovere in alto il gradiente. Puoi aggiungere altri abbellimenti a piacere. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

In breve: guarda il codice del file di stile e duplica i selettori di cui hai bisogno per le modifiche.

Riepilogando, questo è il procedimento base da seguire:

Per ogni elemento che vuoi personalizzare, cerca il suo codice nei CSS compilati di Bootstrap.
Copia stile e selettore del componente e incollali nel tuo blocco di stile personalizzato. Per esempio, per personalizzare lo sfondo di una navbar, ti basta copiare lo stile di .navbar.
Nel tuo stylesheet (blocco o file CSS che sia), modifica il CSS appena copiato dal sorgente di Bootstrap. Non c'è bisogno di anteporre classi aggiuntive, o aggiungere !important qui. Manteniamo le cose semplici e non complichiamoci la vita.
Ripeti e ripeti finchè non sarai contento delle tue modifiche.

Una volta presa confidenza con le personalizzazioni leggere, revisioni visive saranno altrettanto semplici. Più lavoro è necessario per siti come Karma, che usa Bootstrap come un risistematore di CSS con pesanti modifiche. In ogni caso il principio applicato è sempre lo stesso: includi prima lo stile di default di Bootstrap, dopo applichi le tue personali modifiche su un blocco CSS che sovrascriverà le regole di default.

Metodi di personalizzazione alternativi

Mentre non lo raccomandiamo alla gente neofita con Bootstrap, puoi usare uno dei due metodi alternativi per fare una personalizzazione dei componenti. Il primo è modificare il sorgente dei file .less (fare aggiornamenti diviene super difficile), e il secondo è mappare il codice sorgente Less alle tue classi personalizzate via mixins. Per il momento, nessuna di queste opzioni viene documentata qui.

Rimuovere eventuali pesantezze

Non tutti i siti e applicazioni han bisogno di usare ogni cosa di Bootstrap, specialmente in fase di produzione in cui ottimizzare la banda diviene un problema. Ti incoraggiamo a rimuovere qualsiasi cosa non venga utilizzata con il nostro Customizer.

Come usare il Customizer, semplicemente deseleziona ogni componente, caratteristica, o asset di cui non hai bisogno. Schiaccia download e sostituisci i file di default di Bootstrap con questi nuovi allegeriti di ogni elemento non necessario. Otterrai vanilla Bootstrap, ma senza le caratteristiche che *TU* reputi non necessarie. Tutte i pacchetti "alleggeriti" includono versioni compilate e minimizzate, quindi usa quella che più si addice.

I membri della comunità hanno tradotto la documentazione di Bootstrap in varie lingue. Nessuna è ufficialmente supportata e potrebbero non essere sempre aggiornate.

Noi non aiutiamo nell'organizzare od hostare le traduzioni, ci limitiamo a linkarle.

Hai finito una nuova o miglior traduzione? Apri una nuova richiesta per aggiungerla alla nostra lista.

Download