I 10 errori Bootstrap più comuni che fanno gli sviluppatori

A prima vista, Bootstrap sembra abbastanza semplice. E in effetti, non è difficile iniziare a utilizzare Bootstrap. Esiste una documentazione Bootstrap molto ben scritta con molti esempi di codice HTML, CSS e JavaScript. La maggior parte delle insidie ​​importanti sono menzionate lì, ma alcuni errori sono ancora piuttosto sottili o hanno cause ambigue. Poiché Bootstrap sembra molto semplice e facile da usare, molti sviluppatori si stanno precipitando nel framework e quindi accadono errori.

Daremo un'occhiata a 10 degli errori, problemi e idee sbagliate di Bootstrap più comuni quando gli sviluppatori iniziano a usarlo.

Errore comune di Bootstrap n. 1: idee sbagliate di base sul framework

Ci sono alcune idee sbagliate di base sul framework Bootstrap che le persone hanno. Ciò può essere dovuto al fatto che non è chiaramente pubblicizzato sul sito Bootstrap o perché le persone non impiegano abbastanza tempo per leggere la documentazione. Il fatto è che a volte gli sviluppatori finiscono nell'angolo facendo cose sbagliate e poi incolpano il framework. Quindi, chiariamo alcuni fatti di base.

Bootstrap è completo, ma non è né enorme né enorme. Bootstrap viene fornito in bundle con modelli di progettazione HTML e CSS di base che includono molti componenti comuni dell'interfaccia utente. Questi includono tipografia, tabelle, moduli, pulsanti, glificon, menu a discesa, pulsanti e gruppi di input, navigazione, impaginazione, etichette e badge, avvisi, barre di avanzamento, modali, schede, fisarmoniche, caroselli e molti altri. Puoi sceglierne e selezionarne alcuni e, con la sua configurazione predefinita, generare rapidamente un'interfaccia utente che gestisce più browser, dispositivi e risoluzioni con un bel formato.

Bootstrap non farà tutto per te, ma fornisce una serie di impostazioni predefinite ragionevoli tra cui scegliere e aiuterà gli sviluppatori a concentrarsi maggiormente sul lavoro di sviluppo che a preoccuparsi del design e li aiuterà a far funzionare rapidamente un sito Web di bell'aspetto. Consente una prototipazione rapida, ma non limita gli sviluppatori in arrivo.

È abbastanza estensibile che chiunque può adattarlo alle proprie esigenze. All'inizio, Bootstrap aveva alcune limitazioni e all'epoca era complicato estendere gli stili predefiniti. Ma con la maturazione del quadro, anche l'estendibilità è migliorata.

Errore comune di Bootstrap n. 2: pensare che non è necessario conoscere i CSS per utilizzare Bootstrap e che non è necessario un designer

Se stai pensando che se stai usando Bootstrap non avrai bisogno di conoscere i CSS, ti sbagli di grosso. Qualsiasi sviluppatore front-end deve imparare CSS e HTML5. Bootstrap rimuove molte parti CSS complicate dalle spalle degli sviluppatori (come i prefissi specifici del fornitore) e offre uno stile predefinito di base, ma è comunque necessario comprendere i CSS. Non è necessario sapere come funzionano le query multimediali, ma è necessario comprendere come funziona il design reattivo. Bootstrap non ha lo scopo di insegnarti CSS, ma può aiutarti se lo desideri. L'esame del codice sorgente in LESS o SASS è un ottimo punto di partenza.

Su un argomento simile, non è necessario essere un designer e puoi sostenere che non hai bisogno di un designer con Bootstrap. Tuttavia, se possibile, utilizzare l'aiuto di un designer. Una lamentela comune contro Bootstrap è che tutti i siti Bootstrap si assomigliano ed è facile ritrovarsi con un sito Web che assomiglia a qualsiasi altro sito Bootstrap. Ma questo non deve essere vero. Milioni di siti Web in tutto il Web vengono creati con Bootstrap. Grandi vetrine su come è possibile realizzare progetti diversi possono essere trovate su Bootstrap Expo, che raccoglie siti creati con Bootstrap. Dai un'occhiata, prendi ispirazione e inizia a creare la tua variazione di design.

Errore comune di Bootstrap n. 3: modifica del file CSS di Bootstrap

Per renderlo chiaro e semplice: non modificare il file bootstrap.css .

Se apporti modifiche al file bootstrap.css , le cose si complicano molto velocemente. L'intero design si interromperà quando si desidera aggiornare i file Bootstrap. Puoi sovrascrivere nel tuo foglio di stile i colori bootstrap predefiniti, gli stili, i margini, i padding e tutto. Non è affatto necessario toccare il foglio di stile bootstrap.css .

