Iniziare
Una panoramica di Bootstrap, come scaricare e utilizzare, modelli ed esempi di base e altro ancora.
Una panoramica di Bootstrap, come scaricare e utilizzare, modelli ed esempi di base e altro ancora.
Bootstrap (attualmente v3.3.7) ha alcuni semplici modi per iniziare rapidamente, ognuno dei quali fa appello a un diverso livello di abilità e caso d'uso. Leggi tutto per vedere cosa si adatta alle tue esigenze particolari.
CSS, JavaScript e font compilati e minimizzati. Non sono inclusi documenti o file di origine originali.
Source Less, JavaScript e file di font, insieme ai nostri documenti. Richiede un compilatore Less e alcune impostazioni.
Bootstrap è stato portato da Less a Sass per una facile inclusione nei progetti Rails, Compass o solo Sass.
La gente di jsDelivr fornisce gentilmente il supporto CDN per CSS e JavaScript di Bootstrap. Basta usare questi collegamenti CDN Bootstrap .
Puoi anche installare e gestire Less, CSS, JavaScript e font di Bootstrap utilizzando Bower :
Puoi anche installare Bootstrap usando npm :
require('bootstrap')
caricherà tutti i plugin jQuery di Bootstrap sull'oggetto jQuery. Il bootstrap
modulo stesso non esporta nulla. Puoi caricare manualmente i plugin jQuery di Bootstrap singolarmente caricando i /js/*.js
file nella directory di primo livello del pacchetto.
Bootstrap package.json
contiene alcuni metadati aggiuntivi sotto le seguenti chiavi:
less
- percorso del file sorgente Less principale di Bootstrapstyle
- percorso del CSS non minimizzato di Bootstrap che è stato precompilato utilizzando le impostazioni predefinite (nessuna personalizzazione)Puoi anche installare e gestire Less, CSS, JavaScript e font di Bootstrap usando Composer :
Bootstrap utilizza Autoprefixer per gestire i prefissi dei fornitori CSS . Se stai compilando Bootstrap dal suo sorgente Less/Sass e non usi il nostro Gruntfile, dovrai integrare tu stesso Autoprefixer nel tuo processo di build. Se stai usando Bootstrap precompilato o usando il nostro Gruntfile, non devi preoccuparti di questo perché Autoprefixer è già integrato nel nostro Gruntfile.
Bootstrap è scaricabile in due forme, all'interno delle quali troverai le seguenti directory e file, raggruppando logicamente le risorse comuni e fornendo variazioni sia compilate che ridotte.
Tieni presente che tutti i plugin JavaScript richiedono l'inclusione di jQuery, come mostrato nel modello iniziale . Consulta il nostrobower.json
per vedere quali versioni di jQuery sono supportate.
Una volta scaricato, decomprimi la cartella compressa per vedere la struttura di Bootstrap (compilato). Vedrai qualcosa del genere:
Questa è la forma più semplice di Bootstrap: file precompilati per un rapido utilizzo drop-in in quasi tutti i progetti web. Forniamo CSS e JS ( bootstrap.*
) compilati, nonché CSS e JS ( bootstrap.min.*
) compilati e minimizzati. Le mappe sorgente CSS ( bootstrap.*.map
) sono disponibili per l'uso con gli strumenti di sviluppo di alcuni browser. Sono inclusi i caratteri di Glyphicons, così come il tema Bootstrap opzionale.
Il download del codice sorgente Bootstrap include le risorse CSS, JavaScript e font precompilate, insieme a sorgente Less, JavaScript e documentazione. Nello specifico, include quanto segue e altro:
less/
, js/
, e sono il fonts/
codice sorgente per i nostri font CSS, JS e icone (rispettivamente). La dist/
cartella include tutto ciò che è elencato nella sezione di download precompilata sopra. La docs/
cartella include il codice sorgente per la nostra documentazione e examples/
l'utilizzo di Bootstrap. Oltre a ciò, qualsiasi altro file incluso fornisce supporto per pacchetti, informazioni sulla licenza e sviluppo.
Bootstrap utilizza Grunt per il suo sistema di compilazione, con metodi convenienti per lavorare con il framework. È il modo in cui compiliamo il nostro codice, eseguiamo test e altro ancora.
Per installare Grunt, devi prima scaricare e installare node.js (che include npm). npm sta per node packaged modules ed è un modo per gestire le dipendenze di sviluppo tramite node.js.
Quindi, dalla riga di comando:grunt-cli
globalmente con npm install -g grunt-cli
./bootstrap/
directory principale, quindi eseguire npm install
. npm esaminerà il package.json
file e installerà automaticamente le dipendenze locali necessarie elencate lì.Al termine, sarai in grado di eseguire i vari comandi Grunt forniti dalla riga di comando.
grunt dist
(Compila solo CSS e JavaScript)Rigenera la /dist/
directory con file CSS e JavaScript compilati e minimizzati. Come utente Bootstrap, questo è normalmente il comando che desideri.
grunt watch
(Guadare)Controlla i file sorgente Less e li ricompila automaticamente in CSS ogni volta che salvi una modifica.
grunt test
(Esegui test)Esegue JSHint ed esegue i test QUnit senza testa in PhantomJS .
grunt docs
(Crea e testa le risorse dei documenti)Crea e testa CSS, JavaScript e altri asset che vengono utilizzati durante l'esecuzione della documentazione in locale tramite bundle exec jekyll serve
.
grunt
(Costruisci assolutamente tutto ed esegui test)Compila e minimizza CSS e JavaScript, crea il sito Web della documentazione, esegue il validatore HTML5 sui documenti, rigenera le risorse del Customizer e altro ancora. Richiede Jekyll . Di solito è necessario solo se stai hackerando Bootstrap stesso.
In caso di problemi con l'installazione delle dipendenze o con l'esecuzione dei comandi Grunt, eliminare prima la /node_modules/
directory generata da npm. Quindi, riesegui npm install
.
Inizia con questo modello HTML di base o modifica questi esempi . Ci auguriamo che personalizzerai i nostri modelli ed esempi, adattandoli alle tue esigenze.
Copia l'HTML di seguito per iniziare a lavorare con un documento Bootstrap minimo.
Costruisci sul modello di base sopra con i numerosi componenti di Bootstrap. Ti invitiamo a personalizzare e adattare Bootstrap alle esigenze del tuo progetto.
Ottieni il codice sorgente per ogni esempio di seguito scaricando il repository Bootstrap . Gli esempi possono essere trovati nella docs/examples/
directory.
Modello super semplice che include la barra di navigazione insieme ad alcuni contenuti aggiuntivi.
Personalizza la barra di navigazione e il carosello, quindi aggiungi alcuni nuovi componenti.
Struttura di base per una dashboard di amministrazione con barra laterale e barra di navigazione fisse.
Crea una barra di navigazione personalizzata con collegamenti giustificati. Dritta! Non troppo adatto a Safari.
Disabilita facilmente la reattività di Bootstrap secondo i nostri documenti .
Bootlint è lo strumento di linter HTML ufficiale di Bootstrap. Verifica automaticamente la presenza di diversi errori HTML comuni nelle pagine Web che utilizzano Bootstrap in un modo abbastanza "vanigliato". I componenti/widget di Vanilla Bootstrap richiedono che le loro parti del DOM siano conformi a determinate strutture. Bootlint verifica che le istanze dei componenti Bootstrap abbiano HTML strutturato correttamente. Prendi in considerazione l'aggiunta di Bootlint alla tua toolchain di sviluppo web Bootstrap in modo che nessuno degli errori comuni rallenti lo sviluppo del tuo progetto.
Rimani aggiornato sullo sviluppo di Bootstrap e contatta la community con queste utili risorse.
irc.freenode.net
server, nel canale ##bootstrap .twitter-bootstrap-3
.bootstrap
sui pacchetti che modificano o aggiungono funzionalità di Bootstrap durante la distribuzione tramite npm o meccanismi di consegna simili per la massima rilevabilità.Puoi anche seguire @getbootstrap su Twitter per gli ultimi gossip e fantastici video musicali.
Bootstrap adatta automaticamente le tue pagine alle varie dimensioni dello schermo. Ecco come disabilitare questa funzione in modo che la tua pagina funzioni come questo esempio non reattivo .
<meta>
menzionato nei documenti CSSwidth
su .container
per ogni livello della griglia con una singola larghezza, ad esempio width: 970px !important;
Assicurati che questo venga dopo il CSS Bootstrap predefinito. Puoi opzionalmente evitare le !important
query con i media o alcuni selector-fu..col-xs-*
classi in aggiunta o al posto di quelle medio/grandi. Non preoccuparti, la griglia del dispositivo extra-piccola si adatta a tutte le risoluzioni.Avrai ancora bisogno di Respond.js per IE8 (poiché le nostre query multimediali sono ancora presenti e devono essere elaborate). Ciò disabilita gli aspetti del "sito mobile" di Bootstrap.
Abbiamo applicato questi passaggi a un esempio. Leggi il suo codice sorgente per vedere le modifiche specifiche implementate.
Stai cercando di migrare da una versione precedente di Bootstrap alla v3.x? Consulta la nostra guida alla migrazione .
Bootstrap è progettato per funzionare al meglio con i browser desktop e mobili più recenti, il che significa che i browser meno recenti potrebbero visualizzare rendering con stili diversi, sebbene completamente funzionanti, di determinati componenti.
In particolare, supportiamo le ultime versioni dei seguenti browser e piattaforme.
I browser alternativi che utilizzano l'ultima versione di WebKit, Blink o Gecko, direttamente o tramite l'API di visualizzazione Web della piattaforma, non sono esplicitamente supportati. Tuttavia, Bootstrap dovrebbe (nella maggior parte dei casi) essere visualizzato e funzionare correttamente anche in questi browser. Di seguito sono fornite informazioni di supporto più specifiche.
In generale, Bootstrap supporta le ultime versioni dei browser predefiniti di ciascuna delle principali piattaforme. Tieni presente che i browser proxy (come Opera Mini, la modalità Turbo di Opera Mobile, UC Browser Mini, Amazon Silk) non sono supportati.
Cromo | Firefox | Safari | |
---|---|---|---|
Androide | Supportato | Supportato | N / A |
iOS | Supportato | Supportato | Supportato |
Allo stesso modo, sono supportate le ultime versioni della maggior parte dei browser desktop.
Cromo | Firefox | Internet Explorer | musica lirica | Safari | |
---|---|---|---|---|---|
Mac | Supportato | Supportato | N / A | Supportato | Supportato |
finestre | Supportato | Supportato | Supportato | Supportato | Non supportato |
Su Windows, supportiamo Internet Explorer 8-11 .
Per Firefox, oltre all'ultima versione stabile normale, supportiamo anche l'ultima versione Extended Support Release (ESR) di Firefox.
Ufficiosamente, Bootstrap dovrebbe apparire e comportarsi abbastanza bene in Chromium e Chrome per Linux, Firefox per Linux e Internet Explorer 7, nonché in Microsoft Edge, sebbene non siano ufficialmente supportati.
Per un elenco di alcuni dei bug del browser con cui Bootstrap deve confrontarsi, consulta il nostro Muro dei bug del browser .
Sono supportati anche Internet Explorer 8 e 9, tuttavia, tieni presente che alcune proprietà CSS3 ed elementi HTML5 non sono completamente supportati da questi browser. Inoltre, Internet Explorer 8 richiede l'uso di Respond.js per abilitare il supporto delle query multimediali.
Caratteristica | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Non supportato | Supportato |
box-shadow |
Non supportato | Supportato |
transform |
Non supportato | Supportato, con -ms prefisso |
transition |
Non supportato | |
placeholder |
Non supportato |
Visita Posso usare... per i dettagli sul supporto del browser delle funzionalità CSS3 e HTML5.
Fai attenzione ai seguenti avvertimenti quando usi Respond.js nei tuoi ambienti di sviluppo e produzione per Internet Explorer 8.
L'utilizzo di Respond.js con CSS ospitato su un (sotto)dominio diverso (ad esempio su una CDN) richiede alcune impostazioni aggiuntive. Per i dettagli, vedere i documenti Respond.js .
file://
A causa delle regole di sicurezza del browser, Respond.js non funziona con le pagine visualizzate tramite il file://
protocollo (come quando si apre un file HTML locale). Per testare le funzionalità reattive in IE8, visualizza le tue pagine su HTTP(S). Per i dettagli, vedere i documenti Respond.js .
@import
Respond.js non funziona con CSS a cui si fa riferimento tramite @import
. In particolare, è noto che alcune configurazioni di Drupal utilizzano @import
. Per i dettagli, vedere i documenti Respond.js .
IE8 non supporta completamente box-sizing: border-box;
se combinato con min-width
, max-width
, min-height
o max-height
. Per questo motivo, a partire dalla v3.0.1, non utilizziamo più max-width
su .container
s.
IE8 presenta alcuni problemi @font-face
se combinato con :before
. Bootstrap usa quella combinazione con i suoi Glyphicons. Se una pagina è memorizzata nella cache e caricata senza il mouse sopra la finestra (cioè premere il pulsante di aggiornamento o caricare qualcosa in un iframe), la pagina viene renderizzata prima del caricamento del carattere. Passando il mouse sopra la pagina (corpo) verranno visualizzate alcune icone e passando il mouse sopra le icone rimanenti verranno visualizzate anche quelle. Vedere il numero 13863 per i dettagli.
Bootstrap non è supportato nelle vecchie modalità di compatibilità di Internet Explorer. Per essere sicuro di utilizzare la modalità di rendering più recente per IE, considera di includere il <meta>
tag appropriato nelle tue pagine:
Conferma la modalità documento aprendo gli strumenti di debug: premi F12e spunta la voce "Modalità documento".
Questo tag è incluso in tutta la documentazione e gli esempi di Bootstrap per garantire il miglior rendering possibile in ogni versione supportata di Internet Explorer.
Vedere questa domanda StackOverflow per ulteriori informazioni.
Internet Explorer 10 non differenzia la larghezza del dispositivo dalla larghezza del viewport e quindi non applica correttamente le query multimediali nel CSS di Bootstrap. Normalmente dovresti semplicemente aggiungere un rapido snippet di CSS per risolvere questo problema:
Tuttavia, questo non funziona per i dispositivi che eseguono versioni di Windows Phone 8 precedenti all'aggiornamento 3 (noto anche come GDR3) , poiché fa sì che tali dispositivi mostrino principalmente una vista desktop anziché una vista "telefono" ristretta. Per risolvere questo problema, dovrai includere i seguenti CSS e JavaScript per aggirare il bug .
Per ulteriori informazioni e linee guida sull'utilizzo, leggi Windows Phone 8 e Device-Width .
Come avvertimento, lo includiamo in tutta la documentazione e gli esempi di Bootstrap come dimostrazione.
Il motore di rendering delle versioni di Safari precedenti alla v7.1 per OS X e Safari per iOS v8.0 ha avuto problemi con il numero di cifre decimali utilizzate nelle nostre .col-*-1
classi di griglia. Quindi, se avessi 12 singole colonne della griglia, noterai che sono risultate corte rispetto ad altre righe di colonne. Oltre all'aggiornamento di Safari/iOS, hai alcune opzioni per soluzioni alternative:
.pull-right
alla tua ultima colonna della griglia per ottenere l'allineamento a destraIl supporto per overflow: hidden
l' <body>
elemento è piuttosto limitato in iOS e Android. A tal fine, quando scorri oltre la parte superiore o inferiore di una modale in uno dei browser di questi dispositivi, il <body>
contenuto inizierà a scorrere. Vedi il bug di Chrome n. 175502 (risolto in Chrome v40) e il bug di WebKit n. 153852 .
A partire da iOS 9.3, mentre una modale è aperta, se il tocco iniziale di un gesto di scorrimento è all'interno del confine di un testo <input>
o di un <textarea>
, il <body>
contenuto sotto la modale verrà fatto scorrere invece del modale stesso. Vedere il bug di WebKit n. 153856 .
Inoltre, tieni presente che se stai utilizzando una barra di navigazione fissa o utilizzi input all'interno di una modale, iOS ha un bug di rendering che non aggiorna la posizione degli elementi fissi quando viene attivata la tastiera virtuale. Alcune soluzioni alternative includono la trasformazione dei tuoi elementi position: absolute
o l'invocazione di un timer a fuoco per provare a correggere il posizionamento manualmente. Questo non è gestito da Bootstrap, quindi spetta a te decidere quale soluzione è la migliore per la tua applicazione.
L' .dropdown-backdrop
elemento non viene utilizzato in iOS nella navigazione a causa della complessità dell'indicizzazione z. Pertanto, per chiudere i menu a discesa nelle barre di navigazione, è necessario fare clic direttamente sull'elemento a discesa (o su qualsiasi altro elemento che attiverà un evento click in iOS ).
Lo zoom della pagina presenta inevitabilmente artefatti di rendering in alcuni componenti, sia in Bootstrap che nel resto del web. A seconda del problema, potremmo essere in grado di risolverlo (cerca prima e poi apri un problema, se necessario). Tuttavia, tendiamo a ignorarli poiché spesso non hanno una soluzione diretta diversa da soluzioni alternative hacky.
:hover
/ :focus
sul cellulareAnche se il vero hovering non è possibile sulla maggior parte dei touchscreen, la maggior parte dei browser mobili emula il supporto hovering e rende :hover
"appiccicoso". In altre parole, :hover
gli stili iniziano ad applicarsi dopo aver toccato un elemento e smettono di applicarsi solo dopo che l'utente ha toccato un altro elemento. Ciò può causare il :hover
"blocco" indesiderato degli stati di Bootstrap su tali browser. Anche alcuni browser mobili rendono :focus
appiccicoso in modo simile. Al momento non esiste una soluzione semplice per questi problemi oltre alla rimozione completa di tali stili.
Anche in alcuni browser moderni, la stampa può essere bizzarra.
In particolare, a partire da Chrome v32 e indipendentemente dalle impostazioni dei margini, Chrome utilizza una larghezza del viewport significativamente più stretta del formato fisico della carta quando risolve le query sui media durante la stampa di una pagina web. Ciò può comportare l'attivazione inaspettata della griglia extra-piccola di Bootstrap durante la stampa. Vedere il problema n. 12078 e il bug di Chrome n. 273306 per alcuni dettagli. Soluzioni alternative suggerite:
@screen-*
variabili Less in modo che la carta della stampante sia considerata più grande di extra-piccola.Inoltre, a partire da Safari v8.0, i messaggi a larghezza fissa .container
possono far sì che Safari utilizzi una dimensione del carattere insolitamente piccola durante la stampa. Vedere #14868 e WebKit bug #138192 per maggiori dettagli. Una potenziale soluzione per questo è l'aggiunta del seguente CSS:
Per impostazione predefinita, Android 4.1 (e apparentemente anche alcune versioni più recenti) viene fornito con l'app Browser come browser Web predefinito preferito (al contrario di Chrome). Sfortunatamente, l'app Browser ha molti bug e incongruenze con i CSS in generale.
Sugli <select>
elementi, il browser stock Android non visualizzerà i controlli laterali se è presente un border-radius
e/o border
applicato. (Vedi questa domanda StackOverflow per i dettagli.) Usa lo snippet di codice qui sotto per rimuovere il CSS offensivo e renderizzalo <select>
come elemento senza stile nel browser stock Android. Lo sniffing dell'agente utente evita interferenze con i browser Chrome, Safari e Mozilla.
Vuoi vedere un esempio? Dai un'occhiata a questa demo di JS Bin.
Per fornire la migliore esperienza possibile a browser vecchi e difettosi, Bootstrap utilizza hack del browser CSS in diversi punti per indirizzare CSS speciali a determinate versioni del browser al fine di aggirare i bug nei browser stessi. Questi hack comprensibilmente fanno sì che i validatori CSS si lamentino di non essere validi. In un paio di punti, utilizziamo anche funzionalità CSS all'avanguardia che non sono ancora completamente standardizzate, ma vengono utilizzate esclusivamente per il miglioramento progressivo.
Questi avvisi di convalida non contano in pratica poiché la parte non hackerata del nostro CSS si convalida completamente e le parti non modificate non interferiscono con il corretto funzionamento della parte non hackerata, quindi perché ignoriamo deliberatamente questi particolari avvisi.
Anche i nostri documenti HTML contengono alcuni avvisi di convalida HTML banali e irrilevanti a causa della nostra inclusione di una soluzione alternativa per un determinato bug di Firefox .
Sebbene non supportiamo ufficialmente alcun plug-in o componente aggiuntivo di terze parti, offriamo alcuni consigli utili per evitare potenziali problemi nei tuoi progetti.
Alcuni software di terze parti, inclusi Google Maps e Google Custom Search Engine, entrano in conflitto con Bootstrap a causa di * { box-sizing: border-box; }
, una regola che padding
non influisce sulla larghezza finale calcolata di un elemento. Scopri di più sul modello e sul dimensionamento della scatola in CSS Tricks .
A seconda del contesto, è possibile eseguire l'override in base alle esigenze (opzione 1) o reimpostare il ridimensionamento della casella per intere regioni (opzione 2).
Bootstrap segue standard Web comuni e, con il minimo sforzo aggiuntivo, può essere utilizzato per creare siti accessibili a coloro che utilizzano AT .
Se la tua navigazione contiene molti link e precede il contenuto principale nel DOM, aggiungi un Skip to main content
link prima della navigazione (per una semplice spiegazione, consulta questo articolo del progetto A11Y sui link per saltare la navigazione ). L'uso della .sr-only
classe nasconderà visivamente il collegamento di salto e la .sr-only-focusable
classe assicurerà che il collegamento diventi visibile una volta focalizzato (per gli utenti vedenti della tastiera).
A causa di carenze/bug di lunga data in Chrome (vedi problema 262171 nel bug tracker di Chromium ) e Internet Explorer (vedi questo articolo sui link in-page e sull'ordine del focus ), dovrai assicurarti che la destinazione del tuo link salta è almeno programmaticamente attivabile aggiungendotabindex="-1"
.
Inoltre, potresti voler sopprimere in modo esplicito un'indicazione di messa a fuoco visibile sulla destinazione (in particolare perché Chrome attualmente imposta anche la messa a fuoco sugli elementi con tabindex="-1"
quando vengono cliccati con il mouse) con #content:focus { outline: none; }
.
Tieni presente che questo bug influirà anche su qualsiasi altro collegamento in-page che il tuo sito potrebbe utilizzare, rendendoli inutili per gli utenti della tastiera. Potresti prendere in considerazione l'aggiunta di una soluzione tampone simile a tutti gli altri identificatori di ancoraggio/frammento denominati che fungono da destinazioni di collegamento.
Quando si annidano le intestazioni ( <h1>
- <h6>
), l'intestazione del documento principale dovrebbe essere un file <h1>
. I titoli successivi dovrebbero fare un uso logico di <h2>
-<h6>
in modo tale che gli screen reader possano costruire un sommario per le tue pagine.
Ulteriori informazioni su HTML CodeSniffer e AccessAbility di Penn State .
Attualmente, alcune delle combinazioni di colori predefinite disponibili in Bootstrap (come le varie classi di pulsanti in stile , alcuni dei colori di evidenziazione del codice utilizzati per i blocchi di codice di base , la classe di supporto .bg-primary
contestuale dello sfondo e il colore del collegamento predefinito quando utilizzato su uno sfondo bianco) avere un basso rapporto di contrasto (al di sotto del rapporto consigliato di 4,5:1 ). Ciò può causare problemi agli utenti ipovedenti o daltonici. Potrebbe essere necessario modificare questi colori predefiniti per aumentarne il contrasto e la leggibilità.
Bootstrap è rilasciato sotto licenza MIT ed è copyright 2016 di Twitter. Ridotto a pezzi più piccoli, può essere descritto con le seguenti condizioni.
La licenza Bootstrap completa si trova nel repository del progetto per ulteriori informazioni.
I membri della comunità hanno tradotto la documentazione di Bootstrap in varie lingue. Nessuno è ufficialmente supportato e potrebbero non essere sempre aggiornati.
Non aiutiamo a organizzare o ospitare traduzioni, ci limitiamo a collegarci ad esse.
Hai terminato una traduzione nuova o migliore? Apri una richiesta pull per aggiungerla al nostro elenco.