Introducere în componentele Bootstrap
Denumit inițial drept Blueprint Twitter, acesta a fost dezvoltat de Mark Otto și Jacob Thronton la Twitter. Bootstrap este un cadru CSS gratuit care transmite capacitate de răspuns la paginile web. Prin reacție, înseamnă că diferite elemente DOM se redimensionează în mod corespunzător cu modificarea dimensiunii ecranului, fără a compromite eleganța paginii web, așa cum s-ar întâmpla în mod tradițional cu metode CSS de dimensionare a pixelilor sau a procentajului.
Acesta este, de asemenea, numit cadru CSS „mobil-primul”, deoarece este proiectat pentru a avea un layout CSS Grid prin definirea rândurilor și coloanelor. Acest cadru are, de asemenea, componente JavaScript împreună cu clase CSS. Pentru a utiliza acest cadru, trebuie să conectați obligatoriu jQuery și JavaScript Framework pentru Bootstrap împreună cu celelalte fișiere CSS Bootstrap. Aceste fișiere CSS sunt disponibile pentru descărcare, precum și sub forma CDN-urilor (Network Delivery Network).
Diferite componente pentru bootstrap:
Bootstrap este încorporat cu zeci de componente care pot fi reutilizate pentru a oferi o experiență bună a utilizatorului și interacțiuni ale utilizatorilor într-o pagină web cum ar fi bare de navigare, ferestre pop-up, meniuri derulante, pictograme, butoane, forme pre-proiectate și, de asemenea, opțiuni de dimensionare pentru diferite elemente DOM.
1) Glyphicons - Acestea sunt pictogramele formatate de font care sunt disponibile în Bootstrap. Sunt aproximativ 200 la număr. Acești glifici pot fi găsiți pe https://glyphicons.com.
Cum să-l folosească?
Există glyphicons pentru a indica aproape toate acțiunile cum ar fi zoom, editare, avertizare, fișier, ștergere etc., iar acestea sunt definite într-o clasă individuală. Așadar, trebuie să utilizați clasa de bază și clasa individuală, în mod ideal, într-un element de întindere și să folosiți aceste glifoane.
Sintaxă:
2) Meniuri derulate - Acestea sunt listele de meniuri bazate pe comutare. Acestea sunt făcute mai dinamice de către pluginul JS și pot fi găsite la http: // getbootstrap / javascript / # dropdowns
Cum să-l folosească?
Trebuie să utilizați clasa .dropdown ca clasă a elementului să aibă elementele din listă sub meniul clasei .dropdown.
Sintaxă:
3) Grupuri de butoane - Cu această componentă Bootstrap puteți grupa un set de butoane împreună într-o serie adiacentă reciproc.
Cum să-l folosească?
Definiți elementele de diviziune cu clasa grupului .btn și cuibăriți acele elemente cu butonul cu clasa .btn. Corect
Gresit
4) Meniul dropdown - Această componentă este utilizată pentru a utiliza un element buton pentru a declanșa un dropdown.
Sintaxă:
5) Grupuri de intrare - Aceasta extinde clasa de control de formă și adaugă text sau butoane de o parte și de alta a unui câmp de intrare al unui element de intrare. Trebuie să utilizați o clasă .input-group cu o clasă .input-group-addon pentru a utiliza aceste grupuri de intrare.
Sintaxă:
@
6) Navbar - Aceste componente servesc ca antete de navigație pentru site-ul dvs. web. Acestea sunt prăbușite pentru a fi extinse vertical cu un meniu de hamburger care comută în dispozitivele cu dimensiuni mai mici ale ecranului și devin orizontale pe măsură ce lățimea ecranului crește.
Sintaxă:
7) Jumbotron - Aceasta este o componentă bootstrap care se poate extinde pe ecranul complet (sau viewport) pentru a afișa conținut cheie.
Sintaxă:
8) Alerte - Aceasta este o componentă Bootstrap cu un plugin jQuery care oferă mesaje contextuale de feedback în funcție de acțiunea utilizatorului. Aceasta este practic utilizată pentru afișarea mesajelor de alertă.
Sintaxa: …
9) Bare de progres - Această componentă este utilizată pentru a oferi vizualului feedback-ul cu privire la progresul muncii sau acțiunii cu o bară de progres.
Synatx:
Exemplu:
10) Insigne - Aceasta este o componentă pentru a evidenția ceva precum articole necitite adăugând clasa .badge la elementul DOM, de preferință un interval.
Sintaxă:
Mesaje 3
11) Paginare - Această componentă oferă site-ului dvs. paginarea cu mai multe pagini, astfel încât conținutul să poată
fi împărțit în mai multe pagini și navigat ușor. De obicei, elementul DOM pentru liste neordonate este definit cu această clasă .pagination.
Sintaxă:
Cum vă va ajuta acest lucru în carieră?
Toate afacerile se concentrează acum pe interacțiunea cu utilizatorii și experiența utilizatorului (UI / UX). Deoarece marea majoritate a populației utilizează dispozitive portabile, cum ar fi tablete și smartphone-uri, care variază mult în ceea ce privește rezoluția pixelilor și dimensiunea ecranului. Acesta este motivul pentru care este foarte important să avem un design frontal suficient de receptiv pentru a se adapta la orice tip de ecran fără a compromite eleganța paginii web.
Așadar, să fii priceput la Bootstrap este să îți aducă un plus de valoare în cariera tehnică, iar companiile ar aștepta cu nerăbdare să te angajeze cu un salariu frumos. Și, pentru că este gratuit și open-source, există o mulțime de domenii pentru ca tu să contribui ca dezvoltator și să-l faci în continuare mai bun decât ceea ce este în prezent.
Concluzie-
Cadrul Bootstrap este un instrument foarte util pentru a aduce receptivitate la paginile web. Componentele explicate în acest blog sunt unele dintre cele foarte utilizate pe scară largă, care vă ajută să scrieți mai puțin cod pentru mai multe funcționalități și să adăugați mai multă eleganță paginii web pe care o construiți.
Articole recomandate
Acesta a fost un ghid pentru componentele Bootstrap. Aici vom discuta, de asemenea, o introducere și diferite componente ale bootstrap-ului împreună cu sintaxa acesteia. Puteți parcurge și alte articole sugerate pentru a afla mai multe -
- Cum se instalează Bootstrap
- Angular vs Bootstrap
- Curs de pregătire pentru bootstrap
- Întrebări de interviu Bootstrap
- Cum se utilizează macheta Bootstrap?
- Top 5 tipuri de Boostrap cu cod de eșantion