Utilizarea componentelor Bootstrap

Bootstrap Are două baze solide grozave care ne oferă un punct de plecare standard pentru diferitele soluții de design web pe care trebuie sau le dorim să le facem, acestea sunt Grid și CSS de bază, cu aceste două instrumente putem construi o bază centrală mare unde putem plasați-l pentru a odihni toate diferitele elemente care alcătuiesc interfața noastră.
Ca toate bazele, acestea în sine nu fac restul construcției, pentru a atinge un grad mai mare de rafinament și detaliu este necesar să se utilizeze componente suplimentare care sunt situate pe baza noastră și, desigur, puterea lor va fi afectată de soliditate. din acesta din urmă.
În cazul în care Bootstrap Avem mai multe componente care ne ajută să maximizăm detaliile proiectelor noastre, componente care variază de la pictograme, panouri, chiar și anteturi. Elemente care ne ajută să diferențiem și să evidențiem aplicația noastră de ceilalți.
Componentele din Bootstrap Ele pot fi utilizate în paginile noastre independent de restul acestora, adică putem genera oricâte componente avem nevoie într-un singur document fără ca acestea să intre în conflict cu celelalte.
În plus, stilul de bază în mod implicit este deja predefinit, astfel încât să putem construi aplicația noastră rapid și fără eforturi mari, unde în cele din urmă ne putem personaliza întreaga aplicație schimbând stilul de bază pentru propriile stiluri.
Componentele pot fi de CSS, JavaScript sau ambele, deci unele pe lângă CSS de bază vor necesita biblioteci terțe, precum jQuery, acest lucru poate părea oarecum inconfortabil, dar realitatea este că implementarea este atât de simplă încât nici nu ne vom da seama că folosim mai multe lucruri decât ceea ce este adus în mod implicit Bootstrap.
Una dintre primele componente pe care trebuie să le înțelegem sunt icoanele, deoarece cu aceste bucăți mici de imagine putem face utilizatorul să înțeleagă funcționalitatea oricărei părți a designului nostru, astfel când vedem o icoană X știm că este legat de închiderea secțiunii curente sau în cazul în care vedem o pictogramă sub forma + vom ști că este să adăugăm ceva.
GlifoniÎn Bootstrap există o bibliotecă de icoane Glifoane, foarte popular în designul web și care ne oferă practic o pictogramă pentru fiecare acțiune pe care o putem efectua pe o pagină web, acest lucru ne avansează mult, deoarece nu trebuie să ne gândim să căutăm pe cineva care să proiecteze piese grafice care să servească aceste scopuri.
În imaginea următoare putem vedea pictogramele pe care le avem direct pe site-ul web Bootstrap:

MARI

Acesta este doar un mic eșantion de pictograme pe care le avem disponibile, dar dacă navighăm pe pagina oficială, vom vedea toate opțiunile pe care le avem pentru utilizarea noastră.
Utilizarea acestor pictograme este foarte simplă, trebuie doar să adăugăm clasa glifonic la element HTML și apoi adăugați clasa pictogramei corespunzătoare din lista disponibilă. Pictogramele sunt de obicei adăugate la elemente precum sau din acest fel ne asigurăm că sunt doar vizuale, obținând astfel cel mai bun rezultat posibil. Să vedem apoi în următorul cod un exemplu de utilizare a acestei componente în HTML.

 Folosirea glifoanelor în Bootstrap
Plătiți
Poștă
Utilizatori
Cos de gunoi
Ieșire

În acest cod am plasat pur și simplu incluziunile din bibliotecile noastre de Bootstrap corespunzător, adăugând jQuery ca bibliotecă terță parte și apoi adăugați biblioteca js de Bootstrap, este important să mențineți această ordine din biblioteca js din Bootstrap nevoie de jQuery și dacă este inclus, atunci ne va da o eroare în implementare.
Apoi în cadrul nostru am creat câteva secțiuni în care am adăugat GlifoniPentru scopurile noastre, plasarea icoanelor în etichetă a fost suficientă. Dacă executăm în browserul nostru vom obține următorul rezultat:

După cum putem vedea, pictogramele însoțesc mesajele, oferindu-le mai multă greutate și înțelegere, de exemplu în caseta de căutare, dacă cineva nu vorbește engleza, nu va înțelege mesajul căutareDar dacă ați folosit sisteme informatice și vedeți imediat pictograma lupă, știți că se referă la căutări, aceasta este adevărata putere a acestei componente.
O altă componentă importantă este filele de navigare, acestea ne permit să ne organizăm conținutul pe aceeași pagină, evitând astfel consumul de mult spațiu și astfel facilitând viața utilizatorului, nefiind nevoit să învețe un număr mare de secțiuni din aplicația noastră web.
Pentru a utiliza aceste file avem nevoie de ajutorul clasei nav, ceea ce face este să elimine stilul implicit al HTML a elementelor și fiii săi , facilitând astfel utilizarea și adaptarea ulterioară a acesteia la designul nostru. Pentru a utiliza acest lucru, trebuie pur și simplu să adăugăm clasele nav Da nav-tab-uri la un element și cu aceasta vom obține rezultatul adecvat.
Să vedem următorul cod în care implementăm această soluție, la fel ca în exemplul anterior, trebuie să includem fișierele bootstrap.css, bootstrap-theme.css, bootstrap.js Da jquery.js, să vedem codul nostru:

 Folosirea glifoanelor în Bootstrap

Securitate
Înregistrări
Cuprins

Pe măsură ce observăm utilizarea elementului cu această clasă ne permite să realizăm o structură HTML normal, dar rezultatul așa cum vom vedea mai jos ne oferă un alt mod de a organiza informațiile. Putem evidenția un alt aspect interesant al codului nostru și este combinația dintre Glifoni cu această soluție, demonstrând ceea ce explicăm despre independența elementelor.

MARI

O altă componentă foarte utilă sunt meniurile derulante, acestea ne permit să condensăm multe opțiuni într-un spațiu mic, în special pentru acele pagini web care au multe categorii pe care trebuie să le organizeze.
Scapă josComponenta Bootstrap cine se ocupă de asta se numește Scapă jos și, ca și componenta anterioară, se aplică în element totuși, construcția sa este puțin mai complexă, deși nu depășește stilul de lucru HTML.
Mai întâi trebuie să avem un element care este antetul listei derulante, apoi trebuie să avem care va conține opțiunile de afișat. Pentru aceasta, vom reformula exemplul anterior pentru a adăuga o listă derulantă în fila conținut, cu aceasta putem înțelege mai bine exemplul nostru.
Pentru a rezuma puțin vom arăta doar conținutul, deoarece antetul va fi același. Să vedem atunci codul pentru funcționalitatea meniului nostru derulant:

Securitate
Înregistrări
Cuprins

Videoclipuri
Imagini
Audio

Vedem apoi cum într-un element am început lista derulantă cu clasa scapă jos, apoi în cadrul acesta definim un element ca opțiune declanșatoare la adăugarea clasei drop-toggle și în cele din urmă am creat un ce are clasa meniu derulant pentru a identifica că are toate opțiunile pe care le vom vedea. Dacă vom rula exemplul nostru în browser, vom obține următorul rezultat:

MARI

Desigur, aceasta este doar o mică parte din ceea ce putem realiza, deoarece este posibil să includem mai multe efecte și cu stiluri diferite să schimbăm vizualitatea acestora. Cu aceasta terminăm acest tutorial, unde am văzut trei dintre cele mai utile componente pe care le putem folosi Bootstrap, realizând astfel o personalizare mult mai mare a aplicației noastre.