e l'intera gerarchia delle intestazioni. Onestamente, questa è roba di "Sviluppo Web 101" che probabilmente già conosci, quindi non sprecherò il tuo tempo a spiegare come stile. È roba piuttosto elementare.

È importante notare che Bootstrap tiene conto dei tag obsoleti e ora obsoleti, quindi non dovresti preoccuparti se stai utilizzando un CMS che li utilizza, o per un cliente che non conosce alternative.

citando

Dove Bootstrap ha bisogno di un po 'più di spiegazione è quando si arriva a utilizzare il

etichetta. Puoi usare il tag da solo per mostrare la citazione rientrata, con uno spesso bordo grigio sulla sinistra. Tuttavia, può essere migliorato nidificando altri tag all'interno per attribuire la citazione. Quando si tratta di aggiungere un attributo, è sufficiente avvolgere il testo del preventivo in a

tag e la fonte in a tag e Bootstrap verranno automaticamente formattati e posizionati di fronte alla sorgente.

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
 Connor Turnbull, il 30 agosto 

Finirai con un risultato simile all'immagine qui sotto, a seconda del contenuto che inserisci tra il paragrafo e i tag piccoli.

elenchi

Gli elenchi rappresentano un altro aspetto dello spettro tipografico coperto da Bootstrap e sono disponibili con quattro diversi tipi di stili: elenchi puntati, elenchi puntati nidificati, elenchi ordinati e glossari. Di nuovo, questi non sono così difficili da usare in quanto non si discostano dagli standard in HTML. Poiché le liste possono essere costruite in diversi modi, ecco un breve riassunto su come usarle con gli stili Bootstrap.

Il seguente codice è un elenco puntato non ordinato di base che produrrà qualcosa di simile al primo esempio nell'immagine qui sotto. Scambia il ul per un olo per produrre una lista ordinata, come quella del secondo esempio.

 
Lorem ipsum dolor sit amet
 
Consectetur adipiscing elit
? 

Se aggiungi il unstyled classificare nell'elenco non ordinato, gli elementi non annidati dell'elenco non verranno puntati o ordinati. Appariranno semplicemente come linee regolari, mentre gli oggetti annidati avranno un proiettile a sinistra.

 
Lorem ipsum dolor sit amet
 
Consectetur adipiscing elit
? 

L'aggiunta di un elenco di descrizione viene eseguita nello stesso modo in cui ti aspetteresti al di fuori di Bootstrap e genera un esempio come l'ultimo nell'immagine sopra.

 
Lorem ipsum
 
Lorem ipsum dolor sit amet
 
consectetur
 
Consectetur adipiscing elit
? 

---

tabelle

Bootstrap è un toolkit rivolto in parte ai nuovi web designer, quindi non è detto che queste cose non siano pensate per i layout. Invece le tabelle sono pensate per i dati tabulari e Bootstrap fa un ottimo lavoro per abbellire i dati tabulari con i suoi stili, senza bisogno di classi o attributi aggiuntivi. Ad esempio, possiamo dare un'occhiata a un normale snippet di HTML che genererebbe una tabella.

 
 
 
#
 
Nome di battesimo
 
Cognome
 
linguaggio
 
 
 
 
 
1
 
Alcuni
 
Uno
 
Inglese
 
 
 
2
 
Joe
 
Confezione da sei
 
Inglese
 
 
 
3
 
Stu
 
ammaccatura
 
Codice
 
 
 

Il codice sopra crea la tabella nell'immagine seguente, come nell'esempio ufficiale di Twitter. Ha tre righe di contenuto e un'intestazione in quattro colonne, ed è piuttosto standard. Con poca manipolazione (zero che, senza alcuna manipolazione) alla creazione standard di una tabella, Bootstrap applica automaticamente i suoi stili.

In questo caso, la cosa fondamentale da ricordare è quella di annidare correttamente i tag. Gli stili non si applicano se non si avvolge la riga di intestazione in a tag, per esempio.

Per impostazione predefinita, la tabella non è zebrata, dove i colori alternati potrebbero riempire lo sfondo di ogni riga. Questo è facile da abilitare, tuttavia, semplicemente aggiungendo il zebrata classe al

tag senza alcuna manipolazione delle righe o delle singole parti.

?

Infine, con l'aggiunta di una piccola parte di jQuery, ma nessuna modifica al codice HTML oltre all'aggiunta sortTableExample come l'ID del

#

