Stepping Out Med Bootstrap från Twitter

Twitter introducerade Bootstrap nyligen, ett bibliotek av CSS-format riktat till webbapputvecklare som behöver lite designhjälp. Verktygssetet innehåller allt från gallerinställningar ner till knappar och modaler, och fungerar på ganska mycket alla moderna webbläsare, hela vägen tillbaka till IE7.

Låt oss se vad vi kan göra med det?

Bootstrap förbättras också genom den mindre preprocessorn, som lägger till några ytterligare anledningar att använda Bootstrap, även om vi utesluter den mindre funktionen från omfattningen av detta handledning, för att hålla det enkelt.

Bootstrap innehåller lite dokumentation, men ingenstans förklarar det egentligen hur man använder verktyget (istället finns det bara en stor demoversida för att undersöka dig själv). Så, i den här artikeln kommer vi att ta bort Bootstraps exempelsida och analysera hur du replikerar de element som Bootstrap täcker. När vi tillhandahåller exempel bygger vi också upp en webbsida som helt och hållet är uppbyggd med Bootstrap.

Vad är täckt?

Vi ska ta en titt på följande (använd länkarna för att hoppa över till de olika delarna):

Grid-systemet
Typografi
tabeller
Blanketter och knappar
Navigering
Flikar och piller
Paginering
Varningar och felmeddelanden
modals

Grid-systemet

Grids är en integrerad del av många webbdesigner. Precis som en stadsplanerare designar på ett rutnät, kan en webbdesigner också anpassa sina element på ett sådant sätt. Bootstrap innehåller ett rutsystem som uppgår till 940px i bredd, inneslutet inuti behållare klass. Det finns sexton olika kolumnklasser ihop, med bredden på var och en som kumulativt lägger till 60px när antalet ökar, från 40px. Till exempel har span1-klassen en bredd på 40px, medan span3-klassen har en bredd på 160px.

Som framgår av bilden ovan kan vi använda en kombination av olika klasser för att skapa en total bredd som motsvarar 940px, inklusive 20px-marginalen som tillagd till var och en. Till exempel användningen av fyra div.span4 klasser skulle översättas, menar 220 + 20 + 220 + 20 + 220 + 20 + 220 som, när vi piskar ut räknaren, motsvarar en full 940 pixlar. Genom att omsluta alla dessa i a rad klass, Bootstrap konton för tjugo pixel marginalen i den sista kolumnen genom att flytta hela saken tjugo pixlar tillbaka.

   Kolumn nr 1
 Innehåll för kolumn 1.
 
  Kolumn nr 2
 Innehåll för kolumn 2.
 
  Kolumn nr 3
 Innehåll för kolumn 3.

Ovanstående kod kommer att generera en ganska lika uppsättning CSS-kolumner som visar lite minimalt innehåll. Naturligtvis kan vi bara byta runt några av dessa klasser eller lägga till / subtrahera taggar för att skapa olika layouter. En annan egenskap hos Bootstrap-verktygssatsen är möjligheten att "hoppa över" en kolumn genom att kompensera den. Förskjutningsklasserna är återigen numrerade 1-16 där deras bredder följer samma +60-mönster, även om de nu innehåller ytterligare 40px för att kompensera för vänster och höger marginal på kolonnen. Till exempel kan vi ta ovanstående exempel, men ta bort mellanskolonnen genom att lägga till offset5 klass till slutet taggen. Till exempel:

   Kolumn nr 1
 Innehåll för kolumn 1.
 
  Kolumn nr 3
 Innehåll för kolumn 3.

Det är ganska enkelt att manipulera detta med endast ett fåtal tal som behöver ändras, och bilden i början av det här avsnittet ska användas som en guide för några rekommenderade strukturer.

Typografi

En av de saker som går igenom ganska mycket alla element som visas i denna handledning är typografi. Bootstrap kommer med alla typografi taggar du vill ha stil för, allt från en

tagga till

och hela rubrikhierarkin. Ärligt talat är detta "Web Development 101" saker som du förmodligen redan vet, så jag slösa inte din tid för att förklara hur man stilar. Det är ganska elementära saker.

Det är viktigt att notera att Bootstrap tar hänsyn till äldre, nuförkortade taggar, så du bör inte oroa dig om du använder ett CMS som använder dem eller för en klient som inte vet något alternativ.

citerar

Var Bootstrap behöver lite mer förklarande är när du kommer att använda

