Scaricate

Bootstrap (attualmente v3.4.1) hà uni pochi di modi facili per inizià rapidamente, ognuna attraente à un livellu di cumpetenza è un casu d'usu differenti. Leghjite per vede ciò chì si adatta à i vostri bisogni particulari.

jsDelivr

A ghjente di jsDelivr furnisce graziamente supportu CDN per CSS è JavaScript di Bootstrap. Basta à aduprà sti ligami 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 cù Bower

Pudete ancu installà è gestisce Bootstrap's Less, CSS, JavaScript è fonti cù Bower :

bower install bootstrap

Installa cù npm

Pudete ancu installà Bootstrap cù npm :

npm install bootstrap@3

require('bootstrap')caricarà tutti i plugins jQuery di Bootstrap nantu à l'ughjettu jQuery. U bootstrapmodulu stessu ùn exporta nunda. Pudete carricà manualmente i plugins jQuery di Bootstrap individualmente carchendu i /js/*.jsfugliali sottu u cartulare di primu livellu di u pacchettu.

Bootstrap package.jsoncuntene alcune metadati supplementari sottu à e seguenti chjave:

• less- percorsu à u principale di u schedariu source Less di Bootstrap
• style- percorsu à u CSS micca minificatu di Bootstrap chì hè statu precumpilatu cù i paràmetri predeterminati (senza persunalizazione)

Installa cù Composer

Pudete ancu installà è gestisce Bootstrap's Less, CSS, JavaScript è fonti cù Composer :

composer require twbs/bootstrap

Autoprefixer necessariu per Less/Sass

Bootstrap usa Autoprefixer per trattà i prefissi di u venditore CSS . Sè vo compilate Bootstrap da a so fonte Less / Sass è ùn utilizate micca u nostru Gruntfile, avete bisognu di integrà Autoprefixer in u vostru prucessu di creazione. Sè vo aduprate Bootstrap precumpilatu o aduprendu u nostru Gruntfile, ùn avete micca bisognu di preoccupari perchè Autoprefixer hè digià integratu in u nostru Gruntfile.

Ciò chì hè inclusu

Bootstrap hè scaricabile in duie forme, in quale truverete i seguenti cartulari è fugliali, raggruppendu logicamente risorse cumuni è furnisce variazioni cumpilate è minificate.

Bootstrap precumpilatu

Una volta scaricatu, scumpressate u cartulare cumpressu per vede a struttura di (u compilatu) Bootstrap. Vi vede qualcosa cum'è questu:

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 hè a forma più basica di Bootstrap: i fugliali precompilati per un usu di drop-in rapidu in quasi ogni prughjettu web. Furnemu CSS è JS compilati ( bootstrap.*), è ancu CSS è JS ( bootstrap.min.*) compilati è minificati. I mape di fonte CSS ( bootstrap.*.map) sò dispunibuli per l'usu cù l'arnesi di sviluppu di certi navigatori. I fonts da Glyphicons sò inclusi, cum'è u tema Bootstrap opzionale.

Bootstrap codice fonte

U scaricamentu di u codice fonte di Bootstrap include i CSS precompilati, JavaScript è l'assi di font, inseme cù a fonte Less, JavaScript è a documentazione. Più specificamente, include i seguenti è più:

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

I less/, js/, è fonts/sò u codice fonte per i nostri fonti CSS, JS è icone (rispettivamente). U dist/cartulare include tuttu ciò chì hè listatu in a sezione di scaricamentu precompilata sopra. U docs/cartulare include u codice fonte per a nostra ducumentazione, è examples/di l'usu di Bootstrap. Al di là di questu, qualsiasi altru schedariu inclusu furnisce supportu per i pacchetti, l'infurmazioni di licenza è u sviluppu.

Cumpilà CSS è JavaScript

Bootstrap usa Grunt per u so sistema di creazione, cù metudi convenienti per travaglià cù u framework. Hè cumu compilemu u nostru codice, eseguimu testi, è più.

Installazione di Grunt

Per installà Grunt, devi prima scaricà è installà node.js (chì include npm). npm sta per i moduli impaccati di nodi è hè un modu per gestisce e dipendenze di sviluppu attraversu node.js.