tag, è possibile aggiungere funzionalità di ordinamento quando si fa clic sull'intestazione di una colonna. Questa funzionalità richiede il plug-in jQuery Tablesorter 2.0, scaricabile gratuitamente. Come probabilmente hai già indovinato, dovrai anche chiamare jQuery affinché funzioni.

?

---

Forme e pulsanti

La maggior parte delle cose che abbiamo già trattato è piuttosto semplice, in cui Bootstrap applicherà gli stili al tuo codice con poche o nessuna modifica rispetto al normale. Togliendolo di mezzo, ora possiamo passare ad alcune cose che richiedono un po 'più di spiegazione e un po' più di tutoraggio.

Le forme

Per le forme, ci sono molti stili diversi che puoi usare, quindi li esamineremo singolarmente. È quindi possibile utilizzarli solo in combinazione tra loro e manipolarli con conoscenze preesistenti di normali form HTML precedenti.

In primo luogo, si dovrebbe notare che l'intero modulo deve essere racchiuso in a

tag, ma probabilmente lo sai già. Bootstrap ti consiglia anche di avvolgere i tuoi elementi

tag, con un ulteriore

etichetta.

 
 
Lorem ipsum dolor sit amet
 (i tuoi campi vanno qui) 
 

In generale, la configurazione del modulo non dovrebbe differire dal codice precedente. L'unica altra opzione che Bootstrap fornisce è di optare per i moduli impilati, dove le etichette risiedono in cima a un campo, piuttosto che a sinistra. Ciò può essere ottenuto aggiungendo il forma-stacked classe al

etichetta.

L'immissione di testo

Per dare inizio alla nostra copertura dei campi del modulo, esamineremo un campo di inserimento regolare con un'etichetta. Il frammento di codice qui sotto è essenzialmente a e un tag, avvolto in a

tag con il clearfix classe per garantire la corretta spaziatura. Inoltre, il campo effettivo è racchiuso in un altro

con il ingresso classe, ancora una volta, per garantire la corretta spaziatura.

 Lorem ipsum 
  
 

Per l'amor di questo tutorial, ho intenzione di ignorare alcune pratiche che dovrebbero essere impiegate nel codice. Ad esempio, ogni input dovrebbe avere un ID, che è associato all'etichetta tramite l'attributo "for", e generalmente vorrai assegnare un nome ai campi di input per afferrarli quando si tratta di elaborare i tuoi dati. Stiamo cercando in particolare come utilizzare gli stili di Bootstrap qui, quindi quei tipi di attributi non sono stati inclusi nei miei esempi per cercare di mantenere le cose il più semplici possibile. Tuttavia, anche se vengono utilizzati insieme a Bootstrap, tali attività non devono essere dimenticate.

Aggiungendo il XLarge classe al , il campo modulo viene ampliato.

Possiamo disabilitare un input in modo regolare, aggiungendo gli attributi appropriati, come dimostrato nell'esempio seguente. Gli stili di Bootstrap sono aggiunti nel Disabilitato classe, che dovrebbe essere aggiunta per mostrare visivamente che un utente non può interagire con quel campo ingrigendolo.

 Lorem ipsum 
  
 

Mentre l'approccio in grigio di un campo disattivato si ottiene utilizzando un tag, non è modificabile. Invece, Bootstrap usa un semplice che può essere utilizzato in combinazione con un input nascosto. Questi campi vengono utilizzati per informazioni che l'utente non deve modificare, ad esempio una data o un indirizzo IP raccolti automaticamente.

 Lorem ipsum 
 Lorem ipsum dolor sit amet  
 

Il nostro sguardo finale sugli input di testo di stile è di mostrare l'aiuto contestuale quando si verifica un errore. È fatto aggiungendo un errore classe al

quello forma il clearfix e al taggalo da solo. Aggiungere un tag con il help-Inline la classe sotto aggiunge il messaggio di aiuto sul lato destro.

 Lorem ipsum 
  Dolor sit amet 
 

Seleziona a discesa

Un menu a discesa è strutturato in modo simile, con il codice normale utilizzato, come mostrato di seguito.

 Lorem Ipsum 
  Lorem ipsum dolore Sedersi Amet  
 

Il XLarge la classe in un campo di testo è l'opposto di medio classe a a etichetta. L'aggiunta di una classe di questo tipo al menu a discesa delle opzioni renderà il campo più stretto.

caselle di controllo

