Bruke Bootstrap -komponentene

Støvelhempe Den har to flotte solide baser som gir oss et standard utgangspunkt for de forskjellige webdesignløsningene vi trenger eller ønsker å gjøre, dette er rutenettet og basis -CSS, med disse to verktøyene kan vi bygge en stor sentral base der vi kan plasser den for å hvile alle de forskjellige elementene som utgjør grensesnittet vårt.
Som alle baser, gjør disse i seg selv ikke resten av konstruksjonen, for å nå en større grad av raffinement og detaljer er det nødvendig å bruke tilleggskomponenter som er plassert på basen vår, og selvfølgelig vil kraften deres bli påvirket av soliditeten. av sistnevnte.
I tilfelle av Støvelhempe Vi har flere komponenter som hjelper oss med å maksimere detaljene i designene våre, komponenter som spenner fra ikoner, paneler og til og med overskrifter. Elementer som hjelper oss å differensiere og markere søknaden vår fra andre.
Komponentene i Støvelhempe De kan brukes på sidene våre uavhengig av resten av dem, det vil si at vi kan generere så mange komponenter som vi trenger i et enkelt dokument uten at de er i konflikt med de andre.
I tillegg er den grunnleggende stilen som standard allerede forhåndsdefinert, slik at vi kan bygge applikasjonen vår raskt og uten store anstrengelser, der vi til slutt kan tilpasse hele applikasjonen vår ved å endre grunnstil for våre egne stiler.
Komponentene kan være av CSS, JavaScript eller begge deler, så noen i tillegg til Base CSS de vil kreve tredjepartsbiblioteker som f.eks jQuery, dette kan virke litt ubehagelig, men virkeligheten er at implementeringen er så enkel at vi ikke engang vil innse at vi bruker flere ting enn det som er brakt som standard Støvelhempe.
En av de første komponentene vi må forstå er ikonene, siden vi med disse små bildene kan få brukeren til å forstå funksjonaliteten til en hvilken som helst del av designet vårt, og dermed når vi ser et ikon med et stort X vi vet at det er relatert til å lukke gjeldende seksjon eller i tilfelle vi ser et ikon i form av + vi vil vite at det er å legge til noe.
GlyphiconsI Støvelhempe det er et bibliotek med ikoner Glyphicons, veldig populær innen webdesign og som gir oss praktisk talt et ikon for hver handling vi kan utføre på en webside, gir dette oss mye arbeid siden vi ikke trenger å tenke på å lete etter noen til å designe grafiske stykker som tjener disse formålene.
I det følgende bildet kan vi se ikonene som vi har direkte på nettstedet til Støvelhempe:

FORSTØRRE

Dette er bare et lite utvalg av ikonene vi har tilgjengelig, men hvis vi blar gjennom den offisielle siden vil vi se alle alternativene vi har til bruk.
Bruken av disse ikonene er veldig enkel, vi må bare legge til klassen glyphicon til elementet HTML og legg deretter til klassen for det tilsvarende ikonet fra den tilgjengelige listen. Ikoner legges vanligvis til elementer som eller siden vi på denne måten sørger for at de bare er visuelle, og dermed oppnår vi et best mulig resultat. La oss se i den følgende koden et eksempel på hvordan du bruker denne komponenten i HTML.

 Bruke Glyphicons i Bootstrap
Betale i
Post
Brukere
Papirkurv
Logg av

I denne koden har vi ganske enkelt plassert inkluderingene fra bibliotekene våre Støvelhempe tilsvarende, legger til jQuery som et tredjepartsbibliotek, og legg deretter til biblioteket js av Støvelhempe, er det viktig å opprettholde denne rekkefølgen siden js library of Støvelhempe behov for jQuery og hvis det er inkludert, vil det gi oss en feil i implementeringen.
Så i vår har vi opprettet noen seksjoner der vi har lagt til GlyphiconsFor vårt formål var det tilstrekkelig å plassere ikonene innenfor etiketten. Hvis vi kjører i nettleseren vår, får vi følgende resultat:

Som vi kan se, følger ikonene med meldingene, noe som gir dem større vekt og forståelse, for eksempel i søkeboksen hvis noen ikke snakker engelsk, forstår de ikke meldingen SøkMen hvis du har brukt datasystemer og du ser forstørrelsesglassikonet med en gang, vet du at det refererer til søk, det er den sanne kraften til denne komponenten.
En annen viktig komponent er navigasjonsfanene, disse lar oss organisere innholdet vårt på samme side, og dermed unngå å bruke mye plass og dermed gjøre livet lettere for brukeren ved ikke å måtte lære et stort antall seksjoner i nettprogrammet vårt.
For å bruke disse fanene trenger vi hjelp fra klassen nav, dette er hva den fjerner standardstilen til HTML av elementene og sønnene hans og dermed lette bruken og den påfølgende tilpasningen til vårt design. For å bruke dette må vi bare legge til klassene nav Y nav-faner til et element og med dette vil vi oppnå passende resultat.
La oss se følgende kode der vi implementerer denne løsningen, i likhet med det forrige eksemplet må vi inkludere filene bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, la oss se koden vår:

 Bruke Glyphicons i Bootstrap

Sikkerhet
Rekorder
Innhold

Som vi legger merke til bruken av elementet med denne klassen kan vi lage en struktur HTML normalt, men resultatet som vi vil se nedenfor gir oss en annen måte å organisere informasjonen på. Vi kan markere et annet interessant aspekt av koden vår, og det er kombinasjonen av Glyphicons med denne løsningen, som demonstrerer hva vi forklarer om elementenes uavhengighet.

FORSTØRRE

En annen komponent som er veldig nyttig er rullegardinmenyene. Disse lar oss kondensere mange alternativer til en liten plass, spesielt for de websidene som har mange kategorier som de trenger å organisere.
Fall nedKomponenten av Støvelhempe hvem som håndterer dette kalles Fall ned og i likhet med den forrige komponenten brukes den i elementet konstruksjonen er imidlertid litt mer kompleks, selv om den ikke går utover HTML -arbeidsstilen.
Vi må først ha et element som er overskriften til rullegardinmenyen, så må vi ha som vil inneholde alternativene som skal vises. For dette skal vi omformulere det forrige eksemplet for å legge til en rullegardinmeny i innholdsfanen, med dette kan vi bedre forstå vårt eksempel.
For å oppsummere litt, skal vi bare vise innholdet i siden toppteksten vil være den samme. La oss se koden for rullegardinmenyen vår:

Sikkerhet
Rekorder
Innhold

Videoer
Bilder
Lyd

Vi ser da hvordan i et element vi har startet nedtrekkslisten med klassen fall ned, så innenfor dette definerer vi et element som alternativutløser når du legger til klassen rullegardinmeny-veksle og til slutt skapte vi en hva har klassen nedtrekksmenyen for å identifisere at den har alle alternativene vi vil se. Hvis vi kjører vårt eksempel i nettleseren, får vi følgende resultat:

FORSTØRRE

Selvfølgelig er dette bare en liten del av det vi kan oppnå, siden det er mulig å inkludere flere effekter og med forskjellige stiler endre det visuelle av disse. Med dette fullfører vi denne opplæringen, hvor vi har sett tre av de mest nyttige komponentene vi kan bruke i Støvelhempe, og dermed oppnå en mye større tilpasning av applikasjonen vår.