1. Installa grunt-cliin u mondu cun npm install -g grunt-cli.
2. Navigate à u /bootstrap/cartulare radicale, poi eseguite npm install. npm guarderà u package.jsonschedariu è installate automaticamente e dipendenze lucali necessarii elencati quì.

Quandu hà finitu, puderete eseguisce i vari cumandamenti Grunt furniti da a linea di cummanda.

Cumandamenti Grunt dispunibili

grunt dist(Basta cumpilà CSS è JavaScript)

Rigenera u /dist/cartulare cù schedari CSS è JavaScript compilati è minificati. Cum'è un utilizatore Bootstrap, questu hè normalment u cumandamentu chì vulete.

grunt watch(guardà)

Fighjate i fugliali di fonti Less è li ricompilate automaticamente in CSS ogni volta chì salvate un cambiamentu.

grunt test(Esegui i testi)

Esegue JSHint è eseguisce e teste QUnit in navigatori veri grazia à Karma .

grunt docs(Custruisce è pruvà l'assi di documenti)

Custruisce è testa CSS, JavaScript, è altri assi chì sò usati quandu eseguite a documentazione in u locu via bundle exec jekyll serve.

grunt(Custruite assolutamente tuttu è eseguite testi)

Cumpila è minifica CSS è JavaScript, custruisce u situ web di documentazione, eseguisce u validatore HTML5 contr'à i documenti, rigenerate l'assi di Customizer, è più. Richiede Jekyll . Di solitu solu necessariu s'è vo pirate Bootstrap stessu.

Risoluzione di prublemi

Sè avete scontru prublemi cù l'installazione di dipendenze o l'esecuzione di cumandamenti Grunt, prima sguassate u /node_modules/cartulare generatu da npm. Allora, ripete npm install.

U mudellu di basa

Cumincià cù stu mudellu HTML di basa, o mudificà questi esempi . Speremu chì persunalizà i nostri mudelli è esempii, adattanduli à i vostri bisogni.

Copia u HTML sottu per cumincià à travaglià cù un documentu Bootstrap minimu.

<!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>

Esempii

Custruite nantu à u mudellu di basa sopra cù i numerosi cumpunenti di Bootstrap. Vi incuragemu à persunalizà è adattà Bootstrap per adattà à i bisogni di u vostru prughjettu individuale.

Ottene u codice fonte per ogni esempiu quì sottu scarichendu u repository Bootstrap . Esempii ponu esse truvati in u docs/examples/cartulare.

Utilizà u quadru

U mudellu di partenza

Nunda ma i principii: CSS è JavaScript compilatu cù un containeru.

Tema Bootstrap

Caricate u tema Bootstrap opzionale per una sperienza visualmente migliorata.

Griglie

Esempi multipli di layout di griglia cù tutti i quattru livelli, nidificazione è più.

Jumbotron

Custruite intornu à u jumbotron cù una barra di navigazione è alcune colonne basi di griglia.

Jumbotron strettu

Custruite una pagina più persunalizata ristringendu u containeru predeterminatu è jumbotron.

Navbars in azione

Navbar

U mudellu super basicu chì include a barra di navigazione cù qualchì cuntenutu supplementu.

Barra di navigazione superiore statica

U mudellu super basu cù una barra di navigazione superiore statica cù qualchì cuntenutu supplementu.

Navbar fissu

U mudellu super basicu cù una barra di navigazione superiore fissa cù qualchì cuntenutu supplementu.

Cumpunenti persunalizati

Coperta

Un mudellu di una pagina per custruisce pagine di casa simplici è belle.

Carrusel

Personalizà a barra di navigazione è u carrusel, dopu aghjunghje alcuni novi cumpunenti.

Blog

Disposizione simplice di blog in duie colonne cù navigazione persunalizata, intestazione è tipu.

Dashboard

Struttura basica per un dashboard amministratore cù barra laterale fissa è barra di navigazione.

Pagina di login

Disegnu di forma persunalizata è cuncepimentu per un signu simplice in forma.

Nav ghjustificatu

Crea una barra di navigazione persunalizata cù ligami ghjustificati. A testa alta ! Micca troppu Safari amichevule.

Piede appiccicosu

Attach a footer to the bottom of the viewport when the content is shorter than it.

Piede appiccicosu cù navbar

Attach a footer to the bottom of the viewport with a navbar fixed at the top.

Esperimenti

Bootstrap non-responsive

Disattivate facilmente a risposta di Bootstrap per i nostri documenti .

Off-tela

Custruite un menu di navigazione off-canvas toggleable per aduprà cù Bootstrap.

Strumenti

Bootlint

Bootlint hè u strumentu ufficiale di linter HTML di Bootstrap . Verifica automaticamente parechji errori HTML cumuni in pagine web chì utilizanu Bootstrap in una manera abbastanza "vaniglia". I cumpunenti / widgets di Vanilla Bootstrap necessitanu e so parti di u DOM per conformà à certe strutture. Bootlint verifica chì i casi di cumpunenti Bootstrap anu HTML strutturatu currettamente. Cunsiderate aghjunghje Bootlint à a vostra catena di strumenti di sviluppu web Bootstrap per chì nimu di i sbagli cumuni rallentà u sviluppu di u vostru prughjettu.

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 chì utilizanu IRC in u irc.freenode.netservitore, in u canali ##bootstrap .
• Per aiutu cù Bootstrap, dumandate à StackOverflow usendu u tagtwitter-bootstrap-3 .
• I sviluppatori anu da aduprà a keyword bootstrapin i pacchetti chì mudificanu o aghjunghjenu a funziunalità di Bootstrap quandu si distribuiscenu attraversu npm o meccanismi di consegna simili per una scoperta massima.
• Truvate esempi inspiratori di persone chì custruiscenu cù Bootstrap à l' Expo Bootstrap .

Pudete ancu seguità @getbootstrap in Twitter per l'ultimi gossip è video musicali fantastichi.

Disattivà a reattività

Bootstrap adatta automaticamente e vostre pagine per diverse dimensioni di schermu. Eccu cumu disattivà sta funzione per chì a vostra pagina funziona cum'è questu esempiu chì ùn risponde micca .

Passi per disattivà a risposta di a pagina

1. Omette a vista <meta>citata in i documenti CSS
2. Override u widthper .containerogni livellu di griglia cù una sola larghezza, per esempiu width: 970px !important;Assicuratevi chì questu vene dopu à u Bootstrap CSS predeterminatu. Opzionalmente, pudete evità !importantcù e dumande media o qualchì selettore-fu.
3. Sè aduprate navbars, sguassate tutte e navbar colapsing and expanding behavior.
4. Per i dispusitivi di griglia, aduprate .col-xs-*classi in più di, o in u locu di i media / grande. Ùn vi ne preoccupate, a griglia di u dispusitivu extra-piccola scala à tutte e risoluzioni.

Avete sempre bisognu di Respond.js per IE8 (poi chì e nostre dumande di media sò sempre quì è devenu esse trattate). Questu disattiva l'aspettu "situ mobile" di Bootstrap.

U mudellu Bootstrap cù a risposta disattivata

Avemu applicatu sti passi à un esempiu. Leghjite u so codice fonte per vede i cambiamenti specifichi implementati.

Vede l'esempiu chì ùn risponde micca

Supportu per u navigatore è u dispositivu

Bootstrap hè custruitu per travaglià megliu in l'ultimi navigatori desktop è mobile, chì significa chì i navigatori più vechji puderanu visualizà un stilu diversu, ancu se cumpletamente funziunale, rendering di certi cumpunenti.

Navigatori supportati

In particulare, supportemu l' ultime versioni di i seguenti navigatori è piattaforme.

I navigatori alternativi chì utilizanu l'ultima versione di WebKit, Blink, o Gecko, sia direttamente sia via l'API di vista web di a piattaforma, ùn sò micca supportati esplicitamente. Tuttavia, Bootstrap duveria (in a maiò parte di i casi) affissà è funziona bè in questi navigatori. Più infurmazione specifica di supportu hè furnita quì sottu.

Dispositivi mobile

In generale, Bootstrap supporta l'ultime versioni di i navigatori predeterminati di ogni piattaforma maiò. Nota chì i navigatori proxy (cum'è Opera Mini, u modu Turbo di Opera Mobile, UC Browser Mini, Amazon Silk) ùn sò micca supportati.