märka. Du kan använda taggen på egen hand för att visa citatet indragna, med en tjock gräns till vänster. Det kan dock förbättras genom att näsa andra taggar inuti för att ange citatet. När det gäller att lägga till ett attribut klickar du bara på din citattext i en
taggen och källan i a tagg och Bootstrap kommer automatiskt att stile och sätta en streck framför källan.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ställer upp en tidigare väntningsfras.
Connor Turnbull, 30 augusti

Du kommer att sluta med ett resultat som liknar bilden nedan, beroende på vilket innehåll du lägger in mellan stycket och små taggar.

listor

Listor är en annan typ av typografi spektrum som är täckt i Bootstrap, och levereras med fyra olika uppsättningar av stilar: punktlistor, inbyggda punktlistor, beställda listor och ordlistor. Återigen är det inte så svårt att använda som de inte avviker från vad som är standard i HTML. Eftersom listor kan konstrueras på olika sätt, här är en snabb sammanfattning av hur man använder dem med Bootstrap-stilar.

Koden nedan är en grundläggande oorderad punktlista som kommer att ge något som liknar det första exemplet i bilden nedan. Byt ut ul för en ol att producera en beställd lista, som i det andra exemplet.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit
?

Om du lägger till unstyled klassen till den oordnade listan, kommer inte obelastade listobjekt att vara punktljusade eller beställda. De kommer bara att se ut som vanliga linjer, medan nestade objekt kommer att ha en kula till vänster.

Lorem ipsum dolor sit amet

Consectetur adipiscing elit
?

Lägga till en beskrivningslista görs på samma sätt som du förväntar dig utanför Bootstrap, och resulterar i ett prov som det sista i bilden ovan.

Lorem ipsum

Lorem ipsum dolor sit amet

Consectetur

Consectetur adipiscing elit
?

tabeller

Bootstrap är en verktygslåda som delvis syftar till nya webbdesigners, så det betyder inte nödvändigtvis att dessa saker inte är avsedda för layouter. Istället är tabeller avsedda för tabelldata, och Bootstrap gör ett ganska bra jobb för att förse dina tabulära data med sina stilar utan att behöva några ytterligare klasser eller attribut. Till exempel kan vi titta på en vanlig HTML-kod som skulle generera ett bord.

# Förnamn Efternamn Språk

1 Några Ett engelsk

2 Joe Sexpack engelsk

3 stu Buckla Koda

Koden ovan skapar tabellen i bilden nedan, som används i Twitters officiella exempel. Den har tre innehållsrader och en rubrik i fyra kolumner, och är ganska standard. Med liten manipulering (skrapa det, ingen manipulation) till standard skapandet av ett bord, använder Bootstrap automatiskt sina stilar.

I det här fallet är det viktigaste att komma ihåg är att korrekt näsa dina taggar. Stilarna gäller inte om du inte sätter in din rubrikrad i en tagg, till exempel.

Som standard är tabellen inte sebra-randig, där alternativa färger kan fylla bakgrunden på varje rad. Det här är enkelt att aktivera, men helt enkelt genom att lägga till zebra-striped klass till
tagg utan manipulation av raderna eller enskilda delar.

?
Slutligen, med tillägg av en liten del jQuery, men ingen ändring till HTML bortsett från att lägga till sortTableExample som ID av

#
tagg kan du lägga till sorteringsfunktionalitet när rubriken på en kolumn klickas på. Denna funktion kräver Tablesorter 2.0 jQuery-plugin, som kan laddas ner gratis. Som du förmodligen redan gissat behöver du också ringa jQuery för att detta ska fungera.

?
Blanketter och knappar
De flesta av de saker vi redan har täckt är ganska enkla, där Bootstrap kommer att tillämpa stilar på din kod med liten eller ingen ändring från normal. Att få det ur vägen kan vi nu flytta på några saker som kräver lite mer förklarande och lite mer handledning.
formulär
För formulär finns det många olika stilar du kan använda, så vi ska titta på var och en individuellt. Du kan då bara använda dessa i kombination med varandra och manipulera dem med existerande kunskaper om vanliga gamla HTML-formulär.
För det första bör det noteras att hela din form ska vara inslagna i en taggar, men du vet förmodligen redan det. Bootstrap rekommenderar också att du sätter in dina element i
taggar, med ytterligare ett märka.

Lorem ipsum dolor sit amet (dina fält går här)

Vanligtvis bör din formuppsättning inte skilja sig från koden ovan. Det enda andra alternativet som Bootstrap tillhandahåller är att välja staplade formulär, där etiketterna ligger högst upp i ett fält snarare än till vänster. Det kan uppnås genom att lägga till form staplade klass till märka.

Textinmatning