Non conosci LESS o SASS? Nessun problema, puoi creare il tuo file CSS e sovrascrivere quello che vuoi dal foglio di stile bootstrap.css originale. Proprio come abbiamo menzionato nell'errore precedente, conoscere i CSS è obbligatorio. Crea il tuo nuovo selettore CSS, usalo nell'HTML e finché dichiari le tue classi CSS dopo gli stili Bootstrap, le tue definizioni sovrascriveranno le impostazioni predefinite di Bootstrap.

Vuoi ancora saperne di più e approfondire? Ti consiglio vivamente e ti incoraggio a farlo. Usa il codice sorgente Bootstrap LESS. Capirai meglio cosa sta succedendo e dov'è se usi il sorgente LESS e non CSS statico.

Errore comune di Bootstrap n. 4: utilizzare tutto ciò che offre Bootstrap

Come accennato in precedenza, Bootstrap è completo. Offre molti componenti dell'interfaccia utente, modelli di progettazione HTML e CSS e plug-in JavaScript. Ma per favore, sii selettivo. Non è necessario utilizzare tutte le funzionalità di Bootstrap.

Questo è particolarmente vero per i plugin. Scegli e scegli solo i plugin che hanno un senso e non usare tutto perché sembra bello e interessante. Il tuo sito web può essere facilmente esagerato. Per cominciare, considera di non includere affatto il file bootstrap.js e crea un sito utilizzando semplicemente HTML e CSS. E poi, aggiungi i componenti solo se necessario per ruoli specifici, uno per uno.

Errore comune di Bootstrap n. 5: uso improprio di un prompt modale

Le modalità Bootstrap offrono prompt di dialogo flessibili con la funzionalità minima richiesta e vengono fornite con impostazioni predefinite intelligenti. Sebbene modal sia facile da usare e offra una ricca personalizzazione, ci sono alcune cose che dobbiamo tenere a mente per evitare usi impropri comuni.

Mostra più di un prompt modale alla volta

Bootstrap non supporta modali sovrapposti. Può essere visibile solo un modale alla volta. È possibile visualizzare più di un modale alla volta, ma è necessario scrivere codice personalizzato per gestirlo correttamente.

Bootstrap modale appare in background

Se il contenitore modale o il suo elemento padre ha una posizione fissa o relativa, il modale non verrà visualizzato correttamente. Assicurati sempre che al contenitore modale e ai suoi elementi padre non sia applicato alcun posizionamento speciale. La migliore pratica consiste nel posizionare l'HTML di una modale appena prima del tag di chiusura </body> , o ancora meglio in una posizione di primo livello nel documento subito dopo il tag di apertura <body> . Questo è il modo migliore per evitare che altri componenti influiscano sull'aspetto e sulla funzionalità della modale.

Modale sui dispositivi mobili

Ci sono alcuni avvertimenti di cui gli sviluppatori devono essere consapevoli quando si tratta di modali su dispositivi mobili con tastiere virtuali. Ciò è particolarmente vero per i dispositivi iOS, dove esiste un bug di rendering che non aggiorna la posizione degli elementi fissi quando viene attivata la tastiera virtuale. Questo non è gestito da Bootstrap, quindi spetta allo sviluppatore gestire queste situazioni nel codice nel modo migliore per l'applicazione in questione.

Errore comune di Bootstrap n. 6: problema con il componente del pulsante di input del file

Bootstrap non ha un componente designato per un pulsante di caricamento file. Una soluzione semplice ed elegante che utilizza solo HTML e CSS può essere ottenuta con il seguente codice di esempio:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Ci sono molti esempi di come ottenere un effetto simile. Questo esempio di codice è preso in prestito da Cory LaViska e sul suo sito puoi leggere una spiegazione più dettagliata di questo problema. C'è anche un esempio esteso con più funzionalità che utilizza codice JavaScript aggiuntivo.

Errore comune di Bootstrap n. 7: complicarsi eccessivamente con JavaScript e ignorare gli attributi "data-".

I designer, o semplicemente gli sviluppatori JavaScript inesperti, possono immergersi molto facilmente nello sviluppo web e creare pagine web utilizzando solo HTML, CSS e Bootstrap. Se non sono molto bravi a programmare, possono cadere nella trappola dell'uso improprio di JavaScript o semplicemente di complicazioni eccessive. È importante affermare che tutti i plug-in Bootstrap possono essere utilizzati esclusivamente tramite l'API di markup, senza scrivere una singola riga di JavaScript. Questa è l'API di prima classe di Bootstrap e dovrebbe essere la tua prima considerazione quando usi i plugin.