I navigatori desktop

In listessu modu, l'ultime versioni di a maiò parte di i navigatori desktop sò supportati.

In Windows, supportemu Internet Explorer 8-11 .

Per Firefox, in più di l'ultima versione stabile normale, supportemu ancu l'ultima versione di l' Extended Support Release (ESR) di Firefox.

In uffiziu, Bootstrap deve vede è cumportanu abbastanza bè in Chromium è Chrome per Linux, Firefox per Linux è Internet Explorer 7, è ancu Microsoft Edge, ancu s'ellu ùn sò micca supportati ufficialmente.

Per una lista di alcuni di i bug di u navigatore chì Bootstrap hà da affruntà, vede u nostru Muru di bug di navigatore .

Internet Explorer 8 è 9

Internet Explorer 8 è 9 sò ancu supportati, però, per piacè esse cuscenti chì alcune proprietà CSS3 è elementi HTML5 ùn sò micca cumpletamente supportati da questi navigatori. Inoltre, Internet Explorer 8 richiede l'usu di Respond.js per attivà u supportu di media query.

Visita Can I use... per i dettagli nantu à u supportu di u navigatore di e funzioni CSS3 è HTML5.

Internet Explorer 8 è Respond.js

Attenti à e seguenti avvertenze quandu utilizate Respond.js in i vostri ambienti di sviluppu è di produzzione per Internet Explorer 8.

