Accentsconagua
Detta är huvudinnehållet väl
Detta är en kort paragraf för att markera var det allmänna innehållet ska gå.
Share
Webbdesign är ett utvecklande yrke. Medan ett angeläget öga för färg, typografi och layout alltid kommer att vara viktigt, blir dessa färdigheter trumpet av ett behov av att förstå användarnas motivationer. Det räcker inte att bygga en webbplats och vänta på att trafiken rullar in - webbplatser måste hjälpa användarna att uppnå sina mål, med minst kognitiv friktion. Bootstrap kan hjälpa webbprofessorer att definiera dessa mål och skapa en mördareupplevelse också.
vi gör inte sidor, vi gör filmer
Jag gillar att säga att vi inte gör sidor, vi gör filmer. Användare förväntar sig att webbplatser laddas snabbt, ger engagerande innehåll och smart interaktivitet. Precis som filmer beror på snabba nedskärningar, belysning och humör för att dra användare in, webbplatser bygger på övergångar, interaktivitet och timing. Dessa detaljer går ofta vilse under designfasen - eller värre, redovisas aldrig. Medan en övergång som tar 0,5 sekunder när det ska ta 0,25 sekunder brukar inte sjunka en applikation är det denna detaljnivå som skiljer sig bra från bra.
Jag ska visa dig hur Bootstrap kan ersätta statiska trådramar och bringa dessa detaljer i framkant tidigare och med mindre ansträngning.
Det första steget är att ladda ner de senaste stabila Bootstrap och jQuery builds.
Även om jQuery är värd av ett antal CDN, föredrar jag att inkludera alla filer lokalt så att jag kan arbeta med eller utan webbåtkomst. Gå vidare och skapa en katalogstruktur som den nedan och kopiera det ominerade Bootstrap CSS, Bootstrap Responsive CSS och Javascript-filer. Tweak namn och platser efter behov, men med hjälp av den här strukturen kan du också utnyttja min HTML-mall i nästa steg.
Nu skulle det vara trevligt att skapa ett tredje stilark som jag kommer att ringa user.css. Den här filen kommer att användas för att åsidosätta Bootstrap-stilar efter behov.
Detta är den enda andra installationen som krävs för att börja bygga en interaktiv trådram. Skapa en fil i din projektkatalogrots, och namnge den index.html. När du har skapat filen, kopiera den här koden och spara.
Interactive Bootstrap Wireframes Din layout kommer att gå här.
Öppna en webbläsare och dra den sparade index.html-filen till den. Om alla innehåll är korrekt laddade ska du se något som liknar skärmdumpen nedan. Om du inte ser varningsrutan öppnar du konsolen eller webbinspektören och ser om en fil inte har laddats. Efter felsökning, ta bort eller kommentera varningsraden i $ (Dokument) .ready funktion längst ner på sidan och gör dig redo att bygga Bootstrap wireframes.
Med alla nödvändiga filer på plats kan vi börja grova i huvudinnehållsblocken. De flesta webbplatser (appar) kommer att innehålla en rubrik, primärnavigering, huvudinnehåll, sidofält och sidfot. Jag håller medvetet på att hålla layouten enkel, för att snabbt illustrera kraften hos Bootstraps nätsystem.
Den enda strukturella markupen på sidan hittills är vår div med klass "container".
Notera: Denna div är ett obligatoriskt innehållande block för Bootstrap; Vi kommer att bygga hela vår wireframe applikation inuti den.
Bootstrap kräver också den nya HTML-doktypen, och genererar dess stilregler med klasser, i stället för taggnamn. Dessa beslut innebär att vi kan använda några nya HTML5-element: rubrik, navigering, avsnitt, artikel, sidled och sidfot. Det är värt att nämna om du planerar att testa din layout i Internet Explorer, du måste ladda ner och inkludera antingen Modernizr eller HTML5 Shim. Moderna versioner av Firefox, Chrome och Safari stöder native HTML5-standarden.
Bootstrap är byggt på ett 12 kolonnnät. Det använder två klasser, rad och spänna att skapa blocknivåbehållare. Genom att tillämpa radklassen i en behållare som en div eller en rubrik, sträcker den automatiskt över hela bredden på 940px. Genom att lägga till behållare med klassstorlekN (N vara en platshållare för antalet kolumner) kan du enkelt skapa innehållsbrunnar, sidofält och andra layoutblock utan att behöva hantera flottor eller andra egenskaper.
För att komma igång snabbt ska jag bygga en grundrubrik, navigeringsfält, huvudbrunn, sida och sidfot. Byt ut "Din layout kommer att gå här" med följande kod.
Min fantastiska App
Detta är huvudinnehållet väl
Detta är en kort paragraf för att markera var det allmänna innehållet ska gå.
Jag har också lagt till några grundläggande regler till user.css, för att göra innehållsblocket lättare att identifiera. Om allt har gått bra bör du se ett antal gråblock med svart beskrivande text inuti.
/ * Grundstorleksregeln för att skissera och blockelement på mellanslag * / [class * = "span"] background: #eee; marginal-botten: 10px;
Fasta och flytande layouter har funnits länge. Responsiva layouter är relativt nya och kombinerar de bästa delarna av båda. Det ger designers verktyg för att optimera sina mönster för flera enhetstorlekar (smartphones, tabletter, smala och widescreen-skärmar) utan att behöva behålla en separat kodbas för varje. Ändra storlek på ditt webbläsarfönster för att se Bootstraps svaga stilark i åtgärd och få en känsla för den fantastiska förmågan att skriva en gång och testa trådramar i ett antal miljöer.
Webbläsare använder CSS-brytpunkter för att bestämma hur man gör en sida, baserat på minsta och maximala breddmätningar. Brytpunkter i förhållande till webbläsarens bredd börjar alltid med @media (breddargument) och är mycket lätta att läsa. De kan också innehålla ett andra argument i en annan uppsättning parentes, vilket möjliggör stor flexibilitet för flera enheter.
I kodprovet nedan har jag skapat flera regler som definierar bakgrundsfärger för fyra gemensamma Bootstrap-responsiva brytpunkter, modifierade något för att visa en smidig övergång från en färg till nästa.
/ * Grundläggande bakgrundsfärger för svaga punkter * / / * Max bredd 480px landskapstelefon och ner * / @media (maxbredd: 480px) .container background: # f1ea81; .container: efter innehåll: "Max bredd 480px landskapstelefon och nere"; / * Min bredd 481px och max bredd 767px landskapstelefon till porträtttablett * / @media (minbredd: 481px) och (maxbredd: 767px) .container background: # a7f7e5; .container: efter innehåll: "Minst bredd 481px och max bredd 767px landskaps-telefon till porträttstablett"; / * Min bredd 768px och max bredd 979px porträttstablett till liggande * / @media (minbredd: 768px) och (maxbredd: 979px) .container background: # c4deff; .container: efter innehåll: "Min bredd 768px och max bredd 979px, stående tablett att ligga"; / * Min bredd 980px widescreen display * / @media (minbredd: 980px) och (maxbredd: 1199px) .container background: # fde3ff; .container: efter innehåll: "Min bredd 980px, max bredd 1199px, skrivbordsformat"; / * Min bredd 1200px widescreen-skärm * / @media (minbredd: 1200px) .container background: # ffc4c4; .container: efter innehåll: "Min bredd 1200px, widescreen format";
Vi har byggt en fullständigt responsiv layout, men vi saknar fortfarande de bra sakerna. Resten av denna handledning visar dig hur man lägger till visuellt intresse genom innehåll och interaktivitet.
Nu när ställningen är på plats, kan vi börja lägga till innehåll. Jag håller medvetet på att hålla dessa åsikter generiska grå lådor med minimala stilar uppmuntra beta-användare att fokusera helt på interaktionen och inte bli alltför hängde på den visuella stilen.
Hero-enheten är utformad för att skapa en front-and-center call to action. Kodnedladdningar, nya applikationer eller bryta nyheter är bra kandidater. För vårt ändamål kommer jag att använda den för att tillkännage en stor mjukvaruuppgradering. Ersätt det befintliga h2 och p Taggar i huvudinnehållet bra med koden nedan och uppdatera din webbläsare för att se hjälten i aktion.
Version 2.0 är här!
Alla nya funktioner, många förbättringar
Ett mer perfekt paket dig’Det är inte troligt att hitta
Vårt team har varit upptagen det senaste året, helt nyskapande de inre funktionerna i vår ansökan. Snabbare sidladdningar, bättre sökning och mobilintegration.
Ladda ner nu
Hjältenheten är en bra start, men folk vill se var deras tid och pengar kommer att gå. Ett bildgalleri är en stark uppföljning, och är en snap att implementera. Bilder läggs ut med samma Spann rutnät som definierar layoutblock och kan enkelt utökas till att inkludera rubriker, taggar, bildtexter eller mikrodata. För närvarande använder vi Placehold.it för att generera tre grå lådor under vår hjälteenhet.
Jag är stor troende i semantisk markering, så vi kommer att använda HTML5 figur och figcaption taggar för ökat sammanhang. Även om ingen av dina användare surfar med en skärmsläsare eller annan assistent enhet är beskrivande markering en bra praxis för UX och front-end-utveckling.
Lägg till en oorderad lista och några bilder i huvudinnehållet, under ditt hjälteelement som så:
Detta är en kort bildtext.
Detta är en kort bildtext.
Detta är en kort bildtext.
En annan webbläsareuppdatering ska ge en layout liknande den här, när den visas på widescreen.
Hjälteenheten och bilderna lägger till mycket visuellt intresse, men belyser vår nästa utmaning: Bulletpunktslänkarna står inför ett riktigt navigeringselement.
Bootstrap har flera inbyggda navigeringsstilar, så uppmuntrar experiment. Jag kommer att markera fliknavigering här. Vår första order är att ersätta den grundläggande navigationslistan:
Låt oss sedan ta bort den grå bakgrunden från vår rubrik och nav element. Lägg till följande fyra rader till slutet av din user.css fil.
rubrik [class * = "span"], nav [class * = "span"] bakgrund: #fff;
Vi behöver också uppdatera huvudinnehållet väl. Jag har lagt till en klass av tab-innehåll till sektion element, och inslagna hjälten och bilderna i en div med class = "tab-pan aktiv" och id = "tab1". Jag lade till ytterligare tre div element nedan, med ID: er som matchar navigeringslänkens taggar. Dessa tre kvarter är stubbar som ska fyllas i senare, men kommer att vara användbara för testning. Uppdatera sektion markera och uppdatera webbläsaren. Om allt går rätt borde du kunna byta genom flikarna och visa stubben i innehållet.
Flikar är coola, men de är också bara en början. Även om Internet snabbt blir segmenterat och applikationslikt, drivs det fortfarande av länkar från en resurs till en annan. Länkar används för att koppla samman sidor, ge ytterligare sammanhang, och ibland till husets sekundära funktioner. Verktygstips och popovers är bra exempel på sekundärfunktion; De implementeras enkelt med anpassade datatribut.
Vad är data attribut? Per John Resig, som skrev om dessa enheter, släpptes tillbaka 2008:
Helt enkelt anges i specifikationen för anpassade datatribut att varje attribut som börjar med "data" behandlas som ett lagringsområde för privata data (privat i den meningen att slutanvändaren inte kan se den - det påverkar inte layouten eller presentation).
Det betyder att vi kan lägga till anpassade data till våra länktaggar, och Bootstrap hanterar det i enlighet med detta.
Antag att vårt bildgalleri består av teknisk information. Beskrivningarna kan innehålla terminologi som är oklart för den genomsnittliga användaren. Aktivera verktygstips genom att ersätta bildgalleriet HTML, från och med den oordnade listan och lägga till en jQuery $ (Dokument) .ready funktion och Bootstraps verktygstipsfunktion längst ner på sidan.
Detta är en kort bildtext. Den innehåller några tekniska språk som domänspecifika termer som HTML
Detta är en kort bildtext. Den innehåller några tekniska språk som domänspecifika termer som CSS
Detta är en kort bildtext. Den innehåller några tekniska språk som domänspecifika termer som JS
// Lägg precis ovanför stängningskroppen // Aktivera verktygstipsen
Med HTML och Javascript på plats, uppdatera webbläsaren och rulla över gallerilänkarna för att avslöja dina verktygstips.
Vi ska nu lägga till delning i vårt bildgalleri (åtminstone i en wireframe-y-väg) med popovers. Popovers aktiveras genom att inkludera data-attribut i din markering och ett annat kod av JavaScript.
Låt oss först lägga till en delningsknapp till var och en av våra bildtexter. Lägg till kodblocket strax under den sista styckemärken i varje figcaption.
tumblr
Flickr
"data-title =" Dela den här bilden "> Dela
Det kan tyckas konstigt att sätta varje objekt på egen rad, men jag har funnit att Bootstrap är ganska picky om välformad markup, och det är lättare att upptäcka fel en rad i taget. Vi måste skriva några rader med JavaScript och popoversna är redo.
// Förhindra standardlänkar och sidhoppning var länkar = $ ('a'); links.on ('click', funktion (e) e.preventDefault ();); // Aktivera popovers var popovers = $ ('a.popover-länk'); popovers.popover (); Den här gången har vi lagt till en generell länkfunktion för att förhindra att vår skärm hoppar när användare klickar på Share-knappen. Utan att fördjupa för långt in i specifika händelser registrerar varje åtgärd på en webbsida en händelse, som vi fångar här som funktionsargumentet 'e'. Genom att avlyssna denna händelse och ersätta den med vår anpassade JavaScript, blir sidan kvar där den borde och vår popover visas som förväntat.
Puh. Efter allt kommer modala fönster att vara en cakewalk. Bootstrap gör modala fönster tillgängliga genom att lägga till ett block med HTML till toppen av din behållare och en knapp eller länk med ett href som matchar det modala fönster-ID. Först den modala HTML.
Den enda andra sak att göra är att lägga till vår trigger. Eftersom det här är en ansökan, skulle vi ha rätt att anta att det kommer att finnas en inloggningssekvens. Jag har ändrat rubrik förkorta bannerområdet och lägg till vår inloggningsknapp bredvid sökrutan. Ändra följande HTML, och lägg till CSS i slutet av din user.css fil.
Min fantastiska App
Logga in
/ * Sökrutan * / rubrikinmatning margin-top: 20px; bredd: 70%; flyta till vänster; / * Inloggningsknapp * / header a float: right; marginal: 20px 0 0 20px;
Uppdatera och klicka på knappen Logga in. Du bör belönas med en snabb animation och det modala fönstret som presenterar fram och mitt.
Den här interaktiva trådramen följer snyggt ut. Vi har en navigering som fungerar, många block för att lägga till innehåll, interaktivitet och en responsiv layout. Det vi inte har är ett sätt att leta efter saker, även i användarprovning. Återigen har Bootstrap oss täckt.
Användare är vana vid att sökrutan visas framträdande i det övre högra hörnet av skrivbordsbilder, och precis under rubriken på smalare skärmar. Vi börjar med att bryta rubrik element i två kvarter och lägger till en enda ingång till mindre:
Min fantastiska App
Vi lägger också till några rader av CSS till user.css fil, för att trycka på sökrutan högst upp på sidan.
/ * Sökrutan * / rubrikinmatning margin-top: 20px; bredd: 90%;
Vi kommer också att skriva en något större mängd JavaScript för att göra typsnittet korrekt. Jag kommer att hålla det till ett minimum och förklara vad varje skript gör.
Jag föreställer mig att några av er tänker "Jag är en webben designer, inte en utvecklare. Fair point, men vi måste åtminstone testa JavaScript-vatten för att låsa upp Bootstraps fulla kraft. Och förutom: Klienter är wowed när en inmatningsbox börjar återkomma resultat från första bokstaven de skriver.
Lägg till JavaScript-snippet nedan till din befintliga skriptikett och klicka på Uppdatera. Om det fungerar korrekt bör du se en rullgardinsmeny med förslag till resultat efter att du har skrivit en eller flera bokstäver i sökrutan.
var search = $ ('input # search'); $ (sök) .typeahead (source: ['Dave Mustaine', 'Tom Morello', 'Jim Root', 'Kirk Hammett', 'Joe Perry', 'Jimi Hendrix', 'Eric Clapton', 'Billy Duffy' , 'Johnny Hickman', 'Eddie Van Halen', 'Dimebag Darrell', 'Noel Gallagher'], föremål: 5); Okej, här är vad koden gör. De var search = $ ('input # search') berättar jQuery att lagra en referens till sökrutan i den angivna variabeln Sök. Då ringer vi till eller aktiverar jQuery-funktionen i vår sökvariabel, och kallar även typsnittet Bootstrap-typ. Inuti typhalsparentesen kommer du att märka en öppnings- och stängningsplatta . Dessa parentes används för att skapa ett JavaScript-objekt och lagra lite information om vår sökruta.
Den första informationen är källa array. Vid dess enklaste är en array en ordnad lista över saker. Här är det en lista med gitarrspelare. Varje gitarr som läggs till i matrisen kommer att finnas tillgänglig som resultat i vår sökinmatning. Den andra delen av objektet, objekt: 5 berättar i sökrutan det maximala antalet resultat som ska visas.
Dessa är bara två av flera alternativ tillgängliga. Jag uppmanar dig att titta på dokumentationen för typsnittet Bootstrap och experimentera med olika konfigurationer. Slutskärmen för detta steg ska likna detta:
Bootstrap har blivit en häftning i mitt arbetsflöde. Det gör det möjligt för mig att testa när iterationer är relativt smärtfria och försöka flera olika tillvägagångssätt samtidigt. Dessa upptäckter bidrar till att styra slutliga designbeslut och hjälpa till att undvika tidskrävande förändringar under hela utvecklingscykeln. Genom att behandla trådramar som en kritisk del av användarupplevelsen kan jag bygga verktyg som känns mer naturliga och mer glädjande.
Jag har bara repat ytan på Bootstrap, och vad som är möjligt med hjälp av sitt kit av delar. Wireframes är ett bra ställe att börja lära ins och outs-de är tänkt att vara lo-fi, tidiga testmodeller av fulla applikationer att komma. Kunder och kollegor kan testa våra antaganden och hjälpa oss att förfina snabbt, med minimal tid förlorad.
Jag hoppas att du gillade den här handledningen, tack för att du läste!
