Scarica

Bootstrap (attualmente v3.4.1) 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.

jsDelivr

La gente di jsDelivr fornisce gentilmente il supporto CDN per CSS e JavaScript di Bootstrap. Basta usare questi collegamenti jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Installa con Bower

Puoi anche installare e gestire Less, CSS, JavaScript e font di Bootstrap utilizzando Bower :

bower install bootstrap

Installa con npm

Puoi anche installare Bootstrap usando npm :

npm install bootstrap@3

require('bootstrap')caricherà tutti i plugin jQuery di Bootstrap sull'oggetto jQuery. Il bootstrapmodulo stesso non esporta nulla. Puoi caricare manualmente i plugin jQuery di Bootstrap singolarmente caricando i /js/*.jsfile nella directory di primo livello del pacchetto.

Bootstrap package.jsoncontiene alcuni metadati aggiuntivi sotto le seguenti chiavi:

• less- percorso del file sorgente Less principale di Bootstrap
• style- percorso del CSS non minimizzato di Bootstrap che è stato precompilato utilizzando le impostazioni predefinite (nessuna personalizzazione)

Installa con Composer

Puoi anche installare e gestire Less, CSS, JavaScript e font di Bootstrap usando Composer :

composer require twbs/bootstrap

Prefisso automatico richiesto per Less/Sass

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 il nostro Gruntfile, non devi preoccuparti di questo perché Autoprefixer è già integrato nel nostro Gruntfile.

Cosa è incluso

Bootstrap è scaricabile in due forme, all'interno delle quali troverai le seguenti directory e file, raggruppando logicamente risorse comuni e fornendo variazioni sia compilate che ridotte.

Bootstrap precompilato

Una volta scaricato, decomprimi la cartella compressa per vedere la struttura di Bootstrap (compilato). Vedrai qualcosa del genere:

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

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.

Codice sorgente Bootstrap

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:

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

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.

Compilazione CSS e JavaScript

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.

Installazione di Grunt

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.

1. Installa grunt-cliglobalmente con npm install -g grunt-cli.
2. Passare alla /bootstrap/directory principale, quindi eseguire npm install. npm esaminerà il package.jsonfile 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.

Comandi Grunt disponibili

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 in browser reali grazie a Karma .

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.

Risoluzione dei problemi

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.

Modello di base

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.

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Esempi

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.

Usando il quadro

Modello iniziale

Nient'altro che le basi: CSS e JavaScript compilati insieme a un contenitore.

Tema Bootstrap

Carica il tema Bootstrap opzionale per un'esperienza visivamente migliorata.

Griglie

Esempi multipli di layout di griglia con tutti e quattro i livelli, nidificazione e altro.

Jumbotron

Costruisci attorno al jumbotron con una barra di navigazione e alcune colonne della griglia di base.

Jumbotron stretto

Crea una pagina più personalizzata restringendo il contenitore predefinito e il jumbotron.

Navbar in azione

barra di navigazione

Modello super semplice che include la barra di navigazione insieme ad alcuni contenuti aggiuntivi.

Barra di navigazione superiore statica

Modello super semplice con una barra di navigazione superiore statica insieme ad alcuni contenuti aggiuntivi.

Barra di navigazione fissa

Modello super semplice con una barra di navigazione superiore fissa insieme ad alcuni contenuti aggiuntivi.

Componenti personalizzati

Coperchio

Un modello di una pagina per la creazione di home page semplici e belle.

Giostra

Personalizza la barra di navigazione e il carosello, quindi aggiungi alcuni nuovi componenti.

Blog

Semplice layout del blog a due colonne con navigazione, intestazione e tipo personalizzati.

Pannello di controllo

Struttura di base per una dashboard di amministrazione con barra laterale e barra di navigazione fisse.

Pagina di accesso

Layout e design del modulo personalizzati per un semplice modulo di accesso.

nav giustificato

Crea una barra di navigazione personalizzata con collegamenti giustificati. Dritta! Non troppo adatto a Safari.

Piè di pagina appiccicoso

Allega un piè di pagina nella parte inferiore della finestra quando il contenuto è più corto di esso.

Piè di pagina appiccicoso con barra di navigazione

Attacca un piè di pagina alla parte inferiore della finestra con una barra di navigazione fissa in alto.

Esperimenti

Bootstrap non reattivo

Disabilita facilmente la reattività di Bootstrap secondo i nostri documenti .

Fuori tela

