Share
Bootstrap är utformad för att tillgodose många scenarier genom att tillhandahålla en handfull vanliga webbkomponenter. Det finns knappar, en lyhörd navigeringsfält, flikar, verktygstips, karuseller och så vidare. Ändå, även med alla leksaker som Bootstrap ger oss, saknas det fortfarande ett mycket populärt mönster: off-canvas navigation.
Detta sätt att navigera sätter menyn från det synliga området (duken), vilket ger mer utrymme att fokusera på huvudinnehållet. Utanför duknavigering blev först populär i inbyggda mobilappar, varefter den kom till den mottagliga webben (tack delvis till Luke Wroblewskis artikel). Vanligtvis använder den jQuery för att växla navigationsstatusen.
Med tanke på vilka Bootstrap är så populära och samhällsstödet är så bra, har utvecklare skapat plugins eller tillägg för att inkludera komponenter som inte är tillgängliga i officiell Bootstrap. Och det inkluderar en för att implementera en off-canvas navigering.
I denna handledning visar jag dig hur du lägger till en off-canvas navigering till Bootstrap med en förlängning kallad Jasny Bootstrap av Arnold Daniels. Mina två skäl till detta alternativ är:
Under denna handledning går jag igenom dig genom ett arbetsflöde som hjälper Bower att upprätthålla webbsidan. Så se till att du har installerat Bower redan på ditt system. Om du hellre inte vill använda Bower, så är det bra, men för att komma igång har vi också publicerat en handfull nybörjarehandledning på Bower.
Tja, låt oss börja.
Låt oss starta projektet genom att skapa arbetsbibliotek där vi ska placera de nödvändiga bitarna.
work-dir | - tillgångar | | - css | | - img | '- js' - källor | - js '- mindre
Vi kommer att använda tillgångar mapp för att spara webbplatsens tillgångar som bilder, stylesheets, JavaScript-filer och liknande. De källor mapp är där vi ska sätta okompilerat källkod för LESS och JavaScript. Efteråt definierar vi projektspecifikationen - namn, version, beroenden och andra - med Bower.
Springa bower init kommandot i arbetskatalogen och fyll i alla instruktioner.
Ett exempel på kommandotångarna "bower init" Du behöver inte följa ingångarna precis som det visas ovan. justera inmatningarna enligt dina egna krav. När det är klart, ett nytt filnamn bower.json bör vara närvarande, som innehåller den projektspecifikation som vi just har fyllt i.
Detta projekt kräver två ramar; nämligen Bootstrap och Jasny Bootstrap. Innan vi installerar dem, låt oss ange katalognamnet där Bower måste installera paketet. För att göra det, skapa en ny fil i rotnivån i den arbetsmapp som heter .bowerrc och lägg in följande rader för att namnge mappen.
"katalog": "komponenter"
Därefter, inkludera dessa linjer nedan i bower.json, vilket kommer att berätta för Bower att projektberoende är Bootstrap och Jasny Bootstrap version 3.1.1 eller nyere.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
I Terminal eller Kommandotolk, kör bower installation kommando att ta tag i de beroende som swe har angett allt på en gång.
Som anges i .bowerrc, Projektberoende bör nu vara i en nybildad mapp som heter komponenter.
Med alla beredda beroenden kan vi börja arbeta med projektet! Vi kommer att sparka upp saker genom att organisera stilarken. Det finns fyra mindre stylesheets som vi måste skapa, nämligen:
Accentsconagua
variables.less - Som namnet säger innehåller det här formatet de variabler som används i Bootstrap. Vi gör den här kopian om vi vill anpassa variablerna, utan att påverka originalfilerna (kopiera Bootstrap-variabler från den här Gist).variabler-jasny.less - På samma sätt innehåller det här formatet de variabler som används i förlängningen, Jasny Bootstrap (kopiera variablerna här).app.less - det här formatet innehåller referenser till Bootstrap och Jasny Bootstrap stylesheets vi behöver bygga webbplatsen (du kan kopiera innehållet här).style.less - Vi skriver våra egna stilar i det här stilarket.Skapa och sätt dem ihop så här:
... "- källor | - js '- mindre | - app.less | - style.less | - variables-jasny.less' - variables.less
Nästa sak är att sammanställa dessa stylesheets. För att göra så använder vi Koala med följande konfiguration:
app.less så väl som style.less utgångsmål till tillgångar / css / katalog..Karta för enklare debugging av stilarket. Om det här är det första du hört om källkarta, kolla in vår handledning om Tuts + Code, Source Map 101.
När konfigurationen är klar, kompilera MINDRE till CSS.
Notera: Tänk på att du inte är skyldig att använda Koala om du föredrar ett annat sätt att kompilera dina mindre filer.
Skapa en ny HTML-fil som heter index.html. Bortsett från den grundläggande HTML5-nakna strukturen, index.html filen kommer också att innehålla meta viewport taggen, meta description taggen, titeln och länkarna till stylesheets, som så:
Bootstrap Off-canvas Navigation
Låt oss nu lägga till off-canvas navigering. Jasny Bootstrap använder ett liknande tillvägagångssätt för Bootstrap när det gäller komponentmarkeringen. Så här startar vi off-canvas navigationsstrukturen:
Den innehåller en handfull klasser. Tre klasser nämligen navmenu, navmenu-invers, navmenu-fast rätt definiera elementet som en navmenu. De navmenu är en av Jasny Bootstrap-komponenterna som anger det tilldelade elementet som en vertikal navigering. De offcanvas är klassen som sätter elementet utanför visningsporten. Dessutom har vi också lagt till en ny klass, navmenu-site, vilket gör att vi kan anpassa navigeringen med våra egna stilar.
Menyalternativen inom off-canvasnavigering kan läggas ut med hjälp av nav navmenu-nav klass, som så.
Du är ganska välkommen att inkludera original Bootstrap-komponenter i samband med denna markering, till exempel Dropdowns och Knapparna.
HTML-markeringen för den navigation som vi lägger till i den här handledningen är ganska lång. Så, för enkelhetens skull, kan fullständig markering erhållas genom detta Gist..
Följande bild visar vår plan att lägga ut webbsidans innehåll:
Webbplatsens ritning, som visar layouten. Som visas ovan kommer innehållet på webbplatsen att innehålla en logotyp, en växlingsknapp med "Hamburger" -ikonen för att skjuta in och ut, och några rader av fångstfraser med en stor knapp - känd som en uppmaningsknapp
HTML-uppteckningen av innehållet är lika lång som att klistras in i denna handledning. I stället är det fritt att kopiera hela från detta Gist.
Många av stilerna här kommer bara att vara dekorativa, roterande kring färger, storlekar och positioner. Denna dekorativa stil kommer att uppnås genom att anpassa de förutbestämda stilarna för Bootstrap och skriva våra egna stilar. Så, istället för att gå igenom de steg som kanske redan är uppenbara, vill jag påpeka några viktiga detaljer som är mest viktiga.
Först och främst, innan du skriver en enda rad, importerar du app.less stylesheet in i style.less. Detta gör det möjligt för oss att återanvända variablerna och blandningarna i den.
@import (referens) 'app.less';
För det andra skapar vi en LÄSER variabel för att definiera bildvägen. Vi heter variabeln @ Path-img.
@ path-img: '... / ... / assets / img /';
När som helst kommer vi att behöva hänvisa till en bild i stilarket, vi kommer att inkludera denna variabel. Detta exempel nedan visar hur vi använder det för att peka på logotypen.
.masthead-märke margin-top: 10px; marginal-botten: 10px; flyta till vänster; text-align: left; marginal-topp: -15px; en .text-hide (); display: inline-block; bakgrundsbild: url ('@ path-img logo.png'); background-repeat: no-repeat; bakgrundsstorlek: 100% 100%; bredd: 100px; höjd: 33px; Slutligen vill vi centrera innehållet, fångstfraserna och knappen, vertikalt. CSS har vid denna tidpunkt ännu inte gett oss ett bekvämt sätt att anpassa innehållet vertikalt med endast en enda fastighetsdeklaration. Följaktligen finns det ett antal sätt att uppnå det, och ärligt ingen är bättre än någon annan.
I det här fallet kommer vi att anpassa innehållet med CSS-tabellvisningsmetoden. Om du tittar på webbsidan, ser du att vi sätter in innehållet på webbsidan med två För att justera innehållet vertikalt ställer vi in Fullständiga detaljer om stilreglerna kan erhållas i detta Gist. När vi har lagt till stilerna borde webbplatsen nu ha utseendet, som skärmdumpen nedan: Webbplatsen är dock inte fullt fungerande. Försök klicka på "Hamburger" -ikonen; ingen navigering i kanvas som skjuts in. Den här funktionen kommer från JavaScript-biblioteket, så vi måste sammanställa det och lägga till det på webbplatsen. Det finns fyra JavaScript-bibliotek vi behöver för att kunna använda off-canvas navigering, som är jQuery, transition.js, dropdown.js för att aktivera rullgardinsmenyn som vi lade till i navigeringen och slutligen offcanvas.js. För att sammanställa dem, skapa en ny JavaScript-fil i source / js katalogen. I det här fallet heter vi det app.js. Importera JavaScript-biblioteken med hjälp av Ställ in utgången till / tillgångar / js katalog och tryck på Sammanställa knapp. Glöm inte att länka den sammanställda filen på webbsidan. Nu ska du kunna skjuta off-canvas navigering in och ut. Dessutom kan du också lägga till följande bit av JavaScript längst ner på sidan, vilket möjliggör övergångseffekten på rullgardinsmenyn. I denna handledning har vi inkluderat en fungerande off-canvas navigering till Bootstrap med en förlängning kallad Jasny Bootstrap. Att ha använt Bower i den här handledningen hjälper oss att behålla och hålla dig uppdaterad med dessa två bibliotek. Efter ett tag kan dessa två bibliotek uppdateras. Med Bower kan du springa Om en ny version är tillgänglig, kör bara Jag hoppas att du lärde dig ett par metoder och tricks från denna handledning, om du har några frågor, kan du lämna dem i kommentarerna.site-wrapper och site-wrapper-inre klass, som så. visa egendom av site-wrapper till tabell, och gör det spänner över hela visningsporten genom att ange bredd och den höjd till 100%. Sedan sätter vi in innerförpackningen visa egendom till tabell-cell. Detta låter oss nu tillämpa vertikal-align egenskap för att anpassa innehållet vertikalt..site-wrapper display: bord; bredd: 100%; höjd: 100%; minhöjd: 100%; .site-wrapper-inner display: tabell-cell; vertikaljustering: mitt;
6. Gör webbsidan levande
... "- källor | - js | '- app.js' - mindre
@ Koala-prepend, såhär.// @ koala-prepend "... / ... /components/jquery/dist/jquery.js" // @ koala-prepend "... / ... /components/bootstrap/js/transition.js" // @ koala-prepend "... / ... /components/jasny-bootstrap/js/offcanvas.js "
Övergång
Slutsats
bower lista kommandot att lista alla installerade Bower-paket och kontrollera om en ny version av var och en är tillgänglig.
bower uppdatering eller den bower installation Kommando att uppdatera paketet. Det är så enkelt.Ytterligare referenser