Respond.js è CSS cross-domain

Utilizà Respond.js cù CSS allughjatu nantu à un (sub)domaine differente (per esempiu, in un CDN) richiede una configurazione supplementaria. Vede i documenti di Respond.js per i dettagli.

Rispondi.js èfile://

A causa di e regule di sicurezza di u navigatore, Respond.js ùn funziona micca cù e pagine viste via u file://protokollu (cum'è quandu si apre un schedariu HTML locale). Per pruvà funzioni responsive in IE8, vede e vostre pagine nantu à HTTP (S). Vede i documenti di Respond.js per i dettagli.

Rispondi.js è@import

Respond.js ùn funziona micca cù CSS chì hè riferitu via @import. In particulare, alcune cunfigurazioni Drupal sò cunnisciute per aduprà @import. Vede i documenti di Respond.js per i dettagli.

Internet Explorer 8 è a dimensione di scatula

IE8 ùn sustene micca cumplettamente box-sizing: border-box;quandu cumminatu cù min-width, max-width, min-height, o max-height. Per quessa, da a v3.0.1, ùn avemu più aduprà max-widthnantu à .containers.

Internet Explorer 8 è @font-face

IE8 hà qualchi prublemi cù @font-facequandu cumminatu cù :before. Bootstrap usa quella cumminazione cù i so Glyphicons. Se una pagina hè in cache, è caricata senza u mouse nantu à a finestra (vale à dì chjappà u buttone di rinfrescante o carica qualcosa in un iframe), allora a pagina si rende prima di carica di font. Passendu sopra à a pagina (corpu) mostrarà alcune di l'icone è passanu sopra l'icone rimanenti mostrarà ancu quelli. Vede u prublema #13863 per i dettagli.

Modi di cumpatibilità IE

Bootstrap ùn hè micca supportatu in i vechji modi di cumpatibilità di Internet Explorer. Per esse sicuru d'aduprendu l'ultimu modu di rendering per IE, cunzidira à include l'etichetta adatta <meta>in e vostre pagine:

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

Cunfirmà u modu ducumentu aprendu i strumenti di debugging: appughjà F12è verificate u "Modu Documentu".

Questa tag hè inclusa in tutta a documentazione è l'esempi di Bootstrap per assicurà u megliu rendering pussibule in ogni versione supportata di Internet Explorer.

Vede sta dumanda StackOverflow per più infurmazione.

Internet Explorer 10 in Windows 8 è Windows Phone 8

Internet Explorer 10 ùn distingue micca a larghezza di u dispositivu da a larghezza di u viewport , è cusì ùn applica micca bè e dumande di media in CSS di Bootstrap. Normalmente avete solu aghjunghje un snippet rapidu di CSS per risolve questu:

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

Tuttavia, questu ùn funziona micca per i dispositi chì eseguenu Windows Phone 8 versioni più vechje di l' Aggiornamentu 3 (aka GDR3) , postu chì face chì tali dispositi mostranu una vista principalmente desktop invece di una vista stretta "telefonu". Per affruntà questu, avete bisognu di includà i seguenti CSS è JavaScript per travaglià intornu à u 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 più infurmazione è linee di usu, leghjite Windows Phone 8 è Device-Width .

