Introduksjon til Bootstrap-komponenter
Opprinnelig kalt Twitter-planen, og dette ble utviklet av Mark Otto og Jacob Thronton på Twitter. Bootstrap er et gratis CSS-rammeverk som gir respons på nettsidene. Ved lydhørhet betyr det at forskjellige DOM-elementer endrer størrelse på seg selv med endringen i skjermstørrelse uten at det går ut over elegansen på websiden, da det ellers vil skje tradisjonelt med pixel eller prosentvis størrelse på CSS-metoder.
Dette kalles også som det 'mobile-first' CSS-rammeverket, da det er designet for å ha en CSS Grid-layout ved å definere radene og kolonnene. Dette rammeverket har også JavaScript-komponenter sammen med CSS-klasser. For å kunne bruke dette rammeverket, må du obligatorisk koble jQuery og JavaScript Framework for Bootstrap sammen med de andre Bootstrap CSS-filene. Disse CSS-filene er tilgjengelige for nedlasting så vel som i form av CDN-er (Content Delivery Network).
Ulike Bootstrap-komponenter:
Bootstrap er satt sammen med titalls komponenter som kan gjenbrukes for å gi god brukeropplevelse og brukerinteraksjoner på en webside som navigasjonsfelt, popup-vinduer, rullegardinmerker, ikoner, knapper, forhåndsdesignede skjemaer og også dimensjoneringsalternativer for forskjellige DOM-elementer.
1) Glyphicons - Dette er fontformaterte ikoner som er tilgjengelige i Bootstrap. De er omtrent 200 i antall. Disse glyfonene finner du på https://glyphicons.com.
Hvordan bruke det?
Det er glyfikoner for å betegne nesten alle handlinger som zoom, redigering, advarsel, fil, sletting osv. Og de er definert i en individuell klasse. Så du må bruke baseklassen og individuell klasse, ideelt i et spennelement og bruke disse glyfonene.
syntaks:
2) Dropdowns - Dette er menyene som er koblet til, og en liste over lenker. Disse er gjort mer dynamiske av JS-plugin og kan bli funnet på http: // getbootstrap / javascript / # dropdowns
Hvordan bruke det?
Du må bruke klassen .dropdown da elementets klasse har listeelementene under den med klassen .dropdown-menyen.
syntaks:
3) Knappegrupper - Med denne Bootstrap-komponenten kan du gruppere et sett med knapper sammen i en serie ved siden av hverandre.
Hvordan bruke det?
Definer delingselementer med .btn-gruppeklasse og hekker elementene med knapp med .btn-klasse. Riktig
Feil
4) Dropdowns for knapper - Denne komponenten brukes til å bruke et knappelement for å utløse en dropdown.
syntaks:
5) Inngangsgrupper - Dette utvider formkontrollklassen og legger til tekst eller knapper på hver side av et inputfelt i et inputelement. Du må bruke .input-gruppeklasse med en .input-gruppe-addon-klasse for å kunne bruke disse inngangsgruppene.
syntaks:
@
6) Navbar - Disse komponentene fungerer som navigasjonsoverskrifter for nettstedet ditt. De er kollapset for å bli utvidet vertikalt med en vekslende hamburgermeny i enheter med mindre skjermstørrelser og blir horisontale etter hvert som skjermbredden øker.
syntaks:
7) Jumbotron - Dette er en bootstrap-komponent som kan strekke seg over hele skjermen (eller visningsområdet) for å vise noe sentralt innhold.
syntaks:
8) Varsler - Dette er en Bootstrap-komponent med en jQuery-plugin som gir kontekstuelle tilbakemeldingsmeldinger avhengig av brukerhandlingen. Dette brukes i utgangspunktet for å vise varselmeldinger.
Syntaks: …
9) Fremdriftslinjer - Denne komponenten brukes til å gi et visuelt syn på tilbakemeldinger om fremdriften i arbeid eller handling med en fremdriftslinje.
Synatx:
Eksempel:
10) Merker - Dette er en komponent for å fremheve noe som uleste elementer ved å legge klassen .badge til DOM-elementet, helst et spenn.
syntaks:
Meldinger 3
11) Paginering - Denne komponenten gir nettstedet ditt flersidig paginering slik at innholdet kan
deles inn i flere sider og navigeres enkelt. Vanligvis er DOM-elementet for uordnede lister definert med denne klassen .paginering.
syntaks:
Hvordan dette vil hjelpe i karrieren din?
Alle virksomheter fokuserer nå på brukerinteraksjon og brukeropplevelse (UI / UX). Fordi det store flertallet av befolkningen bruker håndholdte enheter som nettbrett og smarttelefoner som varierer mye med hensyn til pikseloppløsning og skjermstørrelse. Dette er grunnen til at det er veldig viktig å ha front-designen som er responsiv nok til å tilpasse seg til enhver form for skjerm uten at det går ut over elegansen på websiden.
Så å være dyktig i Bootstrap er å øke verdien for deg i den tekniske karrieren, og selskaper vil se frem til å ansette deg med en kjekk lønnsslipp. Og fordi det er gratis og åpen kildekode, er det mange rekkevidde for deg å bidra som utvikler og gjøre det fortsatt bedre enn det det er i dag.
Konklusjon-
Bootstrap framework er et veldig praktisk verktøy for å få respons på nettsidene. Komponentene som er forklart i denne bloggen er noen av de veldig brukte komponentene som hjelper deg med å skrive mindre kode for mer funksjonalitet og legge til mer eleganse på websiden du bygger.
Anbefalte artikler
Dette har vært en guide til Bootstrap-komponenter. Her diskuterer vi også en introduksjon og forskjellige komponenter av bootstrap sammen med syntaks. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -
- Slik installerer du Bootstrap
- Angular vs Bootstrap
- Bootstrap Training Course
- Bootstrap-intervjuspørsmål
- Hvordan bruke oppstartoppsett?
- Topp 5 typer Boostrap med prøvekode