Crea un menu di navigazione fuori tela attivabile da utilizzare con Bootstrap.

Strumenti

Bootlint

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.

Comunità

Rimani aggiornato sullo sviluppo di Bootstrap e contatta la community con queste utili risorse.

• Leggi e iscriviti al blog ufficiale di Bootstrap .
• Chatta con altri Bootstrapper usando IRC nel irc.freenode.netserver, nel canale ##bootstrap .
• Per assistenza sull'utilizzo di Bootstrap, chiedi su StackOverflow utilizzando il tagtwitter-bootstrap-3 .
• Gli sviluppatori dovrebbero utilizzare la parola chiave bootstrapsui pacchetti che modificano o aggiungono funzionalità di Bootstrap durante la distribuzione tramite npm o meccanismi di consegna simili per la massima rilevabilità.
• Trova esempi stimolanti di persone che costruiscono con Bootstrap al Bootstrap Expo .

Puoi anche seguire @getbootstrap su Twitter per gli ultimi gossip e fantastici video musicali.

Disabilitazione della reattività

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 .

Passaggi per disabilitare la reattività della pagina

1. Ometti il ​​viewport <meta>menzionato nei documenti CSS
2. Sovrascrivi widthsu .containerper 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 !importantquery con i media o alcuni selector-fu.
3. Se si utilizzano le barre di navigazione, rimuovere tutti i comportamenti di compressione ed espansione della barra di navigazione.
4. Per i layout a griglia, utilizzare .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.

Modello Bootstrap con reattività disabilitata

Abbiamo applicato questi passaggi a un esempio. Leggi il suo codice sorgente per vedere le modifiche specifiche implementate.

Visualizza esempio non reattivo

Browser e supporto del dispositivo

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.

Browser supportati

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.

Dispositivi mobili

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.

Browser desktop

Allo stesso modo, sono supportate le ultime versioni della maggior parte dei browser desktop.

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 .

Internet Explorer 8 e 9

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.

Visita Posso usare... per i dettagli sul supporto del browser delle funzionalità CSS3 e HTML5.

Internet Explorer 8 e Respond.js

Fai attenzione ai seguenti avvertimenti quando usi Respond.js nei tuoi ambienti di sviluppo e produzione per Internet Explorer 8.

Respond.js e CSS interdominio

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 .

Respond.js efile://

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 .

Respond.js e@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 .

Internet Explorer 8 e il formato della scatola

IE8 non supporta completamente box-sizing: border-box;se combinato con min-width, max-width, min-heighto max-height. Per questo motivo, a partire dalla v3.0.1, non utilizziamo più max-widthsu .containers.

Internet Explorer 8 e @font-face

IE8 presenta alcuni problemi @font-facese 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.

Modalità di compatibilità IE

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:

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

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 in Windows 8 e Windows Phone 8

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:

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

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 ristretta del "telefono". Per risolvere questo problema, dovrai includere i seguenti CSS e JavaScript per aggirare il bug .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
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 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.

Arrotondamento percentuale di Safari

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-*-1classi 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:

• Aggiungi .pull-rightalla tua ultima colonna della griglia per ottenere l'allineamento a destra
• Modifica manualmente le tue percentuali per ottenere l'arrotondamento perfetto per Safari (più difficile della prima opzione)

Modali, barre di navigazione e tastiere virtuali

Overflow e scorrimento

Il supporto per overflow: hiddenl' <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 .

Campi di testo iOS e scorrimento

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 .

Tastiere virtuali

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: absoluteo 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.

Menu a discesa della barra di navigazione

L' .dropdown-backdropelemento non viene utilizzato su iOS nel nav 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 clic in iOS ).

Zoom del browser

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.

Appiccicoso :hover/ :focussul cellulare

Anche 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, :hovergli 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 :focusappiccicoso in modo simile. Al momento non esiste una soluzione semplice per questi problemi oltre alla rimozione completa di tali stili.

Stampa

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:

• Abbraccia la griglia extra-piccola e assicurati che la tua pagina sia accettabile sotto di essa.
• Personalizza i valori delle @screen-*variabili Less in modo che la carta della stampante sia considerata più grande di extra-piccola.
• Aggiungi media query personalizzate per modificare i punti di interruzione delle dimensioni della griglia solo per i supporti di stampa.

Inoltre, a partire da Safari v8.0, i messaggi a larghezza fissa .containerpossono 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:

