CONTATTACI

Blog

Bootstrap tutorial: guida all’utilizzo dei componenti

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.

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

 

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

 

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

     

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

     

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

 

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

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.