og hele overskriften hierarki. Ærlig talt, dette er "Web Development 101" ting som du sikkert allerede vet, så jeg vil ikke kaste bort tiden din forklarer hvordan du skal stilere. Det er ganske elementære ting.

Det er viktig å merke seg at Bootstrap tar hensyn til eldre, nå utdaterte koder, så du bør ikke bekymre deg der hvis du bruker et CMS som bruker dem, eller for en klient som ikke vet noe alternativ.

siterer

Hvor Bootstrap trenger litt mer forklarer er når du kommer til å bruke

stikkord. Du kan bruke taggen på egen hånd for å vise sitatet innrykket, med en tykk grå kant til venstre. Det kan imidlertid forbedres ved å nesting andre merker inne for å attributtere sitatet. Når det gjelder å legge til et attributt, kan du bare legge inn sitatteksten i en

tag og kilden i a tag og Bootstrap vil automatisk stil og sette en dash foran kilden.

 
Kjæresten er dum og sitter, og er en avgjørende forfatter. Helt helhetlig er det en god måte å oppnå alt du trenger.
 Connor Turnbull, 30. august 

Du vil ende opp med et resultat som ligner på bildet nedenfor, avhengig av hvilket innhold du legger inn mellom avsnittet og små koder.

lister

Lister er en annen del av typografispektret som er dekket i Bootstrap, og leveres med fire forskjellige sett med stiler: punktliste, nestede punktlister, bestilte lister og ordlister. Igjen, det er ikke så vanskelig å bruke som de ikke avviker fra det som er standard i HTML. Fordi lister kan bygges på forskjellige måter, er det en rask gjennomgang av hvordan du bruker dem med Bootstrap-stilene.

Koden nedenfor er en grunnleggende uordnet, punktliste-liste som vil produsere noe som ligner på det første eksemplet i bildet nedenfor. Bytt ut ul for en ol å produsere en bestilt liste, slik som i det andre eksemplet.

 
Det er ikke noe problem
 
Consectetur adipiscing elit
? 

Hvis du legger til unstyled klasse til den uordnede listen, vil ikke-nestede listeposter være punktliste eller bestilles. De vil bare vises som vanlige linjer, mens nestede gjenstander vil ha en kule til venstre.

 
Det er ikke noe problem
 
Consectetur adipiscing elit
? 

Legge til en beskrivelsesliste er gjort på samme måte som du forventer utenfor Bootstrap, og resulterer i et eksempel som det siste i bildet ovenfor.

 
Lorem ipsum
 
Det er ikke noe problem
 
consectetur
 
Consectetur adipiscing elit
? 

---

tabeller

Bootstrap er en verktøykasse som er rettet mot nye webdesignere, så det betyr ikke nødvendigvis at disse tingene ikke er ment for layouter. I stedet er tabeller ment for tabelldata, og Bootstrap gjør en ganske god jobb for å forskjønne tabelldataene dine med stilene, uten at det trenger noen ekstra klasser eller attributter. For eksempel kan vi se på en vanlig HTML-kode som vil generere et bord.

 
 
 
#
 
Fornavn
 
Etternavn
 
Språk
 
 
 
 
 
1
 
Noen
 
En
 
Engelsk
 
 
 
2
 
Joe
 
Sixpack
 
Engelsk
 
 
 
3
 
Stu
 
Bulk
 
Kode
 
 
 

Koden ovenfor lager tabellen i bildet nedenfor, som brukt i Twitters offisielle eksempel. Den har tre innholdsrader og en overskrift i fire kolonner, og er ganske standard. Med liten manipulasjon (skrap det, ingen manipulering) til standardopprettelsen av et bord, bruker Bootstrap automatisk stilene sine.

I dette tilfellet er det viktigste å huske å korrekt neste kodene dine. Stilene gjelder ikke hvis du ikke bryter overskriften rad i a tag, for eksempel.

Tabellen er som standard ikke sebra-stripet, der alternative farger kan fylle bakgrunnen til hver rad. Dette er enkelt å aktivere, ganske enkelt ved å legge til sebra-stripet klasse til

tag uten manipulering av rader eller individuelle deler.

?