@media print {
  .container {
    width: auto;
  }
}

Browser per azioni Android

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.

Seleziona i menu

Sugli <select>elementi, il browser stock Android non visualizzerà i controlli laterali se è presente un border-radiuse/o borderapplicato. (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.

<script>
$(function () {
  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 di JS Bin.

Validatori

Al fine di fornire la migliore esperienza possibile a browser vecchi e con bug, 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.

I nostri documenti HTML hanno anche alcuni avvisi di convalida HTML banali e irrilevanti a causa della nostra inclusione di una soluzione alternativa per un determinato bug di Firefox .

Supporto di terze parti

Sebbene non supportiamo ufficialmente plug-in o componenti aggiuntivi di terze parti, offriamo alcuni consigli utili per evitare potenziali problemi nei tuoi progetti.

Dimensioni della scatola

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 paddingnon 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).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region 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;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Accessibilità

Bootstrap segue standard Web comuni e, con il minimo sforzo aggiuntivo, può essere utilizzato per creare siti accessibili a coloro che utilizzano AT .

Salta la navigazione

Se la tua navigazione contiene molti link e precede il contenuto principale nel DOM, aggiungi un Skip to main contentlink prima della navigazione (per una semplice spiegazione, consulta questo articolo del progetto A11Y sui link per saltare la navigazione ). L'uso della .sr-onlyclasse nasconderà visivamente il collegamento di salto e la .sr-only-focusableclasse assicurerà che il collegamento diventi visibile una volta focalizzato (per gli utenti vedenti della tastiera).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Intestazioni nidificate

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 .

Contrasto di colore

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

Risorse addizionali

• Booklet "HTML Codesniffer" per identificare i problemi di accessibilità
• Estensione degli strumenti per gli sviluppatori di accessibilità di Chrome
• Analizzatore di contrasto di colore
• Il progetto A11Y
• Documentazione sull'accessibilità MDN

Domande frequenti sulla licenza

Bootstrap è rilasciato sotto licenza MIT ed è copyright 2019 di Twitter. Ridotto a pezzi più piccoli, può essere descritto con le seguenti condizioni.

Ti richiede di:

• Conserva la licenza e l'avviso di copyright inclusi nei file CSS e JavaScript di Bootstrap quando li usi nelle tue opere

Ti permette di:

• Scarica e utilizza liberamente Bootstrap, in tutto o in parte, per scopi personali, privati, interni all'azienda o commerciali
• Usa Bootstrap nei pacchetti o nelle distribuzioni che crei
• Modifica il codice sorgente
• Concedi una sublicenza per modificare e distribuire Bootstrap a terze parti non incluse nella licenza

Ti vieta di:

• Ritenere gli autori e i proprietari delle licenze responsabili per danni poiché Bootstrap è fornito senza garanzia
• Ritieni responsabili i creatori o i detentori del copyright di Bootstrap
• Ridistribuisci qualsiasi pezzo di Bootstrap senza una corretta attribuzione
• Utilizzare qualsiasi marchio di proprietà di Twitter in qualsiasi modo che possa affermare o implicare che Twitter approvi la tua distribuzione
• Utilizzare qualsiasi marchio di proprietà di Twitter in qualsiasi modo che possa affermare o implicare che hai creato il software Twitter in questione

Non richiede di:

• Includere la fonte di Bootstrap stesso, o di eventuali modifiche che potresti aver apportato ad esso, in qualsiasi ridistribuzione che potresti assemblare che lo includa
• Invia le modifiche apportate a Bootstrap al progetto Bootstrap (sebbene tale feedback sia incoraggiato)

La licenza Bootstrap completa si trova nel repository del progetto per ulteriori informazioni.

Traduzioni

I membri della comunità hanno tradotto la documentazione di Bootstrap in varie lingue. Nessuno è ufficialmente supportato e potrebbero non essere sempre aggiornati.

• Bootstrap 中文文档 (cinese)
• Bootstrap på Dansk (danese)
• Bootstrap in francese (francese)
• Bootstrap auf Deutsch (tedesco)
• Bootstrap in Italiano (Italiano)
• Bootstrap 한국어 (coreano)
• Bootstrap em Português do Brasil (portoghese brasiliano)
• Bootstrap по-русски (russo)
• Bootstrap en Español (spagnolo)
• Türkçe Bootstrap (turco)
• Bootstrap українською (ucraino)
• Bootstrap bằng tiếng Việt (vietnamita)

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.