Share
Bootstrap er utviklet for å imøtekomme mange scenarier ved å tilby en håndfull vanlige webkomponenter. Det er knapper, en responsiv navigasjonslinje, faner, verktøytips, karuseller og så videre. Likevel, selv med alle lekene Bootstrap gir oss, mangler det fortsatt et veldig populært mønster: off-canvas navigasjonen.
Denne tilnærmingen til navigering setter menyen av fra det synlige området (lerretet), noe som gir mer plass til å fokusere på hovedinnholdet. Off-canvas navigasjon ble først gjort populær i innfødte mobilapper, hvoretter den kom til den responsive weben (takk delvis til Luke Wroblewskis artikkel). Vanligvis bruker det jQuery til å veksle statusen til navigasjonen.
Når vi snakker om hvilke Bootstrap er så populære og samfunnsstøtten er så stor, har utviklere laget plugin eller utvidelser for å inkludere komponenter som ikke er tilgjengelige i offisielt Bootstrap. Og det inkluderer en for å implementere en off-canvas navigasjon.
I denne veiledningen vil jeg vise deg hvordan du legger til en off-canvas navigasjon til Bootstrap med en forlengelse kalt Jasny Bootstrap av Arnold Daniels. Mine to grunner for dette alternativet er:
Under denne opplæringen skal jeg gå gjennom en arbeidsflyt som hjelper nettstedet vedlikeholdsevne ved hjelp av Bower. Så sørg for at du har installert Bower allerede på systemet. Hvis du heller ikke bruker Bower, er det greit, men for å komme i gang har vi også publisert en håndfull nybegynneropplæringer på Bower.
Vel, la oss komme i gang.
La oss starte prosjektet ved å opprette arbeidsbøker der vi skal plassere de nødvendige brikkene.
work-dir | - eiendeler | | - css | | - img | '- js' - kilder | - js '- mindre
Vi vil bruke eiendeler mappe for å lagre nettstedets eiendeler som bilder, stilark, JavaScript-filer og lignende. De kilder mappen er hvor vi skal sette ukompilert kildekoden for mindre og JavaScript. Etterpå vil vi definere prosjektspesifikasjonen - navn, versjon, avhengigheter og andre - med Bower.
Løpe bower init kommandoen i arbeidskatalogen og fyll ut alle meldingene.
Et eksempel på kommandoen "bower init" Du trenger ikke å følge inngangene som vist ovenfor nøyaktig; juster inngangene etter dine egne krav. Når det er ferdig, et nytt filnavn bower.json bør være til stede, som inneholder prosjektspesifikasjonen som vi nettopp har fylt ut.
Dette prosjektet krever to rammer; nemlig Bootstrap og Jasny Bootstrap. Før vi installerer dem, la oss spesifisere katalognavnet der Bower må installere pakkene. For å gjøre dette, opprett en ny fil i rotnivået i arbeidskatalogen som heter .bowerrc og legg inn følgende linjer for å navngi mappen.
"katalog": "komponenter"
Deretter inkluderer du disse linjene nedenfor i bower.json, som vil fortelle Bower at prosjektet avhengighet er Bootstrap og Jasny Bootstrap versjon 3.1.1 eller nyere.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
I Terminal eller Kommandoprompt, løp bower installasjon beordre å ta tak i avhengighetene som søten har oppgitt alt på en gang.
Som spesifisert i .bowerrc, prosjektet avhengighet bør nå være i en nylig generert mappe som heter komponenter.
Med alle avhengige forberedelser kan vi begynne å jobbe med prosjektet! Vi vil sparke ting ved å organisere stilarkene. Det er fire LESS stilark som vi må opprette, nemlig:
Accentsconagua
variables.less - Som navnet sier, inneholder denne stilark variablene som brukes i Bootstrap. Vi lager denne kopien hvis vi vil tilpasse variablene, uten å påvirke de opprinnelige filene (kopier Bootstrap-variabler fra denne Gist).variabler-jasny.less - På samme måte inneholder denne stilark variablene som brukes i utvidelsen, Jasny Bootstrap (kopier variablene her).app.less - dette stilarket inneholder referanser til Bootstrap og Jasny Bootstrap stilark vi må bygge nettstedet (du kan kopiere innholdet her).style.less - Vi vil skrive våre helt egne stiler i dette stilarket.Lag og legg dem sammen slik:
... '- kilder | - js' - mindre | - app.less | - style.less | - variables-jasny.less '- variables.less
Den neste tingen er å kompilere disse stilarkene. For å gjøre det, bruker vi Koala med følgende konfigurasjon:
app.less samt style.less utfør destinasjon til eiendeler / css / katalog..kart for enklere debugging av stilarket. Hvis dette er det første du har hørt om Kildekart, sjekk ut vår veiledning på Tuts + Code, Source Map 101.
Når konfigurasjonen er ferdig, må du kompilere MINDRE til CSS.
Merk: Husk at du ikke er forpliktet til å bruke Koala hvis du foretrekker en annen måte å kompilere MINDRE filer på.
Opprett en ny HTML-fil kalt index.html. Bortsett fra den grunnleggende HTML5 bare strukturen, index.html filen vil også inneholde meta viewport-taggen, meta description taggen, tittelen og linkene til stilarkene, slik som:
Bootstrap Off-canvas Navigation
La oss nå legge til off-canvas navigasjonen. Jasny Bootstrap bruker en lignende tilnærming til Bootstrap når det gjelder komponentmarkeringen. Slik starter vi off-canvas navigasjonsstrukturen:
Den består av en håndfull klasser. Tre klasser nemlig navmenu, navmenu-inverse, navmenu-fast-høyre definer elementet som en navmenu. De navmenu er en av Jasny Bootstrap-komponentene som setter det tildelte elementet som en vertikal navigasjon. De offcanvas er klassen som setter elementet av visningsporten. I tillegg har vi også lagt til en ny klasse, navmenu stedet, som gjør at vi kan tilpasse navigasjonen med våre egne stiler.
Menyelementene i off-canvas-navigasjonen kan legges ut ved hjelp av nav navmenu-nav klasse, som så.
Du er ganske velkommen til å inkludere originale Bootstrap-komponenter i forbindelse med denne oppmerkningen, for eksempel Dropdowns og knappene.
HTML-merket for navigasjonen som vi vil legge til i denne opplæringen, er ganske lang. Så, for enkelhets skyld, kan den komplette oppslaget fås gjennom dette Gist..
Følgende bilde viser vår plan for å legge ut innholdet på nettsiden:
Nettstedets blåkopi, som viser oppsettet. Som vist ovenfor, vil innholdet på nettsiden omfatte en logo, en veksleknapp med "Hamburger" -ikonet for å skyve navigasjonen inn og ut, og noen få linjer med fangstfraser med en stor knapp - kjent som en ring-til-handling-knapp
HTML-oppslaget til innholdet er like langt som det skal limes inn i denne opplæringen. I stedet, vær så snill å kopiere hele fra dette Gist.
Mange av stilene heri vil være bare dekorative, roterende rundt farger, størrelser og stillinger. Denne dekorative stilen vil bli oppnådd ved å tilpasse Bootstrap forhåndsdefinerte stiler og skrive våre egne stiler. Så, i stedet for å gå gjennom trinnene som allerede er åpenbare, vil jeg gjerne påpeke noen viktige detaljer som er mest viktige.
Først og fremst, før du skriver en enkelt linje, importerer du app.less stilark i style.less. Dette vil tillate oss å gjenbruke variablene og blandingene i den.
@import (referanse) 'app.less';
For det andre lager vi en MINDRE variabel for å definere bildebanen. Vi heter variabelen @ Sti-img.
@ path-img: '... / ... / assets / img /';
Når som helst vi trenger å referere til et bilde i stilarket, vil vi inkludere denne variabelen. Dette eksemplet nedenfor viser hvordan vi bruker det til å peke på logoen.
.masthead-merkevare margin-top: 10px; margin-bunn: 10px; flyte: venstre; tekstjustering: venstre; margin-topp: -15px; en .text-hide (); display: inline-block; bakgrunnsbilde: url ('@ path-img logo.png'); bakgrunn-gjentak: ikke-gjenta; bakgrunnsstørrelse: 100% 100%; bredde: 100px; høyde: 33px; Til slutt vil vi sentrere innholdet, fangstfrasene og knappen, vertikalt. CSS, på dette tidspunktet, har ennå ikke gitt oss en enkel måte å justere innholdet vertikalt ved å bruke bare en enkelt eiendomserklæring. Derfor er det en rekke måter å oppnå det på, og ærlig ingen er bedre enn noen annen.
I dette tilfellet vil vi justere innholdet ved hjelp av CSS-tabellvisningsmetoden. Hvis du tar en titt på websideoppslaget, ser du at vi pakker inn innholdet på nettsiden med to For å justere innholdet vertikalt, setter vi inn Fullstendige detaljer om stilregler kan fås i dette Gist. Når vi har lagt til stilene, bør nettstedet nå se ut og føle, som skjermbilde nedenfor: Nettstedet er imidlertid ikke fullt fungerende. Prøv å klikke på "Hamburger" -ikonet; ingen navigasjon på skjermen. Denne funksjonaliteten kommer fra JavaScript-biblioteket, derfor må vi kompilere den og legge den til nettsiden. Det er fire JavaScript-biblioteker vi trenger for å kunne bruke off-canvas navigasjonen, som er jQuery, transition.js, dropdown.js for å aktivere rullegardinmenyen som vi la til i navigasjonen, og til slutt offcanvas.js. For å kompilere dem sammen, opprett en ny JavaScript-fil i Kilde / js katalogen. I dette tilfellet vil vi nevne det app.js. Importer JavaScript-bibliotekene ved hjelp av Still utgangen til / eiendeler / js katalog, og klikk på Kompilere knapp. Ikke glem å lenke den sammensatte filen på nettsiden. Nå bør du kunne skyve off-canvas navigasjonen inn og ut. I tillegg kan du også legge til følgende stykke JavaScript nederst på siden, noe som gjør det mulig å overføre effekten av rullegardinmenyen. I denne opplæringen har vi tatt med en fungerende off-canvas navigasjon til Bootstrap ved hjelp av en forlengelse kalt Jasny Bootstrap. Å ha brukt Bower i denne opplæringen vil hjelpe oss med å opprettholde og holde deg oppdatert med disse to bibliotekene. Etter en stund kan disse to bibliotekene bli oppdatert. Med Bower kan du kjøre Hvis en ny versjon er tilgjengelig, kjør du bare Jeg håper du har lært et par metoder og triks fra denne opplæringen, hvis du har spørsmål, vær så snill å la dem gå i kommentarene.site-wrapper og site-wrapper-inner klasse, som så. vise tilhører site-wrapper til bord, og la den spenne hele visningsporten ved å spesifisere bredde og høyde til 100%. Så setter vi innvendig innpakning vise eiendom til Tabellen-celle-. Dette lar oss nå søke vertical-align Egenskap for å justere innholdet vertikalt..site-wrapper display: bord; bredde: 100%; høyde: 100%; Min høyde: 100%; .site-wrapper-inner display: tabell-celle; vertikaljustering: midt;
6. Gjør nettsiden kommet til live
... '- kilder | - js | '- app.js' - mindre
@ Koala-foranstilt, som så.// @ koala-prepend "... / ... /components/jquery/dist/jquery.js" // @ koala-prepend "... / ... /components/bootstrap/js/transition.js" // @ koala-prepend "... / ... /components/jasny-bootstrap/js/offcanvas.js "
Overgang
Konklusjon
bower liste kommandoen for å liste alle installerte Bower-pakkene og verifisere om en ny versjon av hver enkelt er tilgjengelig.
bower oppdatering eller bower installasjon kommandoen for å oppdatere pakken. Det er så enkelt.Ytterligere referanser