Ad esempio, possiamo attivare una finestra di dialogo modale senza scrivere alcun JavaScript semplicemente impostando data-toggle="modal" su un elemento del controller come un pulsante o un'ancora e passare parametri aggiuntivi utilizzando data- -attributi. Nel codice seguente, stiamo prendendo di mira il codice HTML con l'ID #myModal . Abbiamo specificato che il modale non si chiuderà quando l'utente fa clic al di fuori del modale utilizzando l'opzione data-backdrop e abbiamo disabilitato l'evento chiave di escape che chiude un'opzione modale con data-keyboard . Tutto in una riga di codice HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Errore comune di Bootstrap n. 8: ignorare gli strumenti che facilitano lo sviluppo di Bootstrap

Gli errori accadono e ogni sviluppatore li fa occasionalmente. Questo è inevitabile, ma è come affronti l'errore che conta. Il team di Bootstrap ha notato osservando il tracker dei problemi che le persone commettono errori più spesso. Ecco perché hanno cercato di automatizzare il processo di sviluppo. Il risultato è Bootlint, uno strumento di linting HTML per progetti Bootstrap. Bootlint può essere utilizzato sia nel browser che dalla riga di comando tramite Node.js e controllerà automaticamente le pagine Web Bootstrap per molti errori comuni di utilizzo di Bootstrap. L'aggiunta di Bootlint alla toolchain di sviluppo web può eliminare molti errori comuni che di solito rallentano lo sviluppo di un progetto.

Nel caso in cui desideri contribuire al progetto Bootstrap, vale la pena controllare Rorschach. Rorschach è un bot di verifica della integrità delle richieste pull Bootstrap, che esegue alcuni controlli su ogni nuova richiesta pull. Se un controllo di integrità fallisce, lascia un commento informativo sulla richiesta pull che spiega l'errore e come risolverlo, quindi chiude la richiesta pull.

Errore comune di Bootstrap n. 9: problemi di incompatibilità con IE8 e browser precedenti

Bootstrap è progettato per funzionare al meglio con gli ultimi browser desktop e mobili. I browser meno recenti potrebbero visualizzare componenti ed elementi con uno stile diverso, ma tutto dovrebbe essere completamente funzionante. Il supporto include Internet Explorer 8 e 9, con una nota importante che alcune proprietà CSS3 ed elementi HTML5 non sono completamente supportati da questi browser.

Per ottenere il supporto completo per Internet Explorer 8 e altri browser precedenti, è necessario utilizzare un polyfill per CSS3 Media Query Respond.js, uno shim HTML 5 che consente l'uso di elementi HTML5 e un tag IE <meta> appropriato nell'intestazione HTML per assicurati che IE non sia in esecuzione in modalità compatibilità. La tua testa HTML alla fine dovrebbe assomigliare a questa:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

In caso di Respond.js , fai attenzione ai seguenti avvertimenti negli ambienti di sviluppo e produzione.

Errore comune di Bootstrap n. 10: ignorare le migliori pratiche

Una delle domande più comuni sullo Stack Overflow è come fare in modo che il menu a discesa Bootstraps si apra al passaggio del mouse anziché al clic. Sebbene la soluzione a questa domanda non sia complicata e possa essere eseguita utilizzando solo CSS, non è consigliata. Questa funzionalità è stata esclusa di proposito dal framework e questa è una decisione di progettazione presa dal team di sviluppo. Ancora una volta, può essere fatto, ma è necessario comprendere le ripercussioni e capire che esistono buone pratiche, specialmente per i framework mobile first. Il ragionamento alla base di questo problema specifico è che far funzionare le cose al passaggio del mouse non aiuta gli utenti che dispongono di dispositivi touch. Su tali dispositivi non c'è il passaggio del mouse, solo eventi touch. Pertanto, questo non funzionerà correttamente su nessun dispositivo abilitato al tocco.

Conclusione sugli errori di Bootstrap

Spero che questa breve guida Bootstrap ti aiuti a evitare alcuni degli errori comuni, a chiarire i soliti malintesi e ad aiutarti a ottenere la maggior parte del framework. Tieni presente che Bootstrap non è per tutti, né è adatto per ogni progetto. Quando si sceglie un framework è necessario dedicare del tempo a leggere la documentazione e è necessario dedicare un po' di tempo a giocare con il framework per avere un'idea e un'immagine migliori di come funziona. Questo vale anche per Bootstrap.

Leggi la documentazione, gioca e sperimenta con i campioni, impara le basi giuste e divertiti a creare nuovi e bellissimi design.