Cum'è un capu, includemu questu in tutta a documentazione è esempi di Bootstrap cum'è una dimostrazione.

Arrotondamentu per centu di Safari

U mutore di rendering di versioni di Safari prima di v7.1 per OS X è Safari per iOS v8.0 hà avutu qualchì problema cù u numeru di decimali utilizati in i nostri .col-*-1classi di griglia. Allora s'è vo avete 12 culonni di griglia individuale, tu avissi nutatu ch'elli sò vinuti cortu cumparatu cù altre fila di colonne. In più di l'aghjurnamentu di Safari / iOS, avete alcune opzioni per solu solu:

• Aghjunghjite .pull-rightà a vostra ultima colonna di griglia per uttene l'allineamentu duru à diritta
• Aghjunghjite i vostri percentuali manualmente per ottene l'arrotondamentu perfettu per Safari (più difficiule chè a prima opzione)

Modali, navbars è tastiere virtuali

Overflow è scrolling

U supportu per overflow: hiddenl' <body>elementu hè abbastanza limitatu in iOS è Android. À questu scopu, quandu scorri u cima o u fondu di un modale in unu di i navigatori di quelli dispositi, u <body>cuntenutu cumincià à scroll. Vede u bug Chrome #175502 (fissatu in Chrome v40) è u bug WebKit #153852 .

Campi di testu iOS è scrolling

Da iOS 9.3, mentre chì un modale hè apertu, se u toccu iniziale di un gestu di scroll hè in u cunfini di un testu <input>o un <textarea>, u <body>cuntenutu sottu u modale serà scrollatu invece di u modale stessu. Vede u bug di WebKit #153856 .

Tastiere virtuali

Inoltre, nota chì sè vo aduprate una barra di navigazione fissa o utilizendu inputs in un modale, iOS hà un bug di rendering chì ùn aghjurnà micca a pusizione di elementi fissi quandu u teclatu virtuale hè attivatu. Uni pochi solu solu per questu includenu trasfurmà i vostri elementi position: absoluteo invucà un cronometru nantu à u focu per pruvà à curregà a pusizione manualmente. Questu ùn hè micca trattatu da Bootstrap, cusì tocca à voi di decide quale suluzione hè megliu per a vostra applicazione.

Navbar Dropdowns

L' .dropdown-backdropelementu ùn hè micca usatu in iOS in u navigatore per via di a cumplessità di z-indexing. Cusì, per chjude dropdowns in navbars, duvete cliccà direttamente l'elementu dropdown (o qualsiasi altru elementu chì spararà un avvenimentu di clic in iOS ).

Zoom di u navigatore