Til slutt, med tillegg av et lite stykke jQuery, men ingen endring i HTML bortsett fra å legge til sortTableExample som ID av

#

tag, kan du legge til sorteringsfunksjonalitet når overskriften til en kolonne klikkes på. Denne funksjonaliteten krever Tablesorter 2.0 jQuery-plugin, som kan lastes ned gratis. Som du sikkert har antatt, må du også ringe til jQuery for at dette skal fungere.

?

---

Skjemaer og knapper

De fleste av de tingene vi allerede har dekket, er ganske enkle, hvor Bootstrap vil bruke stiler til koden din med liten eller ingen endring fra normal. Å få det ut av veien, kan nå flytte på noen ting som krever litt mer forklaring og litt mer veiledning.

skjemaer

For skjemaer er det mange forskjellige stiler du kan bruke, så vi skal se på hver enkelt enkeltvis. Du kan da bare bruke disse i kombinasjon med hverandre, og manipulere dem med eksisterende eksisterende kunnskaper om vanlige gamle HTML-skjemaer.

For det første skal det bemerkes at hele skjemaet ditt skal pakkes inn i en

tag, men det vet du sikkert allerede. Bootstrap anbefaler også deg å pakke inn elementene dine

koder, med en ekstra

stikkord.

 
 
Det er ikke noe problem
 (feltene dine går her) 
 

Vanligvis bør skjemaoppsettet ikke avvike fra koden ovenfor. Det eneste andre alternativet som Bootstrap gir, er å velge stablede skjemaer, der etikettene ligger øverst i et felt, i stedet for til venstre. Det kan oppnås ved å legge til form stablet klasse til

stikkord.

Tekstinngang

For å slå av vår dekning av skjemafelter, ser vi på et vanlig inntastingsfelt med en etikett. Kodestykket nedenfor er i hovedsak a og en tag, pakket inn i a

tag med clearfix klasse for å sikre riktig avstand. I tillegg er det aktuelle feltet innpakket i en annen

med inngang klassen igjen for å sikre riktig avstand.

 Lorem ipsum 
  
 

For denne opplæringen skyldes jeg å ignorere noen praksiser som burde være ansatt i koden din. For eksempel skal hvert innspill ha en ID, som er bundet til etiketten gjennom "for" -attributtet, og du vil generelt gi navn til inntastingsfeltene for å ta dem når det gjelder å behandle dataene dine. Vi ser spesifikt på hvordan du bruker Bootstraps stiler her, så disse typene attributter er ikke inkludert i eksemplene mine for å prøve å holde ting så enkle som mulig. Likevel, selv om de blir brukt i forbindelse med Bootstrap, må disse oppgavene ikke glemmes.

Ved å legge til XLarge klasse til , formfeltet er utvidet.

Vi kan deaktivere et innspill på vanlig måte, ved å legge til de aktuelle attributter, som vist i eksemplet nedenfor. Bootstraps stiler legges til i funksjonshemmet klassen, som skal legges for å visuelt vise at en bruker ikke kan samhandle med det feltet ved å gråte det ut.

 Lorem ipsum 
  
 

Mens den gråtonede tilnærmingen til et deaktivert felt oppnås ved å bruke en tag, en uneditable en er ikke. I stedet bruker Bootstrap en enkel som kan brukes sammen med en skjult inngang. Disse feltene brukes til informasjon som brukeren ikke bør redigere, for eksempel en automatisk innsamlet dato eller IP-adresse.

 Lorem ipsum 
 Det er ikke noe problem  
 

Vår siste titt på styling tekstinnganger er å vise kontekstuell hjelp når det oppdages en feil. Det gjøres ved å legge til en feil klasse til

som danner clearfixet, og til tag seg selv. Legge til en tag med help-inline Klassen under legger til hjelpemeddelelsen på høyre side.

 Lorem ipsum 
  Dolor sitt amet 
 

Dropdown Velg

En rullegardinmeny er strukturert på en lignende måte, med den vanlige koden som brukes, som vist nedenfor.

 Lorem Ipsum 
  Lorem ipsum dolor sitte Amet  
 

De XLarge Klassen til et tekstfelt er motsatt av medium klasse til a stikkord. Hvis du legger til en slik klasse i rullegardinmenyen med alternativer, vil feltet faktisk bli smalere.