För att sparka ut vår täckning av formulärfält ser vi på ett vanligt inmatningsfält med en etikett. Koddelen nedan är väsentligen a och en tagg, inslagna i a
tagga med clearfix klass för att säkerställa korrekt avstånd. Dessutom är det aktuella fältet inslaget i en annan
med inmatning klass igen, för att säkerställa korrekt avstånd.

Lorem ipsum

För den här handledningens skull kommer jag att ignorera några metoder som ska användas i din kod. Till exempel bör varje ingång ha ett ID, som är bundet till etiketten genom att "för" -attributet, och i allmänhet vill du namnge dina inmatningsfält för att fånga dem när det gäller att behandla dina data. Vi tittar specifikt på hur du använder Bootstraps stilar här, så att dessa typer av attribut inte har inkluderats i mina exempel för att försöka hålla saker så enkla som möjligt. Men trots att de används tillsammans med Bootstrap bör dessa uppgifter inte glömmas bort.

Genom att lägga till extra stor klass till , formfältet utökas.

Vi kan inaktivera en inmatning på vanligt sätt, genom att lägga till lämpliga attribut, vilket visas i exemplet nedan. Bootstraps stilar läggs till i Inaktiverad klass, som bör läggas till för att visuellt visa att en användare inte kan interagera med det fältet genom att gräva ut det.

Lorem ipsum

Medan den gråtonade tillvägagångssättet för ett funktionshindrat fält uppnås genom att använda en tagg, en oåtkomlig en är inte. Istället använder Bootstrap en enkel som kan användas i samband med en dold ingång. Dessa fält används för information som användaren inte ska redigera, till exempel ett automatiskt samlat datum eller IP-adress.

Lorem ipsum
Lorem ipsum dolor sit amet

Vår sista titt på styling textinmatningar är att visa kontextuell hjälp när ett fel uppstår. Det görs genom att lägga till en fel klass till
som utgör clearfixen, och till tagga sig själv. Lägga till en tagga med help-inline klassen nedan lägger till hjälpmeddelandet på höger sida.

Lorem ipsum
Dolor sit amet

Dropdown Select

En rullgardinsmeny är strukturerad på liknande sätt, med den vanliga koden som används, som visas nedan.

Lorem Ipsum

De extra stor klass till ett textfält är motsatsen till medium klass till a Lorem ipsum dolor sit amet