U zoom di pagina presenta inevitabilmente artefatti di rendering in certi cumpunenti, sia in Bootstrap sia in u restu di u web. Sicondu u prublema, pudemu esse capace di riparà (cercà prima è dopu apre un prublema s'ellu hè necessariu). Tuttavia, tendemu à ignurà questi perchè spessu ùn anu micca solu suluzione diretta altru ch'è solu solu solu.

Sticky :hover/ :focusnantu à u telefuninu

Ancu s'è u veru hovering ùn hè micca pussibule nantu à a maiò parte di i touchscreens, a maiò parte di i navigatori mobili emula u supportu di hovering è facenu :hover"sticky". In altre parolle, :hoveri stili cumincianu à applicà dopu à toccu un elementu è solu cessanu di applicà dopu chì l'utilizatore tocca un altru elementu. Questu pò fà chì i stati di Bootstrap :hoverdiventenu indesiderablemente "bloccati" in tali navigatori. Certi navigatori mobili facenu :focusancu appiccicosu. Attualmente ùn ci hè micca una solu solu solu solu per questi prublemi altru ch'è eliminà tali stili sanu.

Stampa

Ancu in certi navigatori muderni, a stampa pò esse stravagante.

In particulare, da Chrome v32 è indipendentemente da i paràmetri di u margine, Chrome usa una larghezza di vista significativamente più stretta di a dimensione di carta fisica per risolve e dumande di media mentre stampa una pagina web. Questu pò esse risultatu in a griglia extra-piccola di Bootstrap attivata inaspettatamente durante a stampa. Vede u prublema #12078 è Chrome bug #273306 per alcuni dettagli. Soluzioni suggerite:

• Abbracciate a griglia extra-piccola è assicuratevi chì a vostra pagina pare accettabile sottu.
• Personalizà i valori di i @screen-*Variabili Meno per chì a vostra carta di stampante hè cunsiderata più grande di più petite.
• Aghjunghjite e dumande di media persunalizate per cambià i punti di rottura di a griglia solu per i media stampati.

Inoltre, da Safari v8.0, .containers di larghezza fissa pò causà Safari à aduprà una dimensione di font inusualmente chjuca quandu stampa. Vede #14868 è WebKit bug #138192 per più dettagli. Una soluzione potenziale per questu hè aghjunghjendu u CSS seguente:

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

navigatore stock Android

Fora di a scatula, Android 4.1 (è ancu alcune versioni più recenti apparentemente) spedite cù l'app Browser cum'è u navigatore web predeterminatu di scelta (in uppusizione à Chrome). Sfortunatamente, l'app Browser hà assai bug è inconsistenzi cù CSS in generale.

Sceglie i menu

Nantu à <select>elementi, u navigatore stock Android ùn vi mostra i cuntrolli latu s'ellu ci hè un border-radiusè / o borderappiicata. (Vede sta quistione di StackOverflow per i dettagli.) Aduprate u snippet di codice sottu per sguassà u CSS offensiu è rende u <select>cum'è un elementu senza stile in u navigatore di stock Android. L'agente di l'utente sniffing evita l'interferenza cù i navigatori Chrome, Safari è 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>

Vulete vede un esempiu? Scuprite sta demo di JS Bin.

Validatori

Per furnisce a megliu sperienza pussibule à i navigatori vechji è buggy, Bootstrap usa i pirate di u navigatore CSS in parechji posti per indirizzà CSS speciale à certe versioni di u navigatore per trattà i bug in i navigatori stessi. Questi pirate sò capiscenu chì i validatori CSS si lamentanu ch'elli ùn sò micca validi. In un coppiu di lochi, avemu ancu aduprà funzioni CSS di punta chì ùn sò micca ancora cumplettamente standardizati, ma sò aduprate solu per a migliione progressiva.

Questi avvisi di validazione ùn importanu micca in pratica, postu chì a parte non-hacky di u nostru CSS cunvalida cumplettamente è e porzioni pirate ùn interferiscenu micca cù u funziunamentu propiu di a parte non-hacky, per quessa chì ignoremu deliberatamente questi avvisi particulari.

I nostri documenti HTML anu ancu alcuni avvisi di validazione HTML triviali è inconsequenziali per via di a nostra inclusione di una soluzione per un certu bug di Firefox .

Supportu di terzu partitu

Mentre ùn supportemu ufficialmente alcun plugin o add-ons di terzu, offremu alcuni cunsiglii utili per aiutà à evità prublemi potenziali in i vostri prughjetti.

Scatola di dimensioni

Qualchi software di terzu, cumpresu Google Maps è Google Custom Search Engine, cunflittu cù Bootstrap per via di * { box-sizing: border-box; }, una regula chì face cusì paddingùn affetta micca a larghezza calculata finali di un elementu. Sapete più nantu à u mudellu di scatula è a dimensione in CSS Tricks .

Sicondu u cuntestu, pudete annullà cum'è necessariu (Opzione 1) o resettate a dimensione di scatula per regioni intere (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();
}

L'accessibilità

Bootstrap segue i normi web cumuni è - cù un minimu sforzu extra - pò esse usatu per creà siti chì sò accessibili à quelli chì utilizanu AT .

Saltà a navigazione

Se a vostra navigazione cuntene assai ligami è vene prima di u cuntenutu principale in u DOM, aghjunghje un Skip to main contentligame prima di a navigazione (per una spiegazione simplice, vede stu articulu di u Prughjettu A11Y nantu à i ligami di navigazione ). L'usu di a .sr-onlyclassa oculterà visualmente u ligame di salta, è a .sr-only-focusableclassa assicurarà chì u ligame diventerà visibile una volta focalizata (per l'utilizatori di tastiera vista).

<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

