Utilizzo dei componenti Bootstrap

Bootstrap Ha due grandi basi solide che ci danno un punto di partenza standard per le diverse soluzioni di web design di cui abbiamo bisogno o vogliamo fare, queste sono la Grid e il CSS di base, con questi due strumenti possiamo costruire una grande base centrale dove possiamo posizionalo per riposare tutti i diversi elementi che compongono la nostra interfaccia.
Come tutte le basi, queste da sole non fanno il resto della costruzione, per raggiungere un maggior grado di raffinatezza e dettaglio è necessario utilizzare componenti aggiuntivi che si trovano sulla nostra base e ovviamente la loro potenza risentirà della solidità. di quest'ultimo.
In caso di Bootstrap Abbiamo diversi componenti che ci aiutano a massimizzare i dettagli dei nostri progetti, componenti che vanno da icone, pannelli e persino intestazioni. Elementi che ci aiutano a differenziare ed evidenziare la nostra applicazione dalle altre.
I componenti in Bootstrap Possono essere utilizzati all'interno delle nostre pagine indipendentemente dal resto, ovvero possiamo generare tutti i componenti di cui abbiamo bisogno in un singolo documento senza che siano in conflitto con gli altri.
Inoltre, lo stile di base per impostazione predefinita è già predefinito, quindi possiamo creare la nostra applicazione rapidamente e senza troppi sforzi, dove alla fine possiamo personalizzare la nostra intera applicazione cambiando lo stile di base per i nostri stili.
I componenti possono essere di CSS, JavaScript o entrambi, quindi alcuni oltre al CSS di base richiederanno librerie di terze parti come jQuery, questo può sembrare un po' scomodo ma la realtà è che l'implementazione è così semplice che non ci renderemo nemmeno conto che stiamo usando più cose di quelle portate di default Bootstrap.
Uno dei primi componenti che dobbiamo capire sono le icone, poiché con questi piccoli pezzi di immagine possiamo far capire all'utente la funzionalità di qualsiasi parte del nostro design, quindi quando vediamo un'icona di un grande X sappiamo che è legato alla chiusura della sezione corrente o nel caso in cui vediamo un'icona sotto forma di + sapremo che è per aggiungere qualcosa.
glificoniNel Bootstrap c'è una libreria di icone glificoni, molto popolare nel web design e che ci offre praticamente un'icona per ogni azione che possiamo eseguire su una pagina web, questo ci fa avanzare un sacco di lavoro poiché non dobbiamo pensare a cercare qualcuno per progettare pezzi grafici che servano questi scopi.
Nell'immagine seguente possiamo vedere le icone che abbiamo direttamente sul sito web di Bootstrap:

INGRANDIRE

Questo è solo un piccolo esempio delle icone che abbiamo a disposizione, ma se navighiamo nella pagina ufficiale vedremo tutte le opzioni che abbiamo per il nostro uso.
L'uso di queste icone è molto semplice, non ci resta che aggiungere la classe glifico all'elemento HTML e quindi aggiungere la classe dell'icona corrispondente dall'elenco disponibile. Le icone vengono solitamente aggiunte a elementi come o poiché in questo modo ci assicuriamo che siano solo visivi, ottenendo così il miglior risultato possibile. Vediamo quindi nel codice seguente un esempio di come utilizzare questo componente in HTML.

 Utilizzo dei glificon in Bootstrap
Paga in
posta
Utenti
Cestino
cancella la sottoscrizione

In questo codice abbiamo semplicemente inserito le inclusioni dalle nostre librerie di Bootstrap corrispondente, aggiungendo jQuery come libreria di terze parti e quindi aggiungi la libreria js di Bootstrap, è importante mantenere questo ordine poiché la libreria js di Bootstrap bisogno di jQuery e se è incluso, ci darà un errore nell'implementazione.
Poi all'interno del nostro abbiamo creato delle sezioni dove abbiamo aggiunto il glificoniPer i nostri scopi, è stato sufficiente posizionare le icone all'interno dell'etichetta. Se eseguiamo nel nostro browser otterremo il seguente risultato:

Come possiamo vedere, le icone accompagnano i messaggi dando loro più peso e comprensione, ad esempio nella casella di ricerca se qualcuno non parla inglese non capirà il messaggio ricercaMa se hai usato sistemi informatici e vedi subito l'icona della lente di ingrandimento sai che si riferisce alle ricerche, questa è la vera potenza di questo componente.
Un altro componente importante sono le schede di navigazione, queste ci permettono di organizzare i nostri contenuti sulla stessa pagina, evitando così di consumare molto spazio e rendendo così la vita più facile all'utente non dovendo imparare un gran numero di sezioni nella nostra applicazione web.
Per utilizzare queste schede abbiamo bisogno dell'aiuto della classe navigazione, questo è rimuovere lo stile predefinito di HTML degli elementi e i suoi figli , facilitando così l'utilizzo e il suo successivo adattamento al nostro design. Per usarlo dobbiamo semplicemente aggiungere le classi navigazione sì schede di navigazione ad un elemento e con questo otterremo il risultato appropriato.
Vediamo il codice seguente dove implementiamo questa soluzione, come l'esempio precedente dobbiamo includere i file bootstrap.css, bootstrap-theme.css, bootstrap.js sì jquery.js, vediamo il nostro codice:

 Utilizzo dei glificon in Bootstrap

Sicurezza
record
Contenuti

Come notiamo l'uso dell'elemento con questa classe ci permette di fare una struttura HTML normale, ma il risultato come vedremo di seguito ci offre un altro modo per organizzare le informazioni. Possiamo evidenziare un altro aspetto interessante del nostro codice ed è la combinazione di Glificoni con questa soluzione, a dimostrazione di quanto spieghiamo circa l'indipendenza degli elementi.

INGRANDIRE

Un altro componente molto utile sono i menu a tendina, questi ci permettono di condensare molte opzioni in un piccolo spazio, soprattutto per quelle pagine web che hanno molte categorie da organizzare.
Cadere in picchiataIl componente di Bootstrap chi se ne occupa si chiama Cadere in picchiata e come il componente precedente viene applicato nell'elemento tuttavia, la sua costruzione è un po' più complessa, sebbene non vada oltre lo stile di lavoro HTML.
Dobbiamo prima avere un elemento che è l'intestazione del menu a discesa, quindi dobbiamo avere il che conterrà le opzioni da visualizzare. Per questo riformuleremo l'esempio precedente per aggiungere un menu a discesa nella scheda contenuto, con questo possiamo capire meglio il nostro esempio.
Per riassumere un po', mostreremo solo il contenuto di poiché l'intestazione sarà la stessa. Vediamo quindi il codice per la nostra funzionalità del menu a tendina:

Sicurezza
record
Contenuti

Video
immagini
Audio

Vediamo quindi come in un elemento abbiamo avviato il menu a discesa con la classe cadere in picchiata, quindi all'interno di questo definiamo un elemento come trigger di opzione quando aggiungiamo la classe interruttore a discesa e infine abbiamo creato un cosa ha la classe? menu a discesa per identificare che ha tutte le opzioni che vedremo. Se eseguiamo il nostro esempio nel browser, otterremo il seguente risultato:

INGRANDIRE

Ovviamente questa è solo una piccola parte di ciò che possiamo ottenere, dal momento che è possibile includere più effetti e con stili diversi modificare la visuale di questi. Con questo finiamo questo tutorial, dove abbiamo visto tre dei componenti più utili che possiamo usare in Bootstrap, ottenendo così una personalizzazione molto maggiore della nostra applicazione.