Brug af Bootstrap -komponenter

Bootstrap Det har to store solide baser, der giver os et standard udgangspunkt for de forskellige webdesignløsninger, som vi har brug for eller ønsker at gøre, det er Grid og base CSS, med disse to værktøjer kan vi bygge en stor central base, hvor vi kan placere den for at hvile alle de forskellige elementer, der udgør vores grænseflade.
Som alle baser gør disse i sig selv ikke resten af ​​konstruktionen, for at nå en større grad af raffinement og detaljer er det nødvendigt at bruge yderligere komponenter, der er placeret på vores base, og selvfølgelig vil deres kraft blive påvirket af soliditeten. af sidstnævnte.
I tilfælde af Bootstrap Vi har flere komponenter, der hjælper os med at maksimere detaljerne i vores designs, komponenter, der spænder fra ikoner, paneler, endda overskrifter. Elementer, der hjælper os med at differentiere og fremhæve vores applikation fra andre.
Komponenterne i Bootstrap De kan bruges på vores sider uafhængigt af resten af ​​dem, det vil sige, at vi kan generere så mange komponenter, som vi har brug for i et enkelt dokument, uden at de er i konflikt med de andre.
Derudover er den grundlæggende stil som standard allerede foruddefineret, så vi kan bygge vores applikation hurtigt og uden store anstrengelser, hvor vi i sidste ende kan tilpasse hele vores applikation ved at ændre basestilen til vores egne stilarter.
Komponenterne kan være af CSS, JavaScript eller begge dele, så nogle udover Base CSS de vil kræve tredjepartsbiblioteker som f.eks jQuery, det kan virke lidt ubehageligt, men virkeligheden er, at implementeringen er så enkel, at vi ikke engang vil indse, at vi bruger flere ting, end hvad der er bragt som standard Bootstrap.
En af de første komponenter, vi skal forstå, er ikonerne, da vi med disse små billedstykker kan få brugeren til at forstå funktionaliteten i enhver del af vores design, og dermed når vi ser et ikon med et stort x vi ved, at det er relateret til lukning af den aktuelle sektion eller i tilfælde af, at vi ser et ikon i form af + vi ved, at det er at tilføje noget.
GlyphiconsI Bootstrap der er et bibliotek med ikoner Glyphicons, meget populær inden for webdesign, og det giver os praktisk talt et ikon for hver handling, som vi kan udføre på en webside, dette fremmer os meget arbejde, da vi ikke behøver at tænke på at lede efter nogen til at designe grafiske stykker, der tjener disse formål.
I det følgende billede kan vi se de ikoner, vi har direkte på webstedet for Bootstrap:

FORSTØRRE

Dette er blot et lille eksempel på de ikoner, vi har til rådighed, men hvis vi gennemser den officielle side, vil vi se alle de muligheder, vi har til vores brug.
Brugen af ​​disse ikoner er meget enkel, vi skal bare tilføje klassen glyphicon til elementet HTML og tilføj derefter klassen for det tilsvarende ikon fra den tilgængelige liste. Ikoner tilføjes normalt til emner som f.eks eller siden vi på den måde sikrer, at de kun er visuelle, og dermed opnår det bedst mulige resultat. Lad os derefter se et eksempel på, hvordan du bruger denne komponent i den følgende kode HTML.

 Brug af Glyphicons i Bootstrap
Betal ind
Post
Brugere
Skraldespand
Log af

I denne kode har vi ganske enkelt placeret inklusionerne fra vores biblioteker af Bootstrap tilsvarende, tilføjelse jQuery som et tredjepartsbibliotek, og tilføj derefter biblioteket js af Bootstrap, er det vigtigt at opretholde denne rækkefølge siden js bibliotek af Bootstrap behov for jQuery og hvis det er inkluderet, vil det give os en fejl i implementeringen.
Så inden for vores har vi oprettet nogle sektioner, hvor vi har tilføjet GlyphiconsTil vores formål var det nok at placere ikonerne inden for etiketten. Hvis vi udfører i vores browser, får vi følgende resultat:

Som vi kan se, ledsager ikonerne meddelelserne, hvilket giver dem større vægt og forståelse, f.eks. I søgefeltet, hvis nogen ikke taler engelsk, forstår de ikke meddelelsen SøgMen hvis du har brugt computersystemer, og du ser forstørrelsesglasikonet med det samme, ved du, at det refererer til søgninger, det er denne komponents sande kraft.
En anden vigtig komponent er navigationsfanerne, disse giver os mulighed for at organisere vores indhold på den samme side og dermed undgå at bruge meget plads og dermed gøre livet lettere for brugeren ved ikke at skulle lære et stort antal sektioner i vores webapplikation.
For at bruge disse faner har vi brug for hjælp fra klassen nav, det er hvad det gør, er at fjerne standardstilen til HTML af elementerne og hans sønner , hvilket letter brugen og dens efterfølgende tilpasning til vores design. For at bruge dette skal vi blot tilføje klasserne nav Y nav-faner til et element og dermed opnår vi det passende resultat.
Lad os se følgende kode, hvor vi implementerer denne løsning, ligesom det tidligere eksempel skal vi inkludere filerne bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, lad os se vores kode:

 Brug af Glyphicons i Bootstrap

Sikkerhed
Optegnelser
Indhold

Da vi bemærker brugen af ​​elementet med denne klasse giver os mulighed for at lave en struktur HTML normalt, men resultatet, som vi vil se nedenfor, giver os en anden måde at organisere oplysningerne på. Vi kan fremhæve et andet interessant aspekt af vores kode, og det er kombinationen af Glyphicons med denne løsning, der demonstrerer, hvad vi forklarer om elementernes uafhængighed.

FORSTØRRE

En anden komponent, der er meget nyttig, er rullemenuerne, disse giver os mulighed for at kondensere mange muligheder til et lille rum, især for de websider, der har mange kategorier, som de skal organisere.
DropdownKomponenten af Bootstrap hvem der håndterer dette kaldes Dropdown og ligesom den tidligere komponent anvendes den i elementet konstruktionen er dog lidt mere kompleks, selvom den ikke går ud over HTML -arbejdsstilen.
Vi skal først have et element, der er overskriften på rullemenuen, derefter skal vi have som indeholder de muligheder, der skal vises. Til dette vil vi omformulere det foregående eksempel for at tilføje en rullemenu i fanen indhold, med dette kan vi bedre forstå vores eksempel.
For at opsummere lidt, vil vi kun vise indholdet af siden, da overskriften vil være den samme. Lad os se koden derefter for vores rullemenu-funktionalitet:

Sikkerhed
Optegnelser
Indhold

Videoer
Billeder
Lyd

Vi ser derefter hvordan i et element vi har startet dropdown med klassen dropdown, så inden for dette definerer vi et element som optionstrigger, når klassen tilføjes dropdown-skifte og endelig skabte vi et hvad har klassen Drop down menu at identificere, at den har alle de muligheder, vi vil se. Hvis vi kører vores eksempel i browseren, får vi følgende resultat:

FORSTØRRE

Dette er naturligvis kun en lille del af det, vi kan opnå, da det er muligt at inkludere flere effekter og med forskellige stilarter ændre det visuelle af disse. Med dette afslutter vi denne vejledning, hvor vi har set tre af de mest nyttige komponenter, som vi kan bruge i Bootstrapog dermed opnå en langt større tilpasning af vores applikation.