Quandu nesting headings ( <h1>- <h6>), u vostru intestazione di documentu primariu deve esse un <h1>. L'intestazione sussegwenti deve fà un usu logicu di <h2>- <h6>cusì chì i lettori di schermu ponu custruisce una tabella di cuntenutu per e vostre pagine.

Sapete più nantu à HTML CodeSniffer è AccessAbility di Penn State .

Cuntrastu di culore

Attualmente, alcune di e combinazioni di culori predeterminate dispunibuli in Bootstrap (cum'è e diverse classi di buttuni stilati , alcuni di i culori di u codice chì evidenzianu i culori utilizati per i blocchi di codice basi , a classa d'aiutu di .bg-primary fondo contextuale , è u culore di ligame predeterminatu quandu s'utilice nantu à un fondo biancu) avè un rapportu di cuntrastu bassu (sottu u rapportu cunsigliatu di 4,5: 1 ). Questu pò causà prublemi à l'utilizatori cù bassa visione o chì sò i culori. Questi culori predeterminati pò avè bisognu di mudificà per aumentà u so cuntrastu è a leghjibilità.

Risorse supplementari

• Bookmarklet "HTML Codesniffer" per identificà i prublemi di accessibilità
• L'estensione di Strumenti di Sviluppatore di Accessibilità di Chrome
• Analizzatore di cuntrastu di culore
• U Prughjettu A11Y
• Documentazione di accessibilità MDN

FAQ di licenza

Bootstrap hè liberatu sottu a licenza MIT è hè copyright 2019 Twitter. Boiled down to small chunks, pò esse descrittu cù e seguenti cundizioni.

Hè bisognu di voi:

• Mantene a licenza è l'avvisu di copyright inclusi in i schedari CSS è JavaScript di Bootstrap quandu l'utilizate in i vostri travagli

Vi permette di:

• Scaricate è utilizate liberamente Bootstrap, in tuttu o in parte, per scopi persunali, privati, interni di l'impresa o cummerciale
• Aduprate Bootstrap in pacchetti o distribuzioni chì create
• Mudificà u codice fonte
• Concede una sublicenza per mudificà è distribuisce Bootstrap à terze parti micca incluse in a licenza

Vi pruibisce di:

• Mantene l'autori è i pruprietarii di licenze rispunsevuli di danni cum'è Bootstrap hè furnitu senza garanzia
• Tene i creatori o i titulari di copyright di Bootstrap responsabili
• Redistribute ogni pezzu di Bootstrap senza attribuzione propria
• Aduprate qualsiasi marca posseduta da Twitter in ogni modu chì puderia dichjarà o implica chì Twitter appruva a vostra distribuzione
• Aduprate qualsiasi marca posseduta da Twitter in ogni modu chì puderia dichjarà o implica chì avete creatu u software Twitter in quistione

Ùn ci vole micca à:

• Includite a fonte di Bootstrap stessu, o di qualsiasi mudificazioni chì pudete avè fattu à ellu, in ogni redistribuzione chì pudete assemble chì include.
• Invia i cambiamenti chì fate à Bootstrap torna à u prughjettu Bootstrap (ancu se tali feedback sò incuraghjiti)

A licenza Bootstrap cumpleta si trova in u repositoriu di u prugettu per più infurmazione.

Traduzioni

I membri di a cumunità anu traduttu a documentazione di Bootstrap in diverse lingue. Nisunu sò supportati ufficialmente è ùn sò micca sempre aghjurnati.

• Bootstrap 中文文档 (Cinese)
• Bootstrap på Dansk (Danese)
• Bootstrap en Français (francese)
• Bootstrap auf Deutsch (German)
• Bootstrap in Italiano (italianu)
• Bootstrap 한국어 (coréen)
• Bootstrap in Português do Brasil (Portughese brasilianu)
• Bootstrap по-русски (Russu)
• Bootstrap in spagnolu (spagnolu)
• Türkçe Bootstrap (turcu)
• Bootstrap українською (Ucrainu)
• Bootstrap bằng tiếng Việt (vietnamita)

Ùn aiutemu micca à urganizà o ospitu traduzzioni, liatemu solu.

Avete finitu una traduzzione nova o megliu? Apertura una dumanda di pull per aghjunghje à a nostra lista.