Le caselle di controllo non sono realmente in stile in Bootstrap. Il toolkit li sistema semplicemente per sedersi in linea con gli altri campi, e lo fa creando un elenco con ogni elemento della casella di controllo. Il codice è piuttosto auto-esplicativo, assicurati di includere sia il testo dell'etichetta che la casella di controllo in tag in modo che (a) la casella di controllo sia flottante a sinistra e (b) la casella di controllo possa essere selezionata facendo clic sull'etichetta.

 Lorem ipsum 
 
 
  

Lorem ipsum dolor sit amet

Quel codice genererà una singola casella di controllo con un'etichetta a destra. Per crearne uno aggiuntivo, basta ripetere la voce dell'elenco e il suo contenuto, quindi voil ?, hai una lista di checkbox.

Per disabilitare una casella di controllo, è sufficiente aggiungere il Disabilitato attributo al tag, e il Disabilitato classe al etichetta.

   Lorem ipsum dolor sit amet  

Inoltre, ci sono due tipi extra di checkbox accoppiati con campi di testo: caselle di controllo aggiunte e aggiunte. Di nuovo, questo è abbastanza auto-esplicativo ed è molto simile ad un normale campo di testo. Tuttavia, questa volta è necessario avvolgere la casella di controllo in a tag (con il Aggiungi su classe), e il input-prepend o il input-accodamento classe al genitore

. Quindi, tutto ciò che rimane è assicurarsi di inserire l'etichetta e il campo nel modo giusto, a seconda che lo si desideri anteposto o aggiunto.

 Lorem ipsum 
   
 

Il codice sopra è per una casella di controllo aggiunta, ma, se si desidera uno già anteposto, c'è poco da cambiare.

 Lorem ipsum 
   
 

Input di file

Gli input dei file sono molto simili ai campi di testo e il codice sottostante è piuttosto auto-esplicativo. Creare un normale file input con file di input classe.

 Lorem ipsum 
  
 

Aree di testo

L'ultimo stile Bootstrap per i moduli è l'area di testo. L'area di testo viene creata allo stesso modo del campo di testo a riga singola. Come ingrandire un campo di testo, l'area di testo ha anche una sua classe per renderla più ampia, XXLarge.

 Lorem ipsum 
  
 

