Layout di un progetto web con Bootstrap 2.0

Il compito principale durante la creazione di un sito Web è quello di impaginare il design per creare la struttura con xhtml e css per definire gli spazi dei contenuti, ad aiutarci in questo compito ci sono framework standard come 960gs o Bootstrap.
In questo caso, vedrò Bootstrap che è stato sviluppato e utilizzato da Twitter.
Bootstrap è un framework progettato per semplificare il processo di creazione di progetti web. Per questo, offre un insieme di classi CSS e file Javascript già programmati, che consentono lo sviluppo di attività come:

• Web design che funziona nei browser attuali, senza dover apportare molte modifiche.

• Un web design che può essere visualizzato correttamente su diversi dispositivi e con diverse scale e risoluzioni.

• Migliore integrazione con le librerie più utilizzate, come jQuery.

• Un design solido basato su strumenti e standard attuali come CSS3 / HTML5

Inizieremo un esempio scaricando il framework http://getbootstrap.com/2.3.2/

Decomprimiamo il file e vedremo 2 directory con i componenti bootstrap
Creiamo un file index.html che spiegheremo.
Creiamo un html con i componenti di base:

 Progetta con Bootstrap / * Ecco il contenuto * / 

Bootstrap immerge la struttura di 980 px in 12 colonne di 60 pixel per inserire il contenuto. I blocchi che possono essere creati vanno da 1 a 12 utilizzando la classe spanx quindi span1 sarà un blocco di 60 pixel. Un esempio di tutti i blocchi di contenuto che possiamo avere.

Creeremo una struttura di base di un'intestazione web, colonna di sinistra, contenuto, piè di pagina. Tutte le classi sono già presenti nei framework

// frame contenitore generale// definisce l'inizio di una riga di blocchi// blocco di 12 colonne pari a 980px per l'intestazione;// Blocco di 2 colonne pari a 120px per la colonna;// Blocco di 10 colonne pari a 600px per il contenuto;// blocco di 12 colonne pari a 980px per il piè di pagina;

INGRANDIRE

Componenti per creare un menu
Nella parte dell'intestazione puoi inserire un menu elenco con le classi della barra di navigazione per creare un menu:

// blocco di 12 colonne pari a 980px per l'intestazione;

Argomento 1
Argomento 2
Tema 3

Così possiamo vedere il nostro menù pronto senza doverci occupare di css.

INGRANDIRE

Quindi, se vuoi estendere il bootstrap creando le nostre regole css, creiamo un altro file default.css e lì inseriamo il nostro codice in questo modo, quindi aggiungiamo la nostra classe nel codice di esempio:

Creiamo un contenuto nella colonna dei contenuti

// Blocco di 10 colonne pari a 600px per il contenuto;
Creiamo contenuti con Bootstrap per spiegare il tutorial
// un paragrafo vuoto equivale a lasciare una riga o uno spazio Vedi Bootstrap

Il risultato durante l'aggiornamento del nostro esempio sarà:

INGRANDIRE

L'esempio non è un sito web completo o con un'estetica apprezzabile, ma come possiamo vedere con poco sforzo possiamo fare una demo o creare modelli senza bisogno di più di un editor di testo e risparmiare molto lavoro con l'intera piattaforma standardizzata.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo

Questo tutorial ti ha aiutato?

Altrimenti

AIUTA A MIGLIORARE QUESTO TUTORIAL!

Pensi di poter correggere o migliorare questo tutorial? Puoi inviare la tua Edizione con le modifiche che ritieni utili.
0 utenti hanno modificato questo tutorial. Modifica e diventa un esperto riconosciuto!
Modifica questo tutorial

TUTORIAL SIMILI

Barra orizzontale con effetto hover in html5, css3 e bootstrapOttieni le coordinate del cliente con l'API di Google Maps in JavaScript (HMTL5, CSS3 e Bootstrap)Imparare a creare una presentazione reattiva con HTML5 + BootstrapSviluppo dell'interfaccia web avanzata di Bootstrap FrameworkEstensione BootstrapNetbeans: crea progetti HTML5 con modelli e pluginInterfacce utente BootstrapUtilizzo dei componenti Bootstrap

Nessun commento, sii il primo!

Non aspettare oltre ed entra in SolveticLascia i tuoi commenti e sfrutta l'account utente Unisciti a noi!

• Crea un accountIscriviti GRATIS per avere il tuo account SolveticRegistra un account
• IdentificareHai già un account? Accedi quiIdentificami nel mio Account