Introduzione ai componenti Bootstrap
Originariamente chiamato Blueprint di Twitter, è stato sviluppato da Mark Otto e Jacob Thronton su Twitter. Bootstrap è un framework CSS gratuito che impartisce reattività alle pagine Web. Per reattività, significa che diversi elementi DOM si ridimensionano di conseguenza con il cambiamento delle dimensioni dello schermo senza compromettere l'eleganza della pagina Web come altrimenti accadrebbe tradizionalmente con i metodi CSS di dimensionamento pixel o percentuale.
Questo è anche chiamato come il framework CSS "mobile-first" in quanto è progettato per avere un layout Grid CSS definendo le righe e le colonne. Questo framework ha anche componenti JavaScript insieme a classi CSS. Per utilizzare questo framework, è necessario collegare obbligatoriamente jQuery e JavaScript Framework per Bootstrap con gli altri file CSS Bootstrap. Questi file CSS sono disponibili per il download e sotto forma di CDN (Content Delivery Network).
Diversi componenti Bootstrap:
Bootstrap è abbinato a decine di componenti che possono essere riutilizzati per fornire una buona esperienza utente e interazioni dell'utente in una pagina Web come barre di navigazione, popup, menu a discesa, icone, pulsanti, moduli predefiniti e anche opzioni di dimensionamento per diversi elementi DOM.
1) Glyphicons - Queste sono le icone in formato carattere disponibili in Bootstrap. Sono circa 200 in numero. Questi glifi sono disponibili su https://glyphicons.com.
Come usarlo?
Esistono dei glifi per indicare quasi tutte le azioni come zoom, modifica, avviso, 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 usare questi glifi.
Sintassi:
2) Elenco a discesa : questi sono i menu a levetta che elencano un elenco di collegamenti. Questi sono resi più dinamici dal plugin JS e possono essere trovati su http: // getbootstrap / javascript / # dropdowns
Come usarlo?
È necessario utilizzare la classe .dropdown poiché la classe dell'elemento contiene gli elementi dell'elenco con la classe .dropdown-menu.
Sintassi:
3) Gruppi di pulsanti : con questo componente Bootstrap è possibile raggruppare una serie di pulsanti in una serie adiacente l'una all'altra.
Come usarlo?
Definire gli elementi di divisione con la classe .btn-group e annidare quegli elementi con il pulsante con la classe .btn. Corretta
Sbagliato
4) Menu a discesa : questo componente viene utilizzato per utilizzare un elemento pulsante per attivare un menu a discesa.
Sintassi:
5) Gruppi di input : estende la classe di controllo del modulo e aggiunge testo o pulsanti ai lati di un campo di input di un elemento di input. Per utilizzare questi gruppi di input è necessario utilizzare la classe .input-group con una classe .input-group-addon.
Sintassi:
@
6) Navbar - Questi componenti servono come intestazioni di navigazione per il tuo sito web. Sono collassati per essere espansi verticalmente con un menu di hamburger alternato nei dispositivi di dimensioni dello schermo più piccole e diventano orizzontali all'aumentare della larghezza dello schermo.
Sintassi:
7) Jumbotron - Questo è un componente bootstrap che può estendersi a tutto schermo (o viewport) per mostrare alcuni contenuti chiave.
Sintassi:
8) Avvisi - Questo è un componente Bootstrap con un plugin jQuery che fornisce messaggi di feedback contestuali a seconda dell'azione dell'utente. Questo è fondamentalmente usato per visualizzare messaggi di avviso.
Sintassi: …
9) Indicatori di stato : questo componente viene utilizzato per fornire elementi visivi sul feedback sull'andamento del lavoro o dell'azione con una barra di avanzamento.
Synatx:
Esempio:
10) Badge - Questo è un componente per evidenziare qualcosa di simile ad elementi non letti aggiungendo la classe .badge all'elemento DOM, preferibilmente un intervallo.
Sintassi:
Messaggi 3
11) Impaginazione: questo componente offre al tuo sito l'impaginazione su più pagine in modo che il contenuto possa farlo
essere diviso in più pagine e navigato a proprio agio. Di solito, l'elemento DOM per gli elenchi non ordinati è definito con questa classe .pagination.
Sintassi:
Come questo ti aiuterà nella tua carriera?
Tutte le aziende si stanno ora concentrando sull'interazione dell'utente e sull'esperienza utente (UI / UX). Perché la stragrande maggioranza della popolazione utilizza dispositivi portatili come tablet e smartphone che variano notevolmente in termini di risoluzione pixel e dimensioni dello schermo. Ecco perché è davvero importante avere un design front-end sufficientemente reattivo da adattarsi a qualsiasi tipo di schermo senza compromettere l'eleganza della pagina web.
Quindi, essere abili in Bootstrap equivarrebbe ad aggiungere valore a te nella carriera tecnica e le aziende non vedono l'ora di assumerti con un bel stipendio. E, poiché è gratuito e open-source, ci sono molti scopi per cui puoi contribuire come sviluppatore e renderlo ancora migliore di quello che è oggi.
Conclusione-
Il framework Bootstrap è uno strumento molto utile per offrire reattività alle pagine Web. I componenti spiegati in questo blog sono alcuni di quelli molto usati che ti aiutano a scrivere meno codice per più funzionalità e aggiungere più eleganza alla pagina web che stai costruendo.
Articoli consigliati
Questa è stata una guida ai componenti Bootstrap. Qui discutiamo anche un'introduzione e diversi componenti di bootstrap insieme alla sua sintassi. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -
- Come installare Bootstrap
- Angolare vs Bootstrap
- Corso di addestramento Bootstrap
- Domande per l'intervista a Bootstrap
- Come utilizzare il layout Bootstrap?
- Primi 5 tipi di Boostrap con codice di esempio