Creare pagine web facilmente con Bootstrap 3

creare pagine web facilmente

Bootstrap 3: uno dei più popolari framework messo a disposizione da Twitter per realizzare pagine Web. Il suo utilizzo è veramente semplice, abbiamo delle classi CSS preimpostate, i Javascript, tutto da poter utilizzare all’istante; Il pacchetto Bootstrap contiene davvero il completo necessario per creare pagine web facilmente e con tutto quello che abbiamo bisogno. In questa guida velocizzeremo del 100% la creazione di pagine web usando Bootstrap 3 e un software gratuito di nome Pingendo che ci permette di usare un editor visuale per il nostro progetto.

Per iniziare: cosa ci serve?

  • Il pacchetto completo di Bootstrap 3: scaricalo da qui (cliccando su Download Bootstrap)
  • Il software Pingendo: scaricalo da qui (Disponibile per Windows, Mac e Linux)
  • Un editor di codice gratuito come Notepad++: scaricalo da qui

1) Creazione della cartella di lavoro

  1. Crea una nuova cartella sul desktop rinominandola con il nome del sito che vuoi realizzare;
  2. Estrai l’archivio di Bootstrap 3 scaricato in precedenza, apri la cartella estratta e sposta le cartelle css, fonts e js nella nuova cartella creata in precedenza con il nome del tuo sito; (scusa la ripetizione cartella);
  3. Apri Notepad++, vai su file e poi su nuovo;
  4. Incolla questo codice e sostituisci Mio Sito con il nome che desideri dare alla pagina (esso comparirà sulla scheda del browser):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mio Sito</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
  1. Adesso vai su Linguaggio e dall’elenco scendi alla lettera H e scegli HTML;
  2. Adesso salva con nome il documento chiamandolo index.html all’interno della cartella creata per il tuo sito (dove abbiamo inserito i file di Bootstrap).

Il risultato sarà come nell’immagine:

cartella miosito

2) Creazione della pagina web con Pingendo

Nella prima fase abbiamo visto come creare la cartella di lavoro e il codice necessario per la nostra pagina, adesso daremo in pasto tutto a Pingendo per creare il nostro layout personalizzato:

  • Apri Pingendo;
  • Clicca su Open existing document e scegli il file index.html creato in precedenza;

ECCO LA NOSTRA SCHERMATA:

pingendo

 

Da qui possiamo iniziare a trascinare gli elementi sulla pagina, tutto drag n drop, per poi modificare il testo cliccandoci due volte sopra e le proprietà nella barra di destra. Sopra abbiamo l’anteprima, mentre sotto l’editor di codice che può essere anche lui utilizzato.

L’utilizzo è semplicissimo e perderei più tempo a spiegarvelo che a lasciarvelo provare, smanettate ed imparerete subito. Per completezza nell’immagine sottostante vi descrivo i principali comandi:

comandi pingendo

 

In questo video puoi farti un idea di come creare pagine web facilmente con Pingendo e Bootstrap

Utilizzo manuale dei componenti di Bootstrap 3

Se sei a un livello più avanzato, quindi conosci la struttura HTML, puoi implementare manualmente tu i vari componenti di Bootstrap con tutte le loro personalizzazioni seguendo le linee guida da questa pagina.

Utilizzo di modelli preimpostati

Puoi dare in pasto alle tue capacità e fantasie, o anche a Pingendo, dei template preimpostati realizzati con il framework di Bootstrap 3. Ce ne sono centinaia! Ti indico adesso dove trovarli cosi potrai farti un idea della struttura e modificarla come vuoi per il tuo sito web: su Bootstrapzero.com troverai numerosi template base per iniziare, e sono davvero molto carini!

Conclusioni

La prima parte di questa guida è quella più importante sebbene la più facile. Imparerai ad utilizzare il software Pingendo solo smanettando e smanettando, il suo uso è davvero molto semplificato. Se poi hai bisogno del supporto o qualche consiglio resto a tua disposizione nei commenti!

LASCIA UN COMMENTO

Scrivi il tuo commento
Inserisci il tuo nome

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.