Facoltativamente, puoi aggiungere una piccola riga di aiuto sotto il campo con la seguente riga aggiunta immediatamente dopo </code> etichetta.</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>pulsanti</h3> <p>Ora è il momento di elaborare il nostro modulo e normalmente lo facciamo facendo clic su un pulsante. Fortunatamente, Bootstrap copre i pulsanti e sono super semplici da aggiungere.</p> <p>I pulsanti possono essere aggiunti tramite uno <code><a></code> o a <code><button></code> etichetta. Entrambi condividono le stesse classi e appariranno identici, ma dovresti provare a riservare pulsanti per azioni e link per, beh, link. Quindi, ad esempio, un pulsante verrebbe scritto così:</p> <pre><button>Lorem ipsum</button></pre> <p>E un pulsante identico, ma creato come collegamento, verrebbe scritto così:</p> <pre>Lorem ipsum</pre> <p>Per impostazione predefinita, il pulsante apparirà in uno stile grigio chiaro. Tuttavia, questo può essere facilmente modificato in uno degli altri quattro (blu chiaro, blu, verde e rosso) applicando una classe aggiuntiva.</p> <ul> <li> <code>primario</code> per un pulsante blu che è l'azione principale (ad esempio, inviare un modulo)</li> <li> <code>Informazioni</code> per un pulsante blu più leggero, solitamente utilizzato per accedere alle informazioni</li> <li> <code>successo</code> per un pulsante verde, usato per segnalare il successo</li> <li> <code>Pericolo</code> per un pulsante rosso, di solito utilizzato per azioni irreversibili o pericolose come la cancellazione</li> </ul> <pre><button>Primario</button> <button>Predefinito</button> <button>Informazioni</button> <button>Successo</button> <button>Pericolo</button></pre> <p>Possiamo anche cambiare la dimensione di un pulsante dal valore predefinito. Per ingrandirlo, aggiungi semplicemente il <code>grande</code> classe o rimpicciolisci con (sì, hai indovinato) <code>piccolo</code> classe.</p> <p>Infine, per disabilitare un pulsante, tutto ciò che dobbiamo fare è aggiungere il <code>Disabilitato</code> classe e, nel caso di un pulsante di azione, impostare l'attributo disabilitato.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>o</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navigazione</h2> <p>Bootstrap include una barra di navigazione fissa che assomiglia a quella sul sito web di Twitter. La barra è composta essenzialmente da tre sezioni, il link del titolo, le voci di menu nella barra di ricerca, racchiuse in un paio di <code><div></code> tag che non vale la pena spiegare.</p> <p>Nel codice qui sotto, noterai un <code><h3></code> tag che contiene il titolo. È abbastanza facile modificarlo e aggiungere il tuo link e il tuo testo.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Di seguito sono elencate le voci di menu, che sono solo voci di elenco non classificate con collegamenti. È abbastanza semplice duplicare questi elementi poiché non richiedono stili specifici di Bootstrap, a parte il <code>attivo</code> classe sul link corrente.</p> <pre><ul> <li>Casa</li> <li>Lorem</li> <li>ipsum</li> <li>dolore</li> </ul></pre> <p>L'ultimo elenco è per il menu a discesa. È dotato di un singolo elemento di elenco, con un altro elenco annidato che appare al passaggio del mouse sopra. La terza riga del codice sotto è la voce di elenco che appare costantemente sulla barra di navigazione, mentre l'elenco che inizia alla riga 4 è gli elementi al passaggio del mouse.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor siediti</li> <li>Amet Consequeter</li> <li>Basta con il latino</li> </ul> </li> </ul></pre> <p>Come noterai, aggiungendo un elemento di elenco vuoto con il <code>divisore</code> la classe aggiungerà un divisore nel menu a discesa.</p> <p>In uso, la barra superiore dovrebbe essere simile a questa, posizionata nella parte superiore della pagina.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Casa</li> <li>Esercitazioni</li> <li>articoli</li> <li>Sondaggi settimanali</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor siediti</li> <li>Amet Consequeter</li> <li>Basta con il latino</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Nota che dovrai compensare l'altezza di 40 pixel della barra nella parte superiore della pagina, altrimenti si sovrapporrà ai primi elementi della pagina.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Tab e pillole</h2> <p>Tab e pillole sono incredibilmente facili da creare, in quanto sono solo vecchi elenchi regolari. Certo, non funzionano - Bootstrap riguarda tutti gli stili. Costruisci semplicemente la tua lista con il <code>schede</code> classe per l'interfaccia a schede o <code>pillole</code> classe per le schede pillola. Come nella barra di navigazione nella sezione precedente, aggiungendo il <code>attivo</code> la classe di un elemento della lista la evidenzierà.</p> <p>Per il commutatore di tabulazioni, usa qualcosa di simile a questo:</p> <pre><ul> <li>Lorem</li> <li>ipsum</li> <li>dolore</li> <li>Sedersi</li> <li>Amet</li> </ul></pre> <p>Per usare invece le pillole, scambia la riga superiore per quanto segue.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>paginatura</h2> <p>Ora passiamo alla paginazione, che è senza funzione (come le schede e le pillole), ma è ancora in stile in Bootstrap. Bootstrap gestisce i pulsanti di impaginazione le stesse schede, in un elenco che questa volta è racchiuso in a <code><div></code> con il <code>paginatura</code> classe. Ogni elemento della lista può avere un numero collegato (o un puntino di sospensione), ad eccezione del primo e dell'ultimo elemento che sono riservati per i collegamenti prev / next. Questi hanno il <code>prev</code> e <code>Il prossimo</code> classi, rispettivamente.</p> <p>Inoltre, qualsiasi pulsante può essere disabilitato aggiungendo il <code>Disabilitato</code> classe, e il collegamento attivo è evidenziato con <code>attivo</code> classe. Così:</p> <pre><div> <ul> <li>prev</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Il prossimo</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Avvisi e messaggi di errore</h2> <p>Le barre di avviso sono visivamente molto simili ai pulsanti, sebbene siano costruite diversamente. Ogni messaggio di errore è a <code><div></code> tag con il <code>allarme-messaggio</code> classe. Esistono quattro diversi tipi di messaggi, ciascuno con una classe corrispondente che deve essere aggiunta:</p> <ul> <li> <code>avvertimento</code> per una barra gialla</li> <li> <code>errore</code> per una barra rossa</li> <li> <code>successo</code> per una barra verde</li> <li> <code>Informazioni</code> per una barra blu</li> </ul> <p>I messaggi di avviso vengono quindi scritti come segue, selezionando solo una classe da <code>warning / error / successo / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Solo per vostra informazione, la seconda riga del codice sopra aggiunge "?" a destra del messaggio di modifica, che potrebbe essere collegato a un'azione che rimuove il messaggio.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Gli avvisi non devono necessariamente essere un affare di una riga. Se il tuo messaggio si estende oltre una singola riga, aggiungi semplicemente il <code>block-messaggio</code> classificare il codice che si utilizzerà per una singola riga, mentre si utilizzano ancora le diverse classi di tipi.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Questi messaggi sono anche in grado di contenere pulsanti, utili se l'avviso deve essere risolto con una scelta. Se ritorni alla nostra sezione sui pulsanti, saprai come aggiungerli. Assicurati di utilizzare le versioni piccole, aggiungendo il <code>piccolo</code> classificare il pulsante stesso e avvolgerlo in a <code><div></code> tag con il <code>Alert-azioni</code> classe.</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>I modali possono essere utili per mostrare informazioni in determinati scenari, comunemente usati per inserire dati come informazioni dell'utente o post. Il modal Bootstrap è abbastanza semplice ed è diviso in tre sezioni; l'intestazione, il corpo e il piè di pagina. Innanzitutto, iniziamo aprendo le modali <code><div></code> tag e posizionarlo con alcuni stili in linea richiesti da Bootstrap.</p> <pre><div></pre> <p>All'interno di quel tag, posizioniamo quindi le tre sezioni, la prima è l'intestazione. L'intestazione ha una classe di <code>modal-header</code> e include solo due righe, a <code><h3></code> tag per il titolo e il link (facoltativo) "?" che può essere personalizzato per chiudere il popover.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Di seguito, abbiamo il corpo principale del contenuto. È molto semplice, essendo solo un <code><div></code> con il <code>modal-corpo</code> classe e il tuo contenuto all'interno. In questo modo:</p> <pre><div> <p>Lorem ipsum dolor sit amet</p> </div></pre> <p>Infine, abbiamo il modale footer (un altro <code><div></code>, questa volta con il <code>modal-footer</code> classe) che generalmente consiste di pulsanti da cui agire. Questi sono generati esattamente nello stesso modo di tutti gli altri pulsanti che abbiamo creato con Bootstrap, quindi non hanno bisogno di spiegazioni aggiuntive.</p> <pre><div> Lorem ipsum dolor sit amet </div></pre> <p>Ok, ho mentito. Non era il passo finale. Dobbiamo ancora chiudere l'originale <code><div></code>.</p> <pre></div></pre> <p>Metti insieme tutte queste parti come una, e ottieni una finestra modale piuttosto dolce. Sfortunatamente, come continuo a ricordarti, Bootstrap sta letteralmente gestendo lo stile qui; il modale non apparirà effettivamente come se fosse saltato fuori. Sarebbe fantastico se Bootstrap fosse espanso per avere alcune funzionalità in aggiunta al CSS, ma per il momento dovrai generare o creare il tuo.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Pensieri finali</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>L'immagine sopra mostra il nostro progetto finale. Consiste di tutti gli elementi che abbiamo creato in questo tutorial (c'è una demo separata per gli elementi del modulo), interamente nell'ambito di Bootstrap. Speriamo che questo articolo ti sia stato utile, soprattutto perché può essere difficile per alcuni decifrare la pagina di esempio inclusa (che funge da unica documentazione inclusa nel download).</p> <p>Adoro Bootstrap. Se sei nuovo nello sviluppo web, fornisce una vasta gamma di elementi da utilizzare, anche se il tuo sito potrebbe sembrare un po 'troppo Twitter-ish attraverso molti elementi condivisi. Nondimeno, la semplicità e la facilità d'uso sono troppo difficili da ignorare se non si desidera / non si può scrivere il proprio. Non vedo l'ora di provare a utilizzare alcune di queste cose in un nuovo progetto.</p> <hr> <h3>Risorse addizionali</h3> <p>Utilizzando meno CSS, BluePrint e WP per un flusso di lavoro più veloce Wptuts+<br>Suggerimento rapido: non digitare mai un prefisso fornitore di nuovo Nets+<br>Bootstrap da Twitter è la nuova web app Dream di Web Designer<br>Modelli Bootstrap su 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">Web design</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">Passi per diventare uno sviluppatore di temi WordPress di qualità</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">Entrando nell'industria della fotografia di moda</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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca..."> <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>

#