Den koden skapar en enda kryssruta med en etikett till höger. För att skapa en extra, bara repetera listobjektet och dess innehåll, sedan voil?, Du har en lista över kryssrutor. För att inaktivera en kryssruta, lägg bara till Inaktiverad attribut till taggen och Inaktiverad klass till märka. Lorem ipsum dolor sit amet Dessutom finns det två extra typer av kryssrutor som är parade med textfält: kryssrutor i förväg och bifogade. Återigen är det ganska självförklarande och ligner mycket på ett vanligt textfält. Men den här gången måste du lägga i kryssrutan i en tagg (med tillägg klass), och antingen input-prepend eller den input-append klass till förälder . Då är allt som finns kvar att se till att du sätter etiketten och fältet på rätt sätt runt, beroende på om du vill att den ska läggas upp eller bifogas. Lorem ipsum Ovanstående kod är för en bifogad kryssruta, men om du vill ha en prepended, finns det lite att ändra. Lorem ipsum Filinmatningar Filinmatningar är väldigt mycket som textfält och koden nedan är ganska självförklarande. Skapa en vanlig filinmatning med indatafil klass. Lorem ipsum Textområden Den slutliga Bootstrap-stilen för formulär är textområdet. Textområdet skapas på samma sätt som textfältet med en rad. Liksom att förstora ett textfält, har textområdet också sin egen klass för att göra det bredare, XXLarge. Lorem ipsum Eventuellt kan du lägga till en liten hjälprad under fältet med följande rad läggas direkt efter </code> märka.</p> <pre><span>Lorem ipsum dolor sit amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Knappar</h3> <p>Nu är det dags att bearbeta vår form, och normalt gör vi det genom att klicka på en knapp. Lyckligtvis omfattar Bootstrap knappar och de är super enkla att lägga till.</p> <p>Knappar kan läggas till genom antingen en <code><a></code> eller a <code><button></code> märka. Båda delar samma klasser och kommer att se identiska ut, men du bör försöka boka knappar för åtgärder och länkar till, bra länkar. Så, till exempel, skulle en knapp skrivas som så:</p> <pre><button>Lorem ipsum</button></pre> <p>Och en identisk knapp, men skapad som en länk, skulle skrivas som så:</p> <pre>Lorem ipsum</pre> <p>Som standard visas knappen i ljusgrå stil. Detta kan dock enkelt ändras till en av de fyra andra (ljusblå, blå, grön och röd) genom att använda en ytterligare klass.</p> <ul> <li> <code>primär</code> för en blå knapp som är den primära åtgärden (t ex att skicka en blankett)</li> <li> <code>info</code> för en ljusare blå knapp, brukar användas för att få tillgång till information</li> <li> <code>Framgång</code> för en grön knapp, brukade signalera framgång</li> <li> <code>fara</code> för en röd knapp, brukar användas för irreversibla eller farliga åtgärder som att ta bort</li> </ul> <pre><button>Primär</button> <button>Standard</button> <button>Info</button> <button>Framgång</button> <button>Fara</button></pre> <p>Vi kan också ändra storleken på en knapp från standardvärdet. För att förstora det, lägg bara till <code>stor</code> klass eller krympa den med (yep, gissade du det) <code>små</code> klass.</p> <p>Slutligen, för att inaktivera en knapp är allt vi behöver göra att lägga till <code>Inaktiverad</code> klass och, när det gäller en åtgärdsknapp, ställa in inaktiverad attribut.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>eller</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navigering</h2> <p>Bootstrap innehåller en fast navigeringsfält som liknar den på Twitter hemsida. Stången består huvudsakligen av tre sektioner, titelförbindelsen, menyalternativen i sökfältet, inneslutna i ett par <code><div></code> taggar som inte är värda att förklara.</p> <p>I koden nedan kommer du att märka en <code><h3></code> tagg som innehar titeln. Det är ganska enkelt att ändra detta och att lägga till din egen länk och text.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Därefter är menyalternativen, som bara är oklassificerade listobjekt med länkar. Det är enkelt att kopiera dessa objekt eftersom de inte kräver några Bootstrap-specifika stilar, förutom den <code>aktiva</code> klass på den aktuella länken.</p> <pre><ul> <li>Hem</li> <li>lorem</li> <li>ipsum</li> <li>dolor</li> </ul></pre> <p>Den sista listan är för rullgardinsmenyn. Den har ett enda listobjekt, med en annan, nestad lista som visas på svängaren över. Den tredje raden av koden nedan är listobjektet som ständigt visas i navigeringsfältet, medan listan som börjar vid rad 4 är svängningsobjekten.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor sitt</li> <li>Amet Consequeter</li> <li>Nog med latin</li> </ul> </li> </ul></pre> <p>Som du märker lägger du till ett tomt listobjekt med <code>delare</code> klassen lägger till en delare i rullgardinsmenyn.</p> <p>I bruk bör din toppradius se ut så här, placerad högst uppe på din sida.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Hem</li> <li>Handledningar</li> <li>artiklar</li> <li>Veckopollar</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor sitt</li> <li>Amet Consequeter</li> <li>Nog med latin</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Observera att du kommer att vilja kompensera för barens 40-pixlar höjd överst på sidan, annars överlappar de första elementen på din sida.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Flikar och piller</h2> <p>Tabs och piller är galen lätt att skapa, eftersom de bara är vanliga gamla listor. Självklart fungerar de inte - Bootstrap handlar om stilar. Konstruera bara din lista med <code>flikar</code> klass för flikgränssnittet eller den <code>piller</code> klass för piller flikar. Liksom i navigeringsfältet i föregående avsnitt, lägger du till <code>aktiva</code> klassen till en listobjekt markerar den.</p> <p>För flikomkopplaren, använd något liknande det här:</p> <pre><ul> <li>lorem</li> <li>ipsum</li> <li>dolor</li> <li>Sitta</li> <li>Amet</li> </ul></pre> <p>För att använda piller istället, byt ut topplinjen för följande.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Paginering</h2> <p>Vi flyttar nu till paginering, som är funktionslös (som flikar och piller), men är fortfarande stylad i Bootstrap. Bootstrap hanterar paginationsknappar samma flikar, i en lista som denna tid är inslagna i a <code><div></code> med <code>paginering</code> klass. Varje listobjekt kan ha ett länkat nummer i det (eller en ellips), förutom de första och sista objekten som är reserverade för tidigare / nästa länkar. Dessa har <code>prev</code> och <code>Nästa</code> klasser.</p> <p>Dessutom kan någon knapp avaktiveras genom att lägga till <code>Inaktiverad</code> klassen och den aktiva länken är markerad med <code>aktiva</code> klass. Såhär:</p> <pre><div> <ul> <li>Föregående</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Nästa</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Varningar och felmeddelanden</h2> <p>Varningsstängerna är visuellt väldigt lik knappar, även om de är konstruerade annorlunda. Varje felmeddelande är a <code><div></code> tagga med <code>alert-meddelande</code> klass. Det finns fyra olika typer av meddelanden, var och en med en motsvarande klass som också måste läggas till:</p> <ul> <li> <code>varning</code> för en gul bar</li> <li> <code>fel</code> för en röd bar</li> <li> <code>Framgång</code> för en grön bar</li> <li> <code>info</code> för en blå bar</li> </ul> <p>Varningsmeddelanden skrivs sedan på följande sätt och väljer endast en klass från <code>varning / fel / framgång / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Bara för din information lägger den andra raden av koden ovan till "?" till höger om alter-meddelandet, som kan kopplas till en åtgärd som tar bort meddelandet.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Varningar behöver inte vara en enstaka affär heller. Om ditt meddelande sträcker sig bortom en enda rad, lägg bara till <code>block meddelande</code> klass till koden du skulle använda för en enda rad, medan du fortfarande använder de olika typklassen.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Dessa meddelanden kan också hålla knappar, användbara om varningen måste lösas med ett val. Om du tittar tillbaka till vårt avsnitt på knappar, vet du hur du lägger till dem. Var noga med att använda de små versionerna, genom att lägga till <code>små</code> klass till knappen själv, och linda den i a <code><div></code> tagga med <code>alert-åtgärder</code> klass.</p> <pre><div> × <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor Sit amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>modals</h2> <p>Modeller kan vara användbara för att visa information i vissa scenarier, vanligtvis används för inmatning av data som användarinformation eller inlägg. Bootstraps modala är ganska enkel och är uppdelad i tre sektioner; rubriken, kroppen och sidfoten. Först börjar vi med att öppna modals <code><div></code> tagg och positionera den med några in-line-stilar som Bootstrap kräver.</p> <pre><div></pre> <p>Inuti den taggen placerar vi de tre sektionerna, den första är huvudet. Rubriken har en klass av <code>modal-header</code> och innehåller bara två linjer, en <code><h3></code> tagg för titeln och den (valfria) länken "?" som kan anpassas för att stänga popover.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Nästa upp har vi huvudkroppen av innehållet. Det är väldigt enkelt att vara bara en <code><div></code> med <code>modal-kropp</code> klass och ditt innehåll inuti. Som så:</p> <pre><div> <p>Lorem ipsum dolor sit amet</p> </div></pre> <p>Slutligen har vi den modala sidfoten (en annan <code><div></code>, den här gången med <code>modal-footer</code> klass) som i allmänhet består av knappar för att vidta åtgärder från. Dessa genereras på exakt samma sätt som alla andra knappar som vi har skapat med Bootstrap, så de behöver ingen ytterligare förklaringar.</p> <pre><div> Lorem ipsum dolor Sit Amet </div></pre> <p>Okej, jag ljög. Det var inte det sista steget. Vi behöver fortfarande stänga originalet <code><div></code>.</p> <pre></div></pre> <p>Sätt alla dessa delar tillsammans som ett, och du får ett ganska sött modalfönster. Tyvärr, när jag minns dig, hanterar Bootstrap bokstavligen bokstaven här. Modal kommer inte att se ut som om den är poppad över. Det skulle vara fantastiskt om Bootstrap utvidgas för att ha lite funktionalitet utöver CSS, men för tillfället måste du generera eller skaffa din egen.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Slutgiltiga tankar</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>Bilden ovan visar vår slutliga design. Den består av alla de element som vi har skapat i denna handledning (det finns en separat demo för formulärelementen), helt inom ramen för Bootstrap. Förhoppningsvis har den här artikeln varit till nytta för dig, särskilt eftersom det kan vara svårt för någon att dechiffrera den inkluderade exempelsidan (som fungerar som den enda dokumentationen som ingår i nedladdningen).</p> <p>Jag älskar Bootstrap. Om du är ny för webbutveckling, erbjuder den ett stort antal element att använda, även om din webbplats kanske slutar se lite för Twitter-ish genom många delade element. Ändå är enkelheten och användarvänligheten för svår att ignorera om du inte vill / kan inte skriva din egen. Jag kan inte vänta med att försöka använda några av dessa saker i ett nytt projekt.</p> <hr> <h3>Ytterligare resurser</h3> <p>Använda mindre CSS, BluePrint och WP för en snabbare Workflow Wptuts+<br>Snabbtips: Skriv aldrig ett försäljningsprefix igen+<br>Bootstrap från Twitter är en ny webbdesigners Dream Web AppStorm<br>Bootstrap Templates på ThemeForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Webbdesign</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Åtgärder för att bli en kvalitetsutvecklare av WordPress Theme</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Stepping Into Fashion Photography Industry</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Căutare..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#