boksene

Avkrysningsboksene er ikke veldig stilige i Bootstrap. Verktøysettet ordner seg bare til å sitte i tråd med de andre feltene, og gjør det ved å lage en liste med hvert avkrysningselement. Koden er ganske selvforklarende, bare vær sikker på å pakke inn både etikettteksten og avmerkingsboksen i merk så at (a) avkrysningsruten er floated til venstre og (b) avmerkingsboksen kan velges ved å klikke på etiketten.

 Lorem ipsum 
 
 
  

Det er ikke noe problem

Denne koden vil generere en enkelt boks med en etikett til høyre. For å opprette en ekstra, bare gjenta listeposten og dens innhold, deretter voil?, Du har en liste over avmerkingsbokser.

Hvis du vil deaktivere en avkrysningsboks, legger du ganske enkelt til funksjonshemmet attributt til tag, og funksjonshemmet klasse til stikkord.

   Det er ikke noe problem  

I tillegg er det to ekstra typer av avmerkingsbokser som er parret med tekstfelter: forhåndsdefinerte og vedlagte boksene. Igjen, dette er ganske selvforklarende og ligner veldig på et vanlig tekstfelt. Men denne gangen må du pakke av i en boks tag (med tillegg klasse), og enten Inngang-foranstilt eller inngang tilføying klasse til foreldre

. Deretter er alt som er igjen å sørge for at du setter etiketten og feltet på riktig vei rundt, avhengig av om du vil at den blir lagt opp eller lagt til.

 Lorem ipsum 
   
 

Ovennevnte kode er for en vedlagt boks, men hvis du vil ha en prepended, er det lite å endre.

 Lorem ipsum 
   
 

Filinnganger

Filinnganger er veldig mye som tekstfelter, og koden under er ganske selvforklarende. Lag en vanlig filinngang med Inngang-file klasse.

 Lorem ipsum 
  
 

Tekstområder

Den endelige Bootstrap-stilen for skjemaer er tekstområdet. Tekstområdet er opprettet på samme måte som tekstlinjen for enkeltlinje. Som å forstørre et tekstfelt, har tekstområdet også sin egen klasse for å gjøre det bredere, XXLarge.

 Lorem ipsum 
  
 

Eventuelt kan du legge til en liten hjelpelinje under feltet med følgende linje lagt til umiddelbart etter </code> stikkord.</p> <pre><span>Det er ikke noe problem</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>knapper</h3> <p>Nå er det på tide å behandle vårt skjema, og normalt gjør vi det ved å klikke på en knapp. Heldigvis, Bootstrap dekker knapper og de er super enkle å legge til.</p> <p>Knapper kan legges gjennom enten en <code><a></code> eller a <code><button></code> stikkord. Begge deler de samme klassene og vil se identisk ut, men du bør prøve og reservere knapper for handlinger, og lenker til, vel, linker. Så, for eksempel, ville en knapp bli skrevet som:</p> <pre><button>Lorem ipsum</button></pre> <p>Og en identisk knapp, men opprettet som en lenke, vil bli skrevet som sådan:</p> <pre>Lorem ipsum</pre> <p>Som standard vises knappen i lys grå stil. Dette kan imidlertid enkelt endres til en av de fire andre (lyseblå, blå, grønn og rød) ved å bruke en ekstra klasse.</p> <ul> <li> <code>hoved~~POS=TRUNC</code> for en blå knapp som er den primære handlingen (for eksempel å sende inn et skjema)</li> <li> <code>info</code> for en lysere blå knapp, vanligvis brukt til å få tilgang til informasjon</li> <li> <code>suksess</code> for en grønn knapp, brukes til å signalisere suksess</li> <li> <code>fare</code> for en rød knapp, vanligvis brukt til irreversible eller farlige handlinger som å slette</li> </ul> <pre><button>primær~~POS=TRUNC</button> <button>Misligholde</button> <button>info</button> <button>Suksess</button> <button>Fare</button></pre> <p>Vi kan også endre størrelsen på en knapp fra standardinnstillingen. For å forstørre det, legg ganske enkelt til <code>stor</code> klassen eller krymp den med (yep, du gjettet det) <code>liten</code> klasse.</p> <p>Til slutt, for å deaktivere en knapp, er alt vi trenger å gjøre å legge til <code>funksjonshemmet</code> klasse og, når det gjelder en handlingsknapp, angi deaktivert attributt.</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>Navigasjon</h2> <p>Bootstrap inkluderer en fast navigeringslinje som ligner den på Twitter nettsted. Baren består i hovedsak av tre seksjoner, tittellenken, menypunktene i søkefeltet, innkapslet i et par <code><div></code> Etiketter som ikke er verdt å forklare.</p> <p>I koden under, vil du legge merke til en <code><h3></code> tag som inneholder tittelen. Det er ganske enkelt å endre dette og legge til din egen lenke og tekst.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Etter dette er menypunktene, som bare er uklassifiserte listeposter med lenker. Det er greit å duplisere disse elementene, siden de ikke krever noen Bootstrap-spesifikke stiler, bortsett fra <code>aktiv</code> klasse på den nåværende lenken.</p> <pre><ul> <li>Hjem</li> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> </ul></pre> <p>Den siste listen er for rullegardinmenyen. Den har en enkelt liste element, med en annen, nestet liste som vises på svinger over. Den tredje linjen i koden nedenfor er listeposten som vises konstant på navigasjonslinjen, mens listen som starter ved linje 4 er svingerelementene.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor sitt</li> <li>Amet Konsekvenser</li> <li>Nok med latin</li> </ul> </li> </ul></pre> <p>Som du vil legge merke til, legger du til et tomt element med <code>deler</code> klassen vil legge til en skillelinje i rullegardinmenyen.</p> <p>I bruk bør topplinjen se slik ut, plassert rett øverst på siden din.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Hjem</li> <li>Guider</li> <li>artikler</li> <li>Ukentlige avstemninger</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor sitt</li> <li>Amet Konsekvenser</li> <li>Nok med latin</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Merk at du vil kompensere for barens 40-pixel høyde øverst på siden din, ellers vil det overlappe de første elementene på siden din.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Tabs and Pills</h2> <p>Tabs og piller er sinnsykt lette å lage, da de bare er vanlige gamle lister. Selvfølgelig fungerer de ikke - Bootstrap handler om stilene. Bare konstruer listen med <code>faner</code> klasse for det flippede grensesnittet, eller <code>piller</code> klasse for pilleflikene. Som i navigeringsfeltet i forrige seksjon, legger du til <code>aktiv</code> klassen til en liste element vil markere den.</p> <p>For fanebryteren, bruk noe som ligner dette:</p> <pre><ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> <li>sitte</li> <li>Amet</li> </ul></pre> <p>For å bruke piller i stedet, bytt ut topplinjen for følgende.</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 beveger oss nå på paginering, som er funksjonsløs (som tabs og piller), men er fortsatt stylet i Bootstrap. Bootstrap håndterer pagineringsknapper de samme fanene, i en liste som denne tiden er pakket inn i a <code><div></code> med <code>paginering</code> klasse. Hvert listeelement kan ha et koblet nummer i det (eller en ellipsis), bortsett fra de første og siste elementene som er reservert for tidligere / neste linker. Disse har <code>prev</code> og <code>neste</code> klasser, henholdsvis.</p> <p>I tillegg kan en hvilken som helst knapp deaktiveres ved å legge til <code>funksjonshemmet</code> klassen, og den aktive lenken er uthevet med <code>aktiv</code> klasse. Som så:</p> <pre><div> <ul> <li>prev</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>neste</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Varsler og feilmeldinger</h2> <p>Alertbjelker er visuelt svært lik knapper, selv om de er konstruert annerledes. Hver feilmelding er en <code><div></code> tag med <code>alert-melding</code> klasse. Det finnes fire forskjellige typer meldinger, hver med en tilsvarende klasse som også må legges til:</p> <ul> <li> <code>advarsel</code> for en gul bar</li> <li> <code>feil</code> for en rød bar</li> <li> <code>suksess</code> for en grønn bar</li> <li> <code>info</code> for en blå bar</li> </ul> <p>Varselmeldinger skrives deretter som følger, og velger bare en klasse fra <code>advarsel / feil / suksess / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Bare for din informasjon, legger den andre linjen i koden ovenfor "?" til høyre for alter-beskjeden, som kan knyttes til en handling som fjerner meldingen.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Varsler trenger ikke å være en en-line affære heller. Hvis meldingen strekker seg utover en enkelt linje, legger du ganske enkelt til <code>blokk-meldingen</code> klassen til koden du vil bruke for en enkelt linje, mens du fortsatt bruker de ulike typeklassene.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Disse meldingene kan også holde knapper, nyttige hvis varselet må løses med et valg. Hvis du sjekker tilbake til vår seksjon på knapper, vet du hvordan du legger til disse. Bare vær sikker på å bruke de små versjonene, ved å legge til <code>liten</code> klassen til selve knappen, og pakk den inn i a <code><div></code> tag med <code>alert-handlinger</code> klasse.</p> <pre><div> × <p><strong>Det er ikke noe problem!</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 være nyttige for å vise informasjon i visse scenarier, ofte brukt for å legge inn data som brukerinformasjon eller innlegg. Bootstraps modal er ganske enkelt, og er delt inn i tre seksjoner; overskriften, kroppen og bunnteksten. Først begynner vi ved å åpne modalets <code><div></code> tag og plassere den med noen in-line-stiler som Bootstrap krever.</p> <pre><div></pre> <p>Innenfor den taggen plasserer vi de tre seksjonene, den første er toppteksten. Overskriften har en klasse av <code>modal-header</code> og inkluderer bare to linjer, en <code><h3></code> tag for tittelen, og den (valgfrie) koblet "?" som kan tilpasses for å lukke popover.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Neste opp har vi hovedinnholdet av innhold. Det er veldig enkelt, å være bare en <code><div></code> med <code>modal-legeme</code> klasse, og innholdet ditt inni. Og så:</p> <pre><div> <p>Det er ikke noe problem</p> </div></pre> <p>Endelig har vi den modale bunnteksten (en annen <code><div></code>, denne gangen med <code>modal-footer</code> klasse) som vanligvis består av knapper for å handle fra. Disse blir generert på akkurat samme måte som alle de andre knappene vi har opprettet med Bootstrap, så de trenger ingen ekstra forklaring.</p> <pre><div> Lorem ipsum dolor Sit Amet </div></pre> <p>Ok, jeg løy. Det var ikke det siste skrittet. Vi trenger fortsatt å lukke originalen <code><div></code>.</p> <pre></div></pre> <p>Sett alle disse delene sammen som en, og du får et ganske søtt modalvindu. Dessverre, som jeg fortsetter å minne deg, håndterer Bootstrap bokstavelig talt stilen her; Modalet vil egentlig ikke virke som om det er poppet over. Det ville være kjempebra hvis Bootstrap utvidet til å ha noen funksjonalitet i tillegg til CSS, men for øyeblikket må du generere eller kilde dine egne.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Siste tanker</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>Bildet over viser vårt siste design. Den består av alle elementene vi har opprettet i denne opplæringen (det er en egen demo for formelementene), helt innenfor rammen av Bootstrap. Forhåpentligvis har denne artikkelen vært nyttig for deg, særlig siden det kan være vanskelig for noen å dechifrere den medfølgende eksempelsiden (som fungerer som den eneste dokumentasjonen som følger med nedlastingen).</p> <p>Jeg elsker Bootstrap. Hvis du er ny for webutvikling, gir den et stort utvalg av elementer som skal brukes, selv om nettstedet ditt kan ende med å se litt for Twitter-ish gjennom mange delte elementer. Ikke desto mindre er enkelheten og brukervennligheten for vanskelig å ignorere hvis du ikke vil / kan ikke skrive din egen. Jeg kan ikke vente med å prøve og bruke noen av disse tingene i et nytt prosjekt.</p> <hr> <h3>Tilleggsressurser</h3> <p>Bruke Mindre CSS, BluePrint og WP for en raskere arbeidsflyt Wptuts+<br>Rask Tips: Skriv aldri et leverandørprefiks igjen+<br>Bootstrap Fra Twitter er en ny webdesigners 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">Webdesign</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">Fremgangsmåte for å bli en kvalitets WordPress Theme Developer</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </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="Søke..."> <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>

#