In questo post inizieremo realizzando un sito con Bootstrap, il framework open source che ci consente di renderlo reattivo e di fornirgli una certa interattività. Si tratta di un template base generato automaticamente da un plugin dell'ambiente di sviluppo che abbiamo consigliato prima e che dovremo modificare.
Nel precedente articolo Troverai le istruzioni per installare VS Codium, tradurre la sua interfaccia utente in spagnolo e installare il plugin Bootstrap.
Due cose da tenere a mente:
- I comandi che utilizziamo sono scorciatoie da tastiera, devi digitarli. Copia/incolla non funziona.
- Il nostro gestore dei contenuti non mi consente di visualizzare il codice HTML, quindi devo usare gli screenshot. In modo che tu abbia accesso al codice degli esempi che li ho caricati su GitHub.
Come clonare un repository GitHub
Ciò che separa i grandi dal resto di noi è il modo in cui reagiscono ai problemi. A Richard Stallman non piaceva il suo driver della stampante e poiché non gli permettevano di cambiarlo, iniziò il movimento del software libero. Linus Torvalds non è stato convinto da nessuna delle piattaforme di condivisione del codice e ne ha creato una propria. idiota.
A differenza dei tradizionali sistemi di distribuzione del software in cui l'unica interazione dell'utente consentita è il download, con Git puoi seguire l'evoluzione del progetto nel tempo. Altre persone possono clonare il repository, apportare modifiche e proporre che gli sviluppatori del progetto originale le incorporino. Se accettati, gli sviluppatori possono farlo facilmente senza dover scaricare e ricaricare i file.
Esistono diversi servizi basati su Git, io ho scelto GitHub semplicemente perché si integra con VS Codium.
Per scaricare i file di esempio sul tuo computer devi solo installare il pacchetto git seguendo le istruzioni della tua distribuzione per l'installazione dei pacchetti nel terminale.
Quindi digiti i seguenti comandi.
Preferisco salvare i file nella cartella Documenti, quindi cambio la directory con
cd Documentos
Quindi clono i file con:
git clone https://github.com/dggonzalez1971/bootstrap.git
Ti ricorderò questi passaggi in ciascuno degli articoli rimanenti, poiché in questo modo aggiornerai i file di esempio man mano che vengono caricati.
Per vedere i file basta aprire Esplora file e cercare la cartella bootstrap.
Realizzare un sito con Bootstrap
Nel caso in cui preferiate digitare il codice manualmente iniziamo creando una cartella in cui salveremo il sito. Puoi mettere il nome che preferisci.
Quindi seguiamo i passaggi successivi:
- Andiamo al menu Archivio.
- Clicca su Nuovo file di testo.
- Clicca su Salva.
- Cerchiamo la cartella che abbiamo creato e mettiamo il nome del file esempio1.html.
- Clicca su Salva.
A volte la finestra di Esplora file può essere nascosta da quella di VSCodium.
Facciamo in modo che l'estensione crei il modello di base per noi. Per questo digitiamo !b5-$
Questo genererà il codice che troverai nella cartella degli esempi come esempio1.html
Vedremo quanto segue:
Questo è il codice generato dall'estensione Bootstrap.
Apporteremo alcune modifiche a questo file. Troverai le modifiche sotto il nome example2.html
- Alla riga 2 cambiamo la lingua sostituendo eng con es. Questo indica ai motori di ricerca che la lingua del sito è lo spagnolo.
- Nella riga 6 cambiamo il testo che si trova sotto le etichette titolo. Abbiamo messo Il mio primo sito Bootstrap.
- Nella riga 12 cambiamo il contenuto tra i tag h1 by Questo è un sito realizzato con Bootstrap.
Successivamente, apporteremo alcune modifiche importanti. Queste modifiche hanno a che fare con:
- Lo sviluppatore del plugin non riesce a tenere il passo con le versioni Bootstrap e ce ne sono di più attuali.
- Ci sono molte opzioni per i componenti bootstrap e mi interessa un altro.
- Secondo la documentazione ufficiale, le chiamate alle librerie Javascript devono essere all'interno dei tag body.
Ad esempio 2 abbiamo modificato il contenuto della riga 7, eliminato le righe 8 e 9 e caricato il contenuto rimanente per mantenere la compatibilità della numerazione. Quindi facciamo clic alla fine della riga 10 per creare una nuova riga 11 e inserire il collegamento alle librerie Javascript.
Non preoccuparti se non capisci il codice. Spiegherò la funzione di ogni riga nel prossimo articolo.