Bootstrap è un framework del linguaggio CSS gratuito che conferisce dinamicità e responsività alle pagine web. Per dinamicità, si intende che diversi elementi (lato front end) si ridimensionano in base al cambiamento delle dimensioni dello schermo senza compromettere lo stile della pagina web come accadrebbe altrimenti tradizionalmente con i metodi CSS.
Bootstrap framework è anche chiamato “framework CSS mobile-first” in quanto è progettato per avere un layout CSS grid definendo le righe e le colonne. Bootstrap ha anche componenti del linguaggio JavaScript insieme alle classi CSS. Per utilizzarlo devi obbligatoriamente collegare jQuery e JavaScript Framework per Bootstrap insieme agli altri file CSS di Bootstrap.
Bootstrap framework mette a disposizione decine di componenti che possono essere riutilizzati per fornire una buona user experience e interazione con l’utente in una pagina Web come navbar, popup, dropdown menu, icone, pulsanti, moduli pre-progettati e anche opzioni di ridimensionamento per diversi elementi DOM. Un elemento DOM è qualcosa di simile a un DIV, HTML, BODY su una pagina web. Puoi aggiungere classi a tutte queste utilizzando CSS o interagendo con esse.
In questo Bootstrap tutorial impareremo a conoscere e utilizzare alcuni dei componenti più importanti di questo framework, adattandoci anche a quelli che sono i Bootstrap templates più consoni al componente che vogliamo utilizzare.
- Glyphicons: queste sono le icone formattate con font disponibili in Bootstrap. Sono circa 200. Esistono glyphicons per indicare quasi tutte le azioni come zoom, modifica, avviso, inserimento/scaricamento file, eliminazione, ecc., e sono definiti in una singola classe. Quindi, è necessario utilizzare la classe base e la classe individuale, idealmente in un elemento span e utilizzare questi glyphicons.
- Dropdown menu: questi sono i menù basati su bottone che genera un elenco a comparsa di voci o collegamenti. Questi sono resi più dinamici dal plugin JavaScript e risulta essere molto utile quando si sta lavorando su bootstrap form templates.
Come usarlo?
Bisogna inserire nel DIV la classe .dropdown poiché la classe dell’elemento ha le voci dell’elenco sotto di essa con il menu class .dropdown.
<div class= "dropdown"><!-- have your list in this with the class .dropdown-menu --></div>
- Button groups: questo componente di Bootstrap permette di raggruppare un insieme di bottoni in modo adiacente. Così da poterli posizionare in modo strategico all’interno del Bootstrap template. Per utilizzarlo si utilizza la classe “btn-group” prima di specificare che si tratta di un bottone.
<div class="btn-group"><button class= "btn">Correct</button></div> <div class="btn-group"><button class= "btn">Wrong</button></div> - Navbar: uno dei componenti Bootstrap più customizzabili e importanti all’interno di un sito web dinamico. La navbar è un barra di navigazione che può avere infinite modalità diverse di interazione e visualizzazione, tanto che il framework ha riservato una categoria a parte chiamata Bootstrap navbar templates.
<nav class = "navbar"><!—Code your navigation DOM elements --></nav> - Input groups: un altro componente che estende la classe form-control e aggiunge testo o pulsanti su un campo di input. Gli .input-group sono molto utili per raggruppare e personalizzare i campi di input all’interno di uno specifico Bootstrap form templates. Rende più semplice e intuitiva la visualizzazione dei campi di input in form molto grandi. La sintassi è la seguente:
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
- Alert: i componenti in Bootstrap ricoprono tutti gli aspetti della user experience. Questo componente risulta molto utile quanto semplice specialmente se si vuole dare un feedback all’utente, mentre interagisce con la pagina web.
<div class="alert alert-success" role="alert">...</div>
Questi sono solo alcuni dei componenti Bootstrap più utili e versatili da utilizzare. I componenti Bootstrap sono costruiti con una nomenclatura di base, editabili a seconda delle priorità dello sviluppatore web. Ciò che è particolarmente utile per generare varianti di un componente sono i mezzi che il framework mette a disposizione. Nella documentazione di Bootstrap riguardo i componenti è anche spiegato come realizzare da zero il proprio componente. Questo rende l’approccio più personale e permette di avere totale controllo sulla dinamicità e responsività del sito web.
Migliorare la user experience e l’interazione con l’utente è un requisito fondamentale per un sito web responsivo e di facile utilizzo. La stragrande maggioranza della popolazione utilizza dispositivi portatili come tablet e smartphone, che variano notevolmente in termini di risoluzione in pixel e dimensioni dello schermo: ecco perché è davvero importante disporre di un design front end che sia sufficientemente reattivo per adattarsi a qualsiasi tipo di schermo senza compromettere l’integrità della pagina web.
Quindi, essere abili in Bootstrap e padroneggiare i suoi componenti aumenterebbe le possibilità lavorative agli occhi di aziende che sviluppano web. Vuoi saperne di più su bootstrap? Abbiamo preparato per te una guida Bootstrap in italiano. Corri a leggerla!
