LayoutIt! - Costruire layout bootstrap HTML con facilità

Se vuoi creare un sito web reattivo allora Bootstrap sarà uno strumento utile per te. Quest'ultima innovazione di framework ha portato gli sviluppatori web a un nuovo approccio per la creazione di siti Web e app più facili, veloci e migliori in generale.

Ma è piuttosto difficile e per non parlare del dispendio di tempo per costruire un layout da zero. Per rendere questo processo più semplice e veloce, in questo post vedremo LayoutIt! che ti aiuta a progettare facilmente layout HTML basati su Bootstrap.

LayoutIt! è uno strumento basato sul Web per il layout di una struttura di una pagina Web con trascinamento della selezione. LayoutIt! supporta l'ultima versione di Bootstrap e se non si desidera iniziare completamente da zero, ha 3 modelli di base che è possibile utilizzare. Il design quindi, è pronto per essere utilizzato nel tuo progetto completo di codice Bootstrap integrato . Finora, è ancora in modalità beta, ma finora funziona bene senza intoppi.

Iniziare

Per iniziare con LayouIt! devi andare alla pagina Modifica. Come puoi vedere nello screenshot seguente, ci sono vari strumenti e opzioni da verificare. Nella parte superiore, puoi vedere le 3 modalità che puoi creare in: modalità Modifica, Modalità sviluppatore e Modalità anteprima.

Sotto la barra in alto puoi vedere gli elementi sulla barra laterale sinistra e il contenitore sulla destra. Il contenitore è la tua tela su cui puoi costruire e personalizzare i tuoi elementi. Una volta che hai finito di costruire, scarica il codice, condividi o salvalo .

Elementi

Esistono 4 tipi di elementi: Grid System, Base CSS, Javascript e componenti aggiuntivi. Basta trascinare e rilasciare l'elemento richiesto nel contenitore e personalizzarlo di conseguenza.

Per iniziare, scegli un sistema di griglie o diversi per creare il layout che vuoi vedere sul tuo sito web. La griglia ti fornisce fondamentalmente righe e colonne su cui lavorare.

Una volta ottenuta la griglia è possibile aggiungere alcuni elementi CSS di base con CSS di base, come titolo, paragrafo, blockquote, tabella, pulsante, immagine e così via. Puoi trovare altre preferenze aggiuntive in ogni elemento, come l'allineamento per i paragrafi, l'enfasi o il renderlo come lead.

Per aggiungere attributi comuni, i componenti forniscono diversi elementi di base del sito Web, come pulsante, intestazione, testo, breadcrumb, impaginazione e così via. Infine, per migliorare il tuo sito web, inserisci alcuni elementi di Javascript : modale, barra di navigazione, schede, avvisi, compressione o carosello.

Guida all'uso

Per vedere come LayoutIt! lavora in azione, stiamo cercando di costruire il layout di homepage di Hongkiat.com. Ecco una ripartizione del layout.

Innanzitutto, dobbiamo lavorare sul layout della griglia.

Il layout richiede quattro righe principali: una singola colonna per l'intestazione e la barra di navigazione; due colonne per il contenuto del testo, l'immagine e l'impaginazione; una singola colonna per la barra laterale; quattro colonne per il piè di pagina e una colonna per la nota a piè di pagina. Il seguente screenshot è come appare il layout su una griglia scheletro.

Ora per aggiungere gli altri elementi:

1. Aggiungiamo un'intestazione da "Componenti" e una barra di navigazione da "Javascript".
2. Per mettere l'immagine accanto al contenuto del testo, un'altra griglia 8 4 dovrebbe essere inserita all'interno della prima griglia 8 (vedi foto sopra).
   • Aggiungi testo da "Componenti" e aggiungi Immagine da "Base CSS".
   • Sotto Testo e immagine, inserisci l' impaginazione da "Componenti"
   • Per la sidebar, aggiungiamo semplicemente un testo dell'etichetta usando Title da "Base CSS".
3. Per il footer, possiamo Titolo e Paragrafo da "Base CSS".
4. Per la nota a piè di pagina, basta aggiungere il paragrafo da "Base CSS".

E abbiamo finito. Questo è come sarà il layout. Suggerimento: per abilitare la modifica del testo, fare clic con il tasto destro del mouse sul testo.

Per coloro che hanno familiarità con Bootstrap e vogliono creare layout supportati da Bootstrap, LayoutIt! è uno strumento divertente con cui giocare. Fai un tentativo e facci sapere cosa ne pensi.

Il nuovo reCAPTCHA di Google è ora invisibile

Molti di voi potrebbero avere familiarità con reCAPTCHA, il sistema che estrae i bot online chiedendo agli utenti di spuntare una casella di spunta per verificare l'utente come umano. Bene, quel sistema sta per ricevere un aggiornamento presto, visto che Google sta cercando di rendere reCAPTCHA invisibile .

(Consigli tecnici e di design)

Come mantenere i tuoi Bitcoin sicuri

Uno dei più grandi asset digitali, Bitcoin, ha una propria lista di storie di furti e violazioni. Con il suo valore fino a $ 2900 + quest'anno, è ovvio che tutti, compresi i cyber criminali, mostrano interesse per Bitcoin . O chiedendo a BTC in attacchi ransomware o saccheggiando i portafogli, gli hacker fanno del loro meglio per ottenere bitcoin .A

(Consigli